2.Vue实例
https://www.bilibili.com/video/av20720090/?p=2
https://cn.vuejs.org/v2/guide/instance.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>2.Vue实例</title>
<script src="../static/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
<button v-on:click="msg='xxcc123'">change</button>
</div>
<script>
var data={msg:'你好!'};
// Object.freeze(data); //阻止修改现有的属性，也意味着响应系统无法再追踪变化。
//用el設定mount(掛載)
var vm=new Vue({
el:"#app",
data:data,
//实例生命周期钩子函数(给了用户在不同阶段添加自己的代码的机会)
beforeCreate:function(){
console.log('beforeCreate');
},
created:function(){
console.log('created');
},
//要設定el才會執行mount(掛載)
beforeMount:function(){
console.log('beforeMount');
},
mounted:function(){
console.log('mounted');
},
//改變資料時會觸發update函數(視圖會進行重渲染)(例如: vm.msg='1234')
beforeUpdate:function(){
console.log('beforeUpdate');
},
updated:function(){
console.log('updated');
},
//執行 vm.$destroy() 會觸發 beforeDestroy、destroyed
beforeDestroy:function(){
console.log('beforeDestroy');
},
destroyed:function(){
console.log('destroyed');
},
});
//用$mount()設定mount(掛載)
/*
var vm=new Vue({
// el:"#app",
data:data,
//实例生命周期钩子函数(给了用户在不同阶段添加自己的代码的机会)
beforeCreate:function(){
console.log('beforeCreate');
},
created:function(){
console.log('created');
},
//要設定el才會執行mount(掛載)
beforeMount:function(){
console.log('beforeMount');
},
mounted:function(){
console.log('mounted');
},
//改變資料時會觸發update函數(例如: vm.msg='1234')
beforeUpdate:function(){
console.log('beforeUpdate');
},
updated:function(){
console.log('updated');
},
//執行 vm.$destroy() 會觸發 beforeDestroy、destroyed
beforeDestroy:function(){
console.log('beforeDestroy');
},
destroyed:function(){
console.log('destroyed');
},
}).$mount('#app');
*/
// vm.$watch('msg',function(newVal,oldVal){
// console.log('newVal',newVal);
// console.log('oldVal',oldVal);
// });
</script>
</body>
</html>
沒有留言:
張貼留言