创建一个实例
new Vue
<h1>创建一个实例</h1>
<pre>
var vm = new Vue({
//选项
})
</pre>
数据与方法
当一个 Vue 实例被创建时,它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。
<hr>
<h1>数据与方法</h1>
<p>当一个 Vue 实例被创建时,它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。</p>
<p id="app-1">
data.a:{{ a }} "/{/{ b }/}/" b:undefined
</p>
<script>
// 我们的数据对象
var data = { a: 1 };
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
el:"#app-1",
data: data
});
// 获得这个实例上的 property
// 返回源数据中对应的字段
console.log(vm.a === data.a); // => true
// 设置 property 也会影响到原始数据
vm.a = 2;
console.log(data.a); // => 2
// ……反之亦然
data.a = 3;
console.log(vm.a); // => 3
vm.b = 'hi';
console.log(vm.b === data.b); // => true
// 设置 property 也会影响到原始数据
vm.b = 'ni';
console.log(data.b); // => undefined
// ……反之亦然
data.b = 'mi';
console.log(vm.b); // => ni
</script>
<p>只有当实例创建时就已经存在与data中的property才是响应式的,如果后面新添加的,则不是响应式的.</p>
阻止追踪
Object.freeze()阻止修改现有的 property,也意味着响应系统无法再追踪变化。
<h1>Object.freeze()阻止修改现有的 property,也意味着响应系统无法再追踪变化。</h1>
<div id="app">
<p>{{ foo }}</p>
<!-- 这里的 `foo` 不会更新! -->
<button v-on:click="fn">Change it</button>
</div>
<script>
var obj = {
foo: "bar"
}
Object.freeze(obj);
new Vue({
el: "#app",
data: obj,
methods: {
fn: function () {
obj.foo = "foo";
}
}
});
</script>
实例property和方法
除了数据 property,Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $,以便与用户定义的 property 区分开来。例如:
<h1>除了数据 property,Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $,以便与用户定义的 property 区分开来。例如:</h1>
<div id="example"></div>
<script>
var data = { a: 1 };
var vm = new Vue({
el: '#example',
data: data
});
console.log(vm.$data === data);// => true
console.log(vm.$el === document.getElementById('example')); // => true
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
// 这个回调将在 `vm.a` 改变后调用
console.log("example",newValue,oldValue);
});
//注意 如果实在监听前改变了值 是监听不到的
vm.a = 2;
console.log(vm.a);
</script>
create钩子
created 钩子可以用来在一个实例被创建之后执行代码:
也有一些其它的钩子,在实例生命周期的不同阶段被调用,如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。 钩子和实例方法中不能使用箭头函数
<!--实例声明周期钩子-->
<script>
new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a);
}
});
// => "a is: 1"
</script>