(1)vue 自定义组件与父组件的通信,props:[abb],可以看成自组建的一个自定义属性
(2)vue 模版语法{{}} 只能是在DOM中插入,<div>{{acc}}</div>, 绑定属性的话应v-bind:id="abb" 不需要{{}};
而小程序可以<image src="{{url}}" /><div wx:for="{{arr}}" wx:for-item="item" wx:for-index="index wx:key="index"></div>
(3)计算属性 computed:{} VS 方法 methods:{}
计算属性是基于他们的依赖(响应式依赖)进行缓存的,只有以来发生改变才会重新求值,如果以来不变,多次访问会立即返回之前的计算结果,而不执行函数;而方法:每次重新访问/渲染时,方法总会在此执行;
(4)vue的 watch:{}, 侦听 data 中的状态发生变化时,执行的操作;
使用场景: 当需要在数据变化时,执行异步或者开销较大的操作时,使用watch
eg:
data:{abb: ''}
watch: {
abb: function (newvalue, oldvalue) {
}
}
(5)class 与 style的绑定
1、 vue 为 v-bind:class="" 做了增强
对象语法:
data: {
classObject: {
booleanb: true,
booleanc: false
}
}
v-bind:class="{classa: booleanb, 'classb': booleanc}" -> class="classa"
v-bind:class="classObject" -> class="classa"
数组语法:
data: {
isActive: false,
activeClass: 'active',
errorClass: 'text-danger'
}
v-bind:class="[activeClass, errorClass]" -> <div class="active text-danger"></div>
v-bind:class="[isActive ? activeClass : ''], errorClass" -> class="text-danger"
v-bind:class="[{classa: booleada}, classb]"
2、v-bind:style=""
data: {
activeColor: 'red',
fontSize: 30
}
v-bind:style="{color: activeColor, fontSize: fontSize + 'px'}"
v-bind:style="[baseStyles, overridingStyles]" // 将多个样式对象绑定到同一个元素上
(6)v-if="abb" // v-if 时惰性的,如果开始为false,则不会渲染;每次切换内部都销毁重建;v-for优先级比v-if高
v-if="abb === 'uiui"
<template v-if="abb"></template>
v-show="" // 始终都会渲染到DOM! 只是切换 display 属性;不支持《template》 不支持v-else
(7)v-for=""
小程序 wx:for="{{arr}}" wx:for-item="item" wx:for-index="index" wx:key="index"
微信 v-for="(item, index) in items" :key="item" item in items 的特殊语法; items - 源数据数组。 item - 数组元素迭代的别名
微信 <li v-for=“(value, key, index) in object” ></li> v-for 通过对象的属性来迭代
(8) 数组更新检测
「变异方法:会改拜年原始数组」
var abb = [1,2,3,4,5]
unshift()前边添加 push() 后边添加
--------------------------------------------
shift()前边删减 pop() 后边删减
sort() 排序
reverse() 颠倒
splice(index, howmany, item1, item, ..... itemX)
从数组中删除、添加项目, 且改变原来的数组;返回被删除的项;
index 开刀位置;
howmany 往后切几个;
item。。 往里添加几个
「非变异方法: 不会改变原始数组,但是总会返回一个新的数组;」
filter()
concat()
slice()
「注意:」
由于JS的限制,vue 不能检测到以下数组的变动:
1、当使用索引,直接设置一个项时; vm.items[indexOFitem] = newValue
2、修改数组的长度时, vm.items.lenght= newLength
举个例子:
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的
为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果,同时也将触发状态更新:
Vue.set(vm.items, indexOfitem, newValue)
vm.items.splice(indexOfItem, 1, newValue)
你也可以使用 vm.$set 实例方法,该方法是全局方法 Vue.set 的一个别名:
wm.$set(vm.items, indexOfitem, newValue)
为了解决第二个问题:
vm.items.splice(newLength)
(9)对象更改检测 注意事项
* 由于JS 的限制,vue不能检测到对象属性 的添加或者删除;
举例:data: {a:1} vm.b = 2 // 不是响应式的
解决:
Vue.set(object, key, value)
vm.$set(object, key, value)
* 如果想为已有对象赋予多个新属性,比如使用Object.assign() 或者 _.exetnd() 在这种情况下,你应该用两个对象的属性,创建一个新对象,所以想添加新的响应式属性,不要像这样
举例:
data: {
userProfile: {
name: 'Anika'
}
}
Object.assign(vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
而要这样:
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})