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