Vue学习第一天,响应式
Vue是一个轻量级的脚本,中文文档十分完善,他关心的是视图层,同时他也是响应式的框架,数据发生变化,内容也会随之改变。
HTML:
<div id="box"> <input type="text" v-model="text"> <p>{{text}}</p> </div>
JavaScript:
var vm = new Vue({ el: '#box', data: { text: '', }, });
这里当输入框内容发生变化,vm.text也会随之改变,不过使用了V-model会导致不能设置默认值,而要在vue内部指定默认值。
HTML:
<input type="text" id="input" v-model="text" value="teeeee">
上面定义了默认的value值,不过并不会生效,相当于Vue劫持了这个value。
Vue框架响应式的数据,必须放在data内部,如果定义在外部当数据发生改变,并不会影响。
JavaScript:
var a = {foo: 123}; var vm = new Vue({ el: '#box', data: a, }) a.oooo = 123; a.foo = vm.foo; //true
如果使用了Object.freeze(),(禁止删除,禁止扩展,禁止更改),实际上就是讲这个变量变成常亮,那么Vue的响应式也会失败。
JavaScript:
var a = { foo: 123 }; var vm = new Vue({ el: '#box', data: a, }) Object.freeze(a);
对于引用类型,定义在data内部,直接修改并不会造成更新,比如内部如果是一个数组。
JavaScript: var a = [123]; a[1] = 'name;'
这里可以使用Vue的自带的方法set来进行更新。
JavaScript: var a = [123]; Vue.set(a, 1, 'name');
一些变异方法也可以让Vue响应式的更新,具体查看官方api列表渲染。