vue（笔记3）

最新推荐文章于 2024-11-03 21:56:29 发布

机场德克士双人套餐事件

最新推荐文章于 2024-11-03 21:56:29 发布

阅读量163

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_73495603/article/details/126821540

版权

Vue.js 生命周期钩子函数数据绑定实例

关键词由CSDN通过智能技术生成

vue生命周期函数

生命周期：

Vue是一个构造函数，当执行执行这个函数时，相当于初始化vue实例；
在创建实例过程中，需要设置数据监听，编译模板，将实例挂载到DOM上，数据更新能够让DOM也更新，
在这个初始化，又会不同阶段默认调用一些函数执行，这些函数就是生命周期的钩子函数；

生命周期钩子函数

生命周期钩子函数，让够让咱们在初始化实例时，添加自己的代码；
生命周期的钩子函数中的this，会默认指向vue的实例;

</head>

<body>

<div id="example">{{message}}</div>

<script src="./vue.js"></script>

<script>

var vm = new Vue({

el :'#example',

data:{

message:'match'

},

beforeCreate(){

console.log('beforeCreate');

},

created(){

console.log('cresated');

},

beforeMount(){

console.log('beforeMount');

},

mounted(){

console.log('mounted');

},

beforeUpdate(){

console.log('beforeUpdate');

},

updated(){

console.log('updated');

//组件更新后调用$destroyed函数，进行销毁

//this.$destory();

},

beforeDestroy(){

console.log('beforeDestroy');

},

destroyed(){

console.log('destroyed');

},

})

</script>

</body>

</html>

实例

v-model实例

<body>

<div id="app">

<input type="text" v-model="mes">

<p>{{msg}}</p>

<select v-model="fruit">

<option value="apple">苹果</option>

<option value="orange">橘子</option>

<option value="banana">香蕉</option>

</select>

<input type="checkbox" v-model="chk">

</div>

<script src="./vue.js"></script>

<script>

new Vue ({

el : '#app',

data :{

msg:'',

fruit:'',

chk:ture

}

})

</script>

</body>