01 - Vue入门：Vue实例

01 - Vue入门

Vue实例

• 数据的双向绑定

        <div id="app">
            <p>{{ msg }}</p>
        </div>

		// app 就是一个ViewModel，无论是页面中的数据改变，还是模型中数据的改变都会触发ViewModel的更新。
		var app = new Vue({
			el: "#app",
			data: {
				msg: "This is a text."
			}
		});

app.msg 的改变同时会触发视图中{{ msg }}的更新，并且{{ msg }}中的值的改变同时也会更新app.msg的值。

• 取消追踪变化

		var data = {
			msg: "This is a text.",
			name: "Jack"
		};
		Object.freeze(data); // 在与Vue实例绑定之前调用，data的变化就不会响应式反应在视图中
		var app = new Vue({
			el: "#app",
			data: data
		});
		setTimeout(function () {
			data.msg = "Change" // 之前调用了freeze()，所以data的变化不会触发响应系统的更新
		}, 1000);

• Vue 的实例属性和方法列表

		// 使用 $ 获取Vue实例的方法和属性
		console.log(app.$data === data); // true
		console.log(app.$el === document.getElementById("app")); // true
		// 当app.msg改变时，会调用该方法
		app.$watch('msg', function(newVal, oldVal) {
			console.log('oldVal: ' + oldVal + ', ' + 'newVal: ' + newVal);
		});

		setTimeout(function () {
			data.msg = "Changed Text";
		}, 1000);