<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Vue 实例</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" class="goo">
<p>{{ foo }}</p>
<!-- 这里的 `foo` 不会更新！ -->
<button v-on:click="foo = 'baz'">Change it</button>
</div>
</body>
</html>
<script>
// 我们的数据对象
var data = {
a: 1,
b: 2,
foo : 'Bingo',
}
//Object.freeze(data) // [Vue warn]: Error in v-on handler: "TypeError: Cannot assign to read only property 'foo' of object '#<Object>'"
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
el: '#app',
//el: '#app1,#app',//不允许一次配置多个
fun : () => {
console.log(' i am function fun ')
return '';
},
//监听变量变化
watch: {
'a' : (newValue, oldValue) => {
console.log('new: '+newValue+" -- old: "+oldValue);
/*
vm.a = 3
vue-1.html:39 new: 3 -- old: 1
*/
}
},
/* */
data: data
/* data内的所有变量都会被vm对象自动组装成自身属性，并且会配好get set方法 */
,
created: function () {//在vm对象创建后的第一时间，应该相当于vm的构造方法吧。
console.log('created:::: a is: ' + this.a)
},
updated: function () { //静默的改变data里面的值不会触发此时间，需要模板被重新渲染才会执行 比如点击change it
console.log('updated:::: a is: ' + this.a)
},
mounted: function () { //当vm中配置的el被创建成$el对象后调用
console.log('mounted:::: a is: ' + this.a)
},
destroyed: function () {// 暂时没有模拟出来
console.log('destroyed:::: a is: ')
}
})
/*console.log( vm.$options.fun()); // i am function fun
console.log( typeof vm.$options.fun); //function
console.log(vm.$data );
console.log(vm.$el); */
//监听变量变化
vm.$watch('foo', function (newValue, oldValue) {
// 这个回调将在 `vm.foo` 改变后调用 new: baz -- old: Bingo
console.log('new: '+newValue+" -- old: "+oldValue);
})
/* $开头的对象为vm本身的对象 */
</script>