vue 的闪烁问题
v-cloak 指令 便可解决 须在 <style> [v-cloak]{ display:none } </style>
计算机内存可以理解为浏览器内存,且里面是有一个虚拟的dom,是存在文档碎片里面的
1. vue 是一个 mvvm 框架,angular 是一个 mvc 框架,vm 是 vue 的一个实例,这个实例存在计算机内存中的,第一就是绑定数据,第二就是 dom 检测
vue.js 是封装的一个类,参数是 options 对象,最常用的属性 el:"" 指定 vue 所操作的 dom 范围,属性值是节点
data 就是 vue 的 model ,存放数据,属性值是一个对象,和函数(组件中)
methods:vue 的事件方法,存在这里
2. vue 的渲染指令:v-html v-text,采用 {{}} 插值运算,里面还可以写 js 代码
3. 条件指令 v-if = "" ,后面的值,如果是 true 节点就添加,如果是 false 节点就删除
4. 指令 v-show = "" ,后面的值是 true ,display:block 后面的值是 false:display:none
5. 循环语句:v-for 数组和对象 (item,index) in arr // item 是元素 index 是索引
6. 节点动态属性:
v-bind:class="a" 简写 :class="a"
7. 节点上绑定的事件,v-on:事件名="fn()" 简写 @事件名="fn()"
案例:点击事件
@click = "fn()"
8. 组件化
vue.component() 定义组件 component这个方法是 Vue 这个类的
全局:
<div id = "app">
<name></name>
</div>
vue.component('name',{ // 定义了组件 名字 name
template:"<h1> hello world </h1>"
})
挂载组件
var vm = new Vue({
el:"#app"
components:{
name
}
})
注意:1. 组件在定义的时候,有且只有一个顶层标签,而且必须有
2. 挂载完之后,如果是单标签使用组件,组件首字母必须大写,如果是双标签,大写,小写都行
3. id = app 中的所有节点,都是 Vue 下面对应的实例,她两是响应的
new Vue 实例要往 app 写一个东西,给实例,创键一个组件,要通过 实例去挂载,通过实例 往 id = app 添加东西,功能及数据
id = app 实例,编译后的结果
new Vue 实例,是编译的过程
数据渲染的方式:对象方式
上面 dom 和 下面的 Vue 实例 其实是一体的
10. 实例中的生命周期
<div id='app'></div> 从没有东西,到最后能够显示一张完整的页面,这个由 Vue 实例实现的,载计算机内存中实现的,从创建到最后删除的整个过程,就是这个实例的生命周期
生命周期
created 被创建完成之后
mounted 初始化完成之后
updated 更新完成之后
destroyed 删除之后
var vm = new Vue({
created(){},
mounted(){},
updated(){},
destroyed(){}
})
11. 事件修饰符,事件会有事件冒泡和事件的默认行为
vue 是阻止冒泡,在事件名后面上对应单词
stop 阻止冒泡
prevent 阻止默认行为
12. 计算属性
有时候,我们需要在模板中写一些表达式,但是这对模板来说,大多表达式,会让模板很重,性能很差,不易维护
vue 可以通过计算属性来实现
原理:在每次使用对象. 属性的时候,其实就是调用 get() 方法
使用方法:
var vm = new Vue({
el:"#app",
data:{
num:2000,
pric:12
},
computed:{ // 计算属性 computed
zongjia(){
return this.num*this.pric
}
}
})
在 html 中调用
<p>{{zongjia}}</p> // 就会得到这个数 24000 注意这里一定不能带小括号,否则就会报错
优势:提高页面性能,使用一次之后,会自动缓存,下次使用这个属性,就不需要调用了