Vue学习第一天，响应式

最新推荐文章于 2024-05-23 16:08:37 发布

annuo0615

最新推荐文章于 2024-05-23 16:08:37 发布

阅读量91

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/boses/p/9619547.html

版权

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列表渲染。

转载于:https://www.cnblogs.com/boses/p/9619547.html

关注