Vue.js 2.0版

时间:2022-06-13 22:47:43

Vue.js 2.0版升级,更改了好多方法或指令

new Vue({
el:'#demo',
data:{
msg:"vue2.0"
}
})
v-model

lazy  number debounce (2.0版废弃)  新加 lazy

  • .lazy - 取代 input 监听 change 事件
  • .number - 输入字符串转为数字
  • .trim - 输入首尾空格过滤

<input v-model.lazy="msg" />

v-for

v-for迭代语法变化

  • 丢弃$index$key

  • 新数组语法

    • value in arr

    • (value, index) in arr

  • 新对象语法

    • value in obj

    • (value, key) in obj

    • (value, key, index) in obj

value 值 key 键 index 索引下标
<li v-for="item in items">{{item.id}}</li>
<li v-for="(value,key) in items">{{value.id}}--{{key}}</li>
<li v-for="(value,key,index) in items">{{value.id}}--{{key}}--{{index}}</li>

每个 Vue 实例都会代理其 data 对象里所有的属性:
var tie = { a: 1 }
var vm = new Vue({
data: tie
}) vm.a === tie.a // -> true // 设置属性也会影响到原始数据
vm.a = 2
tie.a // -> 2 // ... 反之亦然
tie.a = 3
vm.a // -> 3
除了 data 属性, Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $,以便与代理的 data 属性区分。例如:

var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一个实例方法
vm.$watch('a', function (newVal, oldVal) {
// 这个回调将在 `vm.a` 改变后调用
})
注意,不要在实例属性或者回调函数中(如 vm.$watch('a', newVal => this.myMethod()))使用箭头函数。因为箭头函数绑定父上下文,所以 this 不会像预想的一样是 Vue 实例,而是 this.myMethod 未被定义。