<body>
<h1>实例01 </h1>
<div id="app">
{{message}}
<div class="text">{{message}}</div>
<p>{{foo}}</p>
<p>
<button @click="add">+</button>
</p>
</div>
<script>
var obj = {
foo: 'bar'
}
Object.freeze(obj);
var app = new Vue({
el: "#app",
data: {
foo: obj.foo, //这里的 `foo` 不会更新
message: "Hello Vue!",
//设置如下属性的初始值
newTodoText: '',
visitCount: 0,
hideCompletedTodos: false,
todos: [],
error: null
},
methods: {
add: function () {
this.message = "type";
}
},
mounted: function () {
console.log("mounted 被创建");
$("#app .text").text("Hi! I'm jquery!");
}
});
console.log(app.$el === document.getElementById('app')) // => true
// $watch 是一个实例方法
app.$watch('message', function (newValue, oldValue) {
// 这个回调将在 `vm.a` 改变后调用
})
</script>
</body>