直接上代码
01简单的生命周期
这是一闭合的生命周期组件实例，从开始到销毁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="小兰同学">{
{message}}</div>
<script src="./vue.js"></script>
<!-- 引入vue.js -->
<script>
var vm = new Vue({
el:'#小兰同学',
// 是EL 不是e+1
// data？
data:{
message:'66666'
},
// 组件实例创建之前
beforeCreat(){
console.log('beforeCreat');
},
// 组件实例创建成功，可以访问到data，methods，watch的方法数据
// methods，watch？
created(){
console.log('created');
},
// 组件挂载之前 得不到具体的dom节点
beforeMount(){
console.log('beforeMount')
},
// 组件挂载到实例之后 完全挂载dom和渲染,并且可以对挂载的dom进行操作
mounted() {
console.log('mounted');
},
// 组件数据发生变化,但没有更新 数据新的 页面旧的
beforeUpdate(){
console.log('beforeUpdate');
},
// 组件数据与页面一致
uptated() {
console.log('updated');
},
// 组件实例销毁前
beforeDeatroy() {
console.log('beforeDeatroy');
},
// 组件实例销毁后 完成闭合的某个周期
destroyed() {
console.log('destroyed');
},
})
</script>
</body>
</html>
02v-model指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- div区域 -->
<div id="app">
<!-- msg为message的缩写 -->
<!-- 点击button输入框便会出现‘你好’ -->
<button @click="msg = '你好'">修改message的值</button>
<input type="text" v-model="msg">
<p>{
{ message }}</p>
<select v-model="fruit">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="pig">猪</option>
</select>
<input type="checkbox" v-medel="chk">
</div>
<script src="./vue.js"></script>
<script>
new Vue({
// el作用:挂载事件
el: "#app",
data: {
msg: '',
fruit: '',
chk: true,
}
})
</script>
</body>
</html>