vue实例、指令、生命周期
vue实例、指令、生命周期
本章重点
1、生命周期
2、插值
3、指令
一、创建一个实例vue实例
每一个vue应用都是通过vue函数创建一个新的vue实例开始的
语法： ver vm = new Vue({undefined
//选项
})
当我们创建一个vue实例，我们就可以传入一个选项对象。
二、数据与方法
当一个vue是实例被创建的时候，它的data对象中所有的属性加入vue的响应式系统中，当这些属性值发生改变的时候，系统就会产生相应（匹配、更新我们的值）
<script>
var data = {a:'张国荣'}
var vm= new Vue({
data:data
})
</script>
- 1
- 2
- 3
- 4
- 5
- 6
当这些数据发生改变的时候，视图会进行重新渲染。注意：只有当实例被创建的时候，data中存在的属性才是响应式的。
三、vue的生命周期
什么是生命周期
从vue实例创建、运行、销毁期间，各种发生各种各样的事件，这些统称生命周期。
生命周期钩子：
就是生命周期事件的别名。
生命周期钩子 == 生命周期函数 == 生命周期事件
创建事件的生命周期函数：
beforeCreate ：实例刚被创建出来，data或者methods属性没有初始化
created：实例在内存中创建成功，打他或者methods也已经OK
beforeMount：完成模板编译
beforeUpdate：状态更新之前执行的函数
beforeDestroy：实例销毁之前执行的函数
<script>
new Vue({
data:{
a:1
},
created:function(){
console.log('a的值：'+this.a)
}
})
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cEkjqhy2-1604128412462)(C:\Users\ADMINI~1\AppData\Local\Temp\1564039512446.png)]
四、模板语法
vue.js 使用了基于html的模板语法，允许开发者声明式的将DOM绑定到底层vue实例的数据。
插值
文本：
文本插值语法 ｛｛msg｝｝将实例对象上的值进行代替，绑定对象上的msg属性发生改变，插值处内容也会更新。
原始html：
双大括号会将数据解析为普通文本，并非html代码，输出html代码用到一个指令 ： v-html
<body>
<div id="aaa">{{msg}}
<span v-html="msg"></span>
</div>
<script>
new Vue({
el:"#aaa",
data:{
msg:"<span style='color:red'>111</span>"
}
})
</script>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
vue指令
带有-v前缀的特殊特性。指令特性的值预期是单个JavaScript表达式（v-for例外）指令的职责，当表达式的值改变的时候，会产生连带的影响，响应式的作用于DOM。
v-if：根据表达式的真假，删除或者插入元素的。
<body>
<div id="app">
<h2 v-if="yes">yes</h2>
<h2 v-if="no">no</h2>
<h2 v-if="age >= 18">age:{{age}}</h2>
</div>
<script>
new Vue({
el:"#app",
data:{
yes:true,
no:false,
age:12
}
})
</script>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
v-show也是条件渲染指令，使用v-show指令的元素始终会被渲染到html页面，它只是简单的为元素设置css的style属性。
<div id="app">
<h2 v-show="yes">yes</h2>
<h2 v-show="no">no</h2>
<h2 v-show="age >= 18">age:{{age}}</h2>
</div>
<script>
new Vue({
el:"#app",
data:{
yes:true,
no:false,
age:20
}
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
作业：
1、了解vue的生命周期
2、使用vue的插值
ue({undefined
el:"#app",
data:{undefined
yes:true,
no:false,
age:20
}
})
## 作业：
1、了解vue的生命周期
2、使用vue的插值
3、v-no 、v-if、v-bind
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
文章来源: aaaedu.blog.csdn.net，作者：tea_year，版权归原作者所有，如需转载，请联系作者。
原文链接：aaaedu.blog.csdn.net/article/details/109402957
- 点赞
- 收藏
- 关注作者
评论（0）