1.
Vue中每一个组件就是一个vue实例。
2.
生命周期函数就是Vue实例在某一个时间点自动执行的函数。
注意:Vue的生命周期函数写在Vue实例里,而不是methods里面。
**
3.模板语法
1. 插值表达式: {{ }}
2. v-text
等价于 {{name}} 其中name是在data中定义的变量。
**
3. v-html
v-html 和 v-text的区别是如果在data中定义的变量带有html标签,则v-html会解析,而v-text不会。
例如:
<div v-html='name'></div>
data {
name: "<h1>nihao</h1>"
}
总结:插值表达式和v-text的作用是一样的。
补充:在{{这里}}和v-text=”这里”,不仅可以只写变量,而且可以写JavaScript的表达式。
4. 计算属性,方法和监听器。
1. 计算属性:
在插值表达式里{{ firstName +” ” +lastName}}也可以实现,但是,为了友好插值表达式里只让他显示我们要展示的内容就好,所以要通过计算属性来合成一下。
注意:计算属性有一个缓存的概念在里面,如果他依赖的变量没有变化,那么这个计算属性就不会重新计算,这也是Vue里的一种优化机制。
除此之外,通过{{ fullName() }}也可以实现同样的功能,即在methods里写一个方法,然后在插值表达式里调用。但是,这种办法没有computed好,因为没有缓存机制,每当改变Vue实例的属性的时候都要重新执行一下这个方法。
2. watch
5 计算属性的setter和getter
6 Vue里的样式绑定
一。 绑定class
1. 第一种:样式和数据的绑定,通过对象方式{ }
当isActivated为true的时候,div上会增加一个class属性,属性名称为activated,如果再在css里加上activated类的样式,则会有CSS效果了。
如果isActivated为false,则没有class属性。
2.第二种方式:通过数组方式
当然在数组中也可以添加多个数值,在data中有数值就会显示成如下效果。
二。绑定style
1.
当然也可以绑定多个
总结:无论通过style绑定还是class绑定,都有对象和数组两种方式。
7 Vue里的条件渲染
v-if和v-show 都能够控制一个标签能否在页面上显示,但是v-show无论true还是false都在页面显示,只不过把display设为了none。
v-if
v-else-if
v-else
key值:在input标签上添加key值,目的是给两个input来区分开来,因为Vue机制为了优化性能如果发现input是一样的就不会给你重新渲染该标签。在别的标签上同样可以添加key值,根据需要来。
8 Vue里的列表渲染
在循环的时候推荐使用 item of list 而不是item in list
在通过v-for渲染列表的时候,为了增加渲染性能,通常加一个key值(key值要求唯一),但是如果用索引的下标对性能不好,所以根据真实项目中的一般返回的数据是数据库中的字段,以字段的id作为key值比较好。
注意:直接操作数组下标的方式是不能实时渲染页面的,需要通过Vue给提供的方法才能,总共5个方法,分别是:push pop shift(把数组的第一项删掉) unshift(把数组的第一项加一点内容) splice sort reverse 。或者直接通过改变list的引用也可以改变页面数据。
例如:通过vm.list[1] = {…}这样的方式并不能实时改变页面上的数据。
unshift用法:
将新项添加到数组起始位置:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");
结果为:Lemon,Pineapple,Banana,Orange,Apple,Mango
shift用法
从数组中移除元素:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift(
结果为:Orange,Apple,Mango
template模板占位符
通过这个标签可以包裹一些其他标签然后做一些东西,但是这个标签并不在页面上渲染
除了对数组的循环,也可以对对象进行循环遍历(既可以输出对象的值,也可以输出对象的键和索引)
其中,item代表值,key 代表键,index代表索引。
9.Vue中的set方法
1. 通过set方法操作对象
通过Vue里的set这个全局方法可以往对象里添加值,并且实时修改页面上的内容。
Vue.set(vm.userInfo, "address","beijing")
其中vm是当前Vue的实例对象。
除此之外,通过vue的实例对象的$set()方法也可以往对象里添加值,并且实时改变页面。
vm.$set(vm.userInfo, "address", "beijing")
2. 通过set方法操作数组。
Vue.set(vm.userInfo, 1, 5) //把userInfo数组中的第二个位置处的数值改为5
等价方法
vm.$set(vm.userInfo, 2, 10) //把userInfo数组中的第3个位置处的数值改为10
总结:
实时改变数组中的数据有三种方法
改变数组的引用
通过Vue提供的那7个方法
通过set改变
实时改变对象中的数据有两种方法
通过改变对象的引用
通过set方法
原文:https://blog.csdn.net/yexudengzhidao/article/details/81088180