vue初学(2)

第三课

以下都是假设要点击文字变色，再次点击变回来。

一、添加class绑定

1、class对象绑定：

• 给元素添加click事件；
• 给元素用v-bind添加class，后面class那里的意思是：给div添加一个class属性，名字为activated，但是不是一开始就有这个名字，要在isActivated为真的时候才给这个添加的类加上名字；

<div @click='handleDivClick'
	:class='{activated: isActivated}'
>

• 给vue实例里添加isActivated数据，初始为false，并且添加isActivated方法来实现点击切换的效果：

handleDivClick: function() {
					this.isActivated = !this.isActivated;
				}

• 记得在css里添加activated类来实现样式

2、添加数组class名

• 给元素添加click事件；
• 依然给元素用v-bind添加class，这次添加的class名直接用vue实例里的一个数据表示，而这个数据一开始为空字符串，后续可以通过改变这个变量的值来控制样式。
• （实际上class后面字符串里的内容是一个数组，可以添加多个类）

<div @click='handleDivClick'
			:class='[activated]'
		>

• 后来通过逻辑关系，写出handleDivClick里的内容：

handleDivClick: function() {
					this.activated = this.activated==='activated'?'':'activated';
				}

二、style

1、style对象绑定

• 和上面几乎一样，只是把class换成style；

<div @click='handleDivClick'
			:style='styleObj'
		>

• 在vue实例中添加styleObj数据对象，数据初始化为，颜色样式设置为black。再设置handleDivClick函数：

handleDivClick: function() {
					this.styleObj.color = this.styleObj.color==='black'?'pink':'black';
				}

2、添加数组style对象

• 几乎和上面class第二部分一致，也可以绑定多个对象，不再赘述。

<div @click='handleDivClick'
			:style='[styleObj]'
		>

三、列表渲染

　　其实官方文档里已经很详细了，使用方法也不再多说，这里就做一点补充与提示。

1、数组更新检测

• 在vue数据的数据里直接用赋值的方式来改变数组元素，并不会触发视图更新，也就是不会在改变之后立马显示在屏幕上，下面举个例子

• 页面内容为遍历vue中list数据里的内容输出，list为

//list数组
list:[9,1,2,4,2,5]
//要显示的标签
<div v-for='item of list'>{{ item }}</div>

//页面显示为 9 1 2 4 2 5
//这时在控制台输入 app.list[4] = 0
//并不会让视图更新
//而如果输入app.list.sort()就会立马更新视图

• 所以可以看到并不是所有对数组操作的方法都会触发视图更新，Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
  • pop() —— 删除最后一个元素
  • push() —— 在最后添加一个元素
  • shift() —— 删除第一个元素
  • unshift() —— 在最开始添加一个元素
  • sort() —— 排序
  • splice() —— 分割
  • reverse() —— 逆转

2、v-for来遍历对象

• v-for不仅可以遍历数组，同样可以用对象来渲染，其中可以通过key或name来表示数组的键，再用个变量来表示值，即

<div v-for='(item,name) of items'>{{ name }} --- {{ item }}</div>

3、用set方法改变数组和对象元素

• 上面说了，如果在控制台直接用数组赋值的方式来改变，是不会直接显示在页面上的；
• Vue中和Vue实例中分别提供了set和$set方法，使用方法如下：

//本来vue实例中数组为 list: [9, 2, 5, 3, 0]
//在屏幕上打印之后我们在控制台输入，
list[3] = 99  //无反应
Vue.set(app.list, 3, 100) //数组变化显示了
app.$set(app.list, 3, 100) //vue实例的方法

• 两种set的使用方法几乎一样，效果也一样：
• Vue.set('要更改的数组名', 位置(键), 值)
• app.$set('要更改的数组名', 位置(键), 值)