Vue.js 2.0版

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 - 输入首尾空格过滤

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 未被定义。

巴特西

Vue.js 2.0版

v-model

v-for

`v-for`迭代语法变化

每个 Vue 实例都会代理其 `data` 对象里所有的属性：

最新文章

热门文章

巴特西

Vue.js 2.0版

v-model

v-for

v-for迭代语法变化

每个 Vue 实例都会代理其 data 对象里所有的属性：

最新文章

热门文章

`v-for`迭代语法变化

每个 Vue 实例都会代理其 `data` 对象里所有的属性：