Vue-day04小结

vue.js

1.下载文件并引入，引入之后，在我们的浏览器的内存中，多了一个vue构造函数
2.实例化vue应用程序，new Vue（{}）
3.通过配置el去关联视图层 ---- 即用户能看到的界面
4.通过配置data去设置相关的参数，即储存数据
5.通过双{{}}表达式在视图层里面渲染数据

创建视图层

浏览器从上到下执行，会出现闪烁的现象

{{msg}}

---通过给V-cloak设置样式解决

----使用v-text解决

实例化Vue ------------- v-if和v-show 相同点：都可以动态控制元素的显示和隐藏 不同点：v-if将整个DOM元素添加或删除，v-show是显示和隐藏 性能消耗：v-if有更高的切换的消耗，v-show有更高的渲染消耗 使用场景：v-if适合运营条件不大可能改变的场景，v-show适合频繁切换 ------------ v-model：用于input标签再inout元素上进行双向绑定数据

用户输入的数据{{msg}}

v-bind:绑定一个属性
v-bind:src=‘img’ 简写：:src=‘img’

v-on和methods
v-on:click=‘fn’ 简写：@click=‘fn’

methods和data同级，里面写的是方法

v-for：根据一组数据的选项列表进行渲染
语法：v-for=‘item in arr’
item：数组里的没一个元素
?为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素

.stop:阻止冒泡
.prevent:阻止默认事件
.capture:实现捕获机制
.self:阻止自身的冒泡行为，不会阻止别人的
.once：只触发一次

filter()：过滤器
语法：在html中，过滤器的调用的时候的格式{{item.nam | 过滤去的名称}}
在js中定义过滤器 Vue.fillter(‘过滤器的名称’,function(){})
函数里面的参数：第一个参数，是需要过滤的数据，已经规定好了

生命周期函数：：
beforeCreate:
第一个生命周期，表示示例被完全创建之前，会执行
data和method中的方法没被初始化
created：
第二个生命周期
data和method中的方法已经初始化
beforeMount：
第三个生命周期，表示模板已经在内存中编辑完了，尚未渲染到页面当中
在内存中编辑完了，未渲染到页面中
mounted：
第四个生命周期，表示模板已经渲染到页面当中了
beforeUpdate：
第五个生命周期
显示在页面当中的数据还未更新，而data当中的已经更新
uptaded：
第六个生命周期
显示在页面上的数据和data当中的数据都更新了
beforeDestroy：
此时所有的数据和方法还有，指令 过滤器都可用，因为还没有真正的去执行销毁的过程
destroyed：
此时，所有的数据和方法还有，指令 过滤器都不可用