0
点赞
收藏
分享

微信扫一扫

vue实例、指令、生命周期

英乐 2022-02-24 阅读 82


vue实例、指令、生命周期

本章重点

1、生命周期

2、插值

3、指令

一、创建一个实例vue实例

每一个vue应用都是通过vue函数创建一个新的vue实例开始的

语法: ver vm = new Vue({

//选项

})

当我们创建一个vue实例,我们就可以传入一个选项对象。

二、数据与方法

当一个vue是实例被创建的时候,它的data对象中所有的属性加入vue的​响应式系统​中,当这些属性值发生改变的时候,系统就会产生相应(匹配、更新我们的值)

<script>
var data = {a:'张国荣'}
var vm= new Vue({
data:data
})
</script>

当这些数据发生改变的时候,视图会进行重新渲染。注意:只有当实例被创建的时候,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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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>

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>

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、了解vue的生命周期

2、使用vue的插值

ue({

el:"#app",

data:{

yes:true,

no:false,

age:20

}

})

## 作业:

1、了解vue的生命周期

2、使用vue的插值

3、v-no 、v-if、v-bind



举报

相关推荐

0 条评论