Vue
Vue实例生命周期钩子
概念:
实例生命周期钩子就是Vue实例在 " 某一个时间点 " 会自动执行的函数
特点:
- 自动执行,不需要手动调用
- 不需要写在methods配置项里
生命周期函数数量:11
生命周期图示及相关注解
Vue模板语法
概念:
V层中使用的Vue指令语法
所有的以 ' v-' 开头的指令语法,实际上底层都对应着JS表达式,因此能够实现M > V
语法:
实例:通过三种方式实现Vue实例与div元素绑定
<body>
<div id="app">
<div>{
{name + 'chazhi'}}</div> //1-插值表达式
<div v-text="name + 'text'"></div> //2-div元素与name绑定
<div v-html="name + 'html'"></div> //3-div元素通过innerHtml与name绑定
</div>
<script>
var vm =new Vue({
el:'#app',
data:{
name:"<h1>Test</h1>",
}
})
</script>
</body>
上例效果
由例子:
- 插值表达式与 v-test 的渲染效果相同
- 且由于每一个Vue指令语法都是JS表达式,因此可以通过 字符串拼接 添加内容
实例:由计算属性、方法、监听器三种方式实现div元素渲染及修改
计算属性:
特点:
- 具备缓存(对数据进行存储)
- 不产生冗余
<body>
<div id="app">
<div>{
{fullName}}</div> //插值表达式引用
</div>
<script>
var vm =new Vue({
el:'#app',
data:{
firstName:'Dell',
lastName:'Lee',
},
computed:{ //配置项computed > 计算属性:计算后返回并渲染 具有缓存的特点
fullName:function(){
console.log('re-conputed') //若计算属性依赖的的计算对象无变化的情况下进行第2,3,多次渲染,则不会执行console.log('re-conputed')
return this.firstName + ' ' + this.lastName
}
}
})
</script>
</body>
方法:
相比computed:
- 不具备缓存
<body>
<div id="app">
<div>{
{fullName()}}</div> //插值表达式调用
</div>
<script>
var vm =new Vue({
el:'#app',
data:{
firstName:'Dell',
lastName:'Lee',
},
methods:{ //配置项methods > 方法
fullName:function(){
console.log('re-conputed')
return this.firstName + ' ' + this.lastName; //通过方法属性也能完成上述功能,但它没有缓存特点,性能不如computed
}
}
})
</script>
</body>
监听器:
相比computed:
- 产生冗余
- 代码量大
<body>
<div id="app">
<div>{
{fullName}}</div> //插值表达式引用
</div>
<script>
var vm =new Vue({
el:'#app',
data:{
firstName:'Dell',
lastName:'Lee',
fullName:'Dell Lee', //冗余
},
watch:{ //配置项watch > 监听器, 具备缓存特点,但是代码量比comp