vue技术难点教程：技术专栏-vue基础
vue技术难点教程：技术专栏-vue基础:class="{class名: boolean值}" 数组 :class="[data中的值 {class名: boolean值} data中的值]" style:class：计算属性（computed）：监听器（watch）:动态绑定class和style
内容导读这里就不多赘述了，可以上官网查看，下面有些例子会用到，有些不会用到。
基础
指令
- v-text
- v-html
- v-for
- v-if
- v-else
- v-show
- v-cloak
- v-on
- v-bind
这里就不多赘述了，可以上官网查看，下面有些例子会用到，有些不会用到。
计算属性（computed）：
- 会有缓存，不修改依赖的变量时不会进行重新计算，只有修改了依赖的变量才会重新计算，效率更高
- 每一个计算属性有get和set两个方法
监听器（watch）:
- 类似计算属性，也会有缓存，但是语法和computed相比会复杂很多
动态绑定class和style
class：
- 对象
:class="{class名: boolean值}"
- 数组
:class="[data中的值 {class名: boolean值} data中的值]"
style:
也有对象和数组的区分，都是根据data中数据进行渲染style
条件渲染
- 如果重复修改的话使用v-show效率更高
- v-if和v-else必须在一起
- 如果有重复的input需要不同的渲染，可以添加key去进行区分
列表渲染
- 给v-for循环添加key，增加效率
- 改变数组内容指定的方法才有效，直接操作下标数据会变，但是不会重新渲染页面
- push
- pop
- shift
- unshift
- splice
- sort
- reverse
- 修改数据内容还可以直接修改数组的引用也可以直接改变数据的值
组件
非父子组件之间的传值
- vuex
- 观察者模式/发布订阅模式/bus/总线
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>非父子组件之间的传值</title> <meta name="viewport" content="user-scalable=no width=device-width initial-scale=1.0 maximum-scale=1.0"> </head> <body> <div id="container"> <child content="shi"></child> <child content="yanping"></child> </div> </body> <script src="https://img.aigexing.comjs/libs/vue.min.js"></script> <script> Vue.prototype.bus = new Vue(); Vue.component('child' { data: function () { return { selfContent: this.content } } props: { content: String } template: '<div @click="handleClick">{{selfContent}}</div>' methods: { handleClick: function () { // alert(this.content); this.bus.$emit('change' this.selfContent); } } mounted: function () { var _this = this; this.bus.$on('change' function (msg) { // alert(msg); _this.selfContent = msg; }) } }); var vm = new Vue({ el: "#container" }) </script> </html>
插槽
- slot
- slot-scope
<div id="container"> <child> <template slot-scope="props"> <li>{{props.row}}</li> </template> </child> </div> Vue.component('child' { data: function () { return { list: [{ id: 1 name: 'shi' } { id: 2 name: 'yan' } { id: 3 name: 'ping' }] } } template: `<div> <ul> <slot v-for="item in list" :row="item"> </slot> </ul> </div>` }) var vm = new Vue({ el: "#container" })
动态组件与 v-once 指令
动态组件
<component :is="切换变量"></component>
v-once
只渲染一次，后续的从内存中取，可以有效的优化渲染性能
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>动态组件与 v-once 指令</title> <meta name="viewport" content="user-scalable=no width=device-width initial-scale=1.0 maximum-scale=1.0"> </head> <body> <div id="container"> <component :is="tabName"></component> <button @click="switchNav">switch</button> </div> </body> <script src="https://img.aigexing.comhttps://cdn.bootcss.com/vue/2.5.0/vue.js"></script> <script> Vue.component('child-one' { template: `<div v-once>child-one</div>` }); Vue.component('child-two' { template: `<div v-once>child-two</div>` }) var vm = new Vue({ el: "#container" data: function() { return { tabName: 'child-one' } } methods: { switchNav: function() { this.tabName = this.tabName == 'child-one' ? 'child-two' : 'child-one' } } }) </script> </html>
这些只是在自己学习中部分的案例和基础，官网的例子很好，有不懂的可以上官网上查看 vue官网
