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
