概览：Vue核心思想是 “数据驱动的组件系统”。MVVM的本质是通过数据绑定链接View和Model，让数据的变化自动映射为视图的更新。 一、computed与methods的区别 在法上computed计算属性的方式在用属性时不用加(),而methods方式在使用时要像方法一样去用，必须加()。 两种方式在缓存上也大有不同，利用computed计算属性是将 reverseMessage与message绑定，只有当message发生变化时才会触发reverseMessage，而methods方式是每次进入页面都要执行该方法，但是在利用实时信息时，比如显示当前进入页面的时间，必须用methods方式 二、指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。 1、v-if 条件渲染指令，根据其后表达式的bool值进行判断是否渲染该元素； 2、v-show用于根据条件展示元素的选项。用法大致一样：<h1 v-show="ok">Hello!</h1>；不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。注意，v-show 不支持 <template> 元素，也不支持 v-else。 3、v-if vs v-show v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做――直到条件第一次变为真时，才会开始渲染条件块。 相比之下，v-show 就简单得多――不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。 4、v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。 5、v-for 类似JS的遍历，用法为 v-for="item in items", items是数组，item为数组中的数组元素。 6、v-bind 这个指令用于响应地更新 HTML 特性，比如绑定某个class元素或元素的style样式。可以用 v-bind 来动态地将 prop 绑定到父组件的数据 7、v-on 用于监听指定元素的DOM事件，比如点击事件。 8、v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。 9、v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定 10、v-html 指令，双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用v-html 指令 11、vm (ViewModel 的缩写) 这个变量名表示 Vue 实例 当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。只有当实例被创建时 data 中存在的属性才是响应式的。除了数据属性，还有实例属性与方法，它们都有前缀 $，以便与用户定义的属性区分开来。 12、可以看到在vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 那么先列出所有的钩子函数，然后我们再一一详解: https://segmentfault.com/a/1190000011381906 13、在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。 14、指令 (Directives) 是带有 v- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。 15、参数 一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 属性：<a v-bind:href="url">...</a>，在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。 另一个例子是 v-on 指令，它用于监听 DOM 事件：<a v-on:click="doSomething">...</a>在这里参数是监听的事件名。我们也会更详细地讨论事件处理。 16、修饰符 修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：<form v-on:submit.prevent="onSubmit">...</form> 17、完整与缩写 （1）v-bind完整语法如下：<a v-bind:href="url">...</a> （2）v-bind缩写语法如下：<a :href="url">...</a> （3）v-on完整语法如下：<a v-on:click="doSomething">...</a> （4）v-on缩写语法如下：<a @click="doSomething">...</a> 三、列表渲染 1、一个数组对应的v-for （1）v-for 指令根据一组数组的选项列表进行渲染。 （2）v-for 指令需要使用 item in items 形式的特殊语法。 （3）v-for 块对父作用域属性的完全访问权限。 （4）v-for 还支持一个可选的第二个参数为当前项的索引。 你也可以用 of 替代 in 作为分隔符： 2、一个对象对应的 v-for。 （1）用第一个参数为对象的属性值来迭代。 （2）用第二个参数为对象的属性名来迭代。 （3）用第三个参数为对象的索引来迭代。 Vue.js 定义组件模板的七种方式：https://laravel-china.org/articles/4382/seven-ways-to-define-a-component-template-by-vuejs 四、Vue全局函数 1、Vue.component:组件是可复用的 Vue 实例 2、Vue.extend:数据对象在内部会进行浅合并 (一层属性深度)，在和组件的数据发生冲突时以组件数据优先。 3、Vue.directive:自定义指令 4、Vue.use:使用插件。它需要在你调用 new Vue() 启动应用之前完成。 五、事件和组件 1、事件。背景：(1)在html标签的属性中，大小写一律解析为小写；(2)在js中，事件名不存自动化的大小写转换；(3)html的事件名要与js的事件名完全一样。实现：在html和js的事件名中，(1)都用中划线是对的；(2)都用驼峰是不对的；(3)html用中划线、js用驼峰是不对的。 2、组件：组件和它内部的属性名，在js里，会自动进行转换，即中划线式的组件名和属性名被js自动转换为驼峰式的变量名和属性名。 六、vue组件中的data，不能是对象，必须是函数。原因： 1、对象是引用数据类型，同一组件的各个实例的data都是内存的同一个地址，一个数据改变了其他也改变了; 2、当data是一个函数时会构成作用域，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响。 七、elementUI之弹窗dialog的使用方法 ```javascript <el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</el-button> <el-dialog :visible.sync="centerDialogVisible"> <span>需要注意的是内容是默认不居中的</span> <slot name="content" /> <span slot="footer" class="dialog-footer"> <el-button @click="centerDialogVisible = false">取 消</el-button> </span> </el-dialog> <div slot="content"> </div> ``` 1、渲染一个自定义组件时，自定义组件间的内容<span slot="aaa">，渲染到自定义组件的插槽里<slot name="aaa">(具名插槽)。 2、在定义el-dialog时，里面应包含空的、占位的slot标签，所以这里的<span slot="footer">才有对应。 ```javascript <span slot="footer" /*不是多余 */ class="dialog-footer" > <slot /*本行多余*/ v-if="config.footer" /*本行多余。如果*/ name="footer" /*本行多余。容易引起误导 */ />/*本行多余*/ <div v-else /*本行多余*/ class="diolog-footer" > </div> </span> ``` 八、滚动加载 ```javascript v-infinite-scroll="loadMore";//无线滚动的回调函数是loadMore infinite-scroll-disabled="busy";//busy为false，执行无线滚动的回调函数loadMore，即不繁忙的时候执行。 infinite-scroll-distance="10";//这里10决定了页面滚动到离页尾多少像素的时候触发回调函数，10是像素值。通常我们会在页尾做一个几十像素高的“正在加载中...”，这样的话，可以把这个div的高度设为infinite-scroll-distance的值即可。 ``` 九、vue2.0之组件的es6写法 ```javascript export default { name: 'ComTpl',//组件名 props: { //用于接收父组件向子组件传递的数据 tester: { type: Object } }, data() { //本组件的数据 return { tests: [], selectedTest: {} }; }, computed: { //计算属性，所有get,set的this上下文都被绑定到Vue实例 方法名() { //..... } }, created() { //在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图 this.classMap = ['a', 'b', 'c', 'd', 'e']; //如进行异步数据请求 this.$http.get('/api/tests').then((response) => { response = response.body; if (response.errno === 0) { this.goods = response.data; } }); }, mounted() { //在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作 this.$nextTick(() => { this._initScroll(); this._initPics(); }); }, methods: { //定义方法 方法名(参数) { //... } }, filters: { //过滤器，可用来写，比如格式化日期的代码 //例 formatDate(time) { let date = new Date(time); return formatDate(date, 'yyyy-MM-dd hh:mm'); } }, watch: { //用来观察Vue实例的数据变动，后执行的方法 //... }, components: { //注册组件，首先要在最上面导入组件 //如test(要在export default上加入import test from '路径...'; } }; ``` 十、ref 获取DOM元素或组件的引用。 1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素 2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。 十一、elementUI中input的验证规则 ```javascript <el-form ref="additem" :rules="additemRules" :model="additem" label-width="100px" class="add-form" > <el-form-item label="用户名" prop="username" > <el-input v-model="additem.ffff"//此处blur事件触发时，根据additem.username的值，给出验证结果 placeholder="请输入用户名" /> </el-form-item> <el-form/> ``` 十二、VUE定义组件：组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的配置，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是。 (1)没有el配置项。 (2)data 必须是一个函数，因此每个实例的数据都保持各自独立的作用域，这个实例内数据的改变，不会影响其它实例内的数据。 ```javascript Vue.component('myComponent', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' }) ``` 十三、组件 1、Item组件定义：在vue组件中，跟template一样，render函数是创建html模板的；render函数的第一个参数是createElement(也可以忽略createElement，在引入babel的前提下，在render函数内部用JSX语法)，第二个参数是context，为无状态、无实例this的组件获取属性提供便利，如context.props.level，有实例this时用this.level；在react中用this.props.level。 ```javascript export default { name: 'MenuItem', functional: true, props: { icon: { type: String, default: '' }, title: { type: String, default: '' } }, render(h, context) { const { icon, title } = context.props const vnodes = [] if (icon) { vnodes.push(<svg-icon icon-class={icon} />) } if (title) { vnodes.push(<span slot='title'>{(title)}</span>) } return vnodes } } ``` 2、Item组件调用 <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title"/> 十四、VUE中路由配置： 1、引进VueRouter类即import VueRouter from './router'，注进Vue类即Vue.use(VueRouter)； 2、new出VueRouter实例var vueRouter=new VueRouter({routes: constantRouterMap})，注进vue实例var app = new Vue({el: '#app',vueRouter/*这是注入行为*/,store,render: h => h(App)})；附var constantRouterMap = [{ path: '/foo', component: Foo },{ path: '/bar', component: Bar }] 3、在Vue组件中，通过this.$router.push({ path: '/' })实现页面跳转；通过this.$route/*这是获取行为*/.XXX，接收跳转时传过来的参数，如name、path、query、params等属性； 十五、VUE中路由调用：http://www.sunfengxiang.com/1092.html 1、$router.push('user')// 字符串路由 2、$router.push({ path: 'user' })// 对象路由 3、$router.push({ path: `/user/${userId}` }) // 即"/user/123"，//对象路由 4、$router.push({ path: 'user', query: { plan: 'private' }})// 对象路由 5、$router.push({ name: 'route1', params: {userId: 123}})//“命名路由” props是针对“对象路由”的；params是针对“命名路由”的；params在“对象路由”中不生效，如在$router.push({ path: '/user', params: { userId }})中的“params”不生效。 十六、vue路由组件传参-页面通信：https://blog.csdn.net/mapbar_front/article/details/79362602 vue路由属性传参：$route对象，这是一个专门用于记录vue组件参数的对象。 1、常规方式 （1）在router.js中定义“路由对象”{ path:'/main/:id',component:Main } （2）在router-link中传参：<router-link to='/main/123'></router-link> （3）在Main.js中获取：console.log(this.$route.params.id);//123 2、在“对象路由”中，配置“props”属性 （1）布尔模式：如果 props 被设置为 true，route.params 将会被设置为组件的属性（这句话很重要）。{ path:'/main/:id',component:Main, props: true }。在Main.js中：console.log(this.id); （2）对象模式：路由配置的props属性是一个对象。{ path:'/login', component:Login, props: { userName: 'mapbar_front'} }。在Main.js中，我们可以这样使用：props:['userName'], created:function(){ console.log(this.userName); } （3）函数模式：props属性是函数，这个函数返回一个对象。这个对象中的key，就是将要传递给Main组件的props。 ```javascript { path:'/login', component:Login, props: ()=>{ return{ userName:'mapbar_front', age: 26 } } } ``` 在Main.js中， ```javascript function fun(route){ return { userName: "mapbar_front", age: route.params.age } } { path:'/login', component:Login, props: funs } ``` 十七、store的产生 ```javascript Vue.use(Vuex); const store = new Vuex.Store({ modules: { app, user, permission }, getters }) ``` 十八、Vuex Vue状态 来源：https://vuex.vuejs.org/zh/guide/state.html 1、Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）;Vue中计算属性的是computed。 2、更改Vuex的store中状态的唯一方法是提交变异，即store.commit(mutation)，其中mutation相当于react中的reducer，commit相当于react中的dispatch。 3、mapState(将store中的state映射到局部计算属性)和mapGetters(将store中的getter映射到局部计算属性)用于获取数据。 4、mapMutations和mapActions用于发送事件。前者将 `this.increment()` 映射为 `this.$store.commit('increment')`，后者将 `this.increment()` 映射为 `this.$store.dispatch('increment')` 5、Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块――从上至下进行同样方式的分割： ```javascript const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }) store.state.a // -> moduleA 的状态 store.state.b // -> moduleB 的状态 ``` 十八、VUE中配置状态： 1、更改 Vuex 的 store 中的状态的唯一方法是提交 mutation， ```javascript:run mutations: { increment (state) { // 变更状态 state.count++ } } store.commit('increment') ``` 2、Action 提交的是 mutation，Action 可以包含任意异步操作。在全局方法中，Action通过store.dispatch触发；在组件内部方法中，Action通过this.$store.dispatch触发。 ```javascript actions: { increment ({ commit }) { commit('increment') } } store.dispatch('increment') ``` 十九、baseurl和BASE_API 来源：https://www.cnblogs.com/zs-note/p/9118370.html 辅助：https://segmentfault.com/a/1190000010043013 ```javascript module.exports = merge(prodEnv, { NODE_ENV: '"development"', BASE_API: '"http://localhost:8080"' //配置为本地地址才会访问到本地虚拟的服务器，从而通过第1步中代理访问API服务，避免跨域 }) ``` 二十、调用VUE组件时，属性名是VUE组件定义时的变量，属性值是本页的变量。 1、<comTab v-if="hasTabs" :datas="tabs" :parent="parent" /> :相当于v-bind；@相当于v-on；datas是属性，在这里传值，在定义时规定类型。 2、Vue组件中prop属性使用说明：https://blog.csdn.net/itpinpai/article/details/80514690 3、组件为props提供了验证功能: https://blog.csdn.net/wngzhem/article/details/53394730 二十一、ES6 允许直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。http://es6.ruanyifeng.com/#docs/object ```javascript props: { datas: { type: Array, default() { [] }, 等同于 default: function() { [] }, }, } ``` 附一、分页函数的参数和返回值 1、参数 (1)this； (2)页码相关对象(包含每页条数、当前页数、总页数可有可无)； (3)从其它页跳转过来时，携带的参数，赋值给过滤条件，再次向后台请求； (4)过滤相关对象； (5)回调函数，被封装进2(3)中的函数； (6)后台返回数据的接收变量； 2、返回值 (1)上面的参数； (2)勾选相关对象； (3)分页点击函数，需要1个对象、2个回调函数，共3个参数，其函数体内调用1(5)中的函数； (4)是否有过滤项； (5)其它函数，比如勾选是否为空函数，过滤函数，清除过滤函数，每页展示条数改变函数，勾选函数； 附二、有过滤条件、勾选、分页的页面处理逻辑 1、每次渲染，都根据ID数组，决定是否勾选 2、向后台请求的情形包含点击过滤或点击分页或点击每页条数 3、每次都根据过滤条件，向后台发送请求，把返回的数据赋值给分页，决定分页展示 附三、多级导航与多次选项卡 有左展示区和右展示区，右展示区分为选项卡(代码在上)和展示区(代码在下，里面分为多个平级的块，每个块为1个组件)，点击选项卡的项(的栏)，让展示区显示不同的块，并向展示区传递不同的数据。 附四：angular1的相关用法 <span ng-bind="li.rule"></span> <dir-load show="data.myLoad"></dir-tableload> <dir-icon name="'edit'"></dir-icon> 调用angular1组件时，属性名是angular1组件定义时的变量，属性值是本页的变量。 Table Methods clearSelection 用于多选表格，清空用户的选择 this.$refs.multipleTable.clearSelection(); 文章来源: https://blog.csdn.net/bao13716164418/article/details/91799612