前端框架-Vue.js—笔记(三)

__接上篇
3.5  v-for指令

   基于数据渲染一个列表，类似于JS中的遍历。其数据类型可以是 Array | Object | number | string。

   该指令之值，必须使用特定的语法(item, index) in items,  为当前遍历元素提供别名。 v-for的优先级别高于v-if之类的其他指令

代码如下：

运行结果如下：

另外v-for也可以为数组索引指定别名（或者用于对象的键）：

[/quote]

   v-for 默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素,您需要提供一个 key 的特殊属性:

{{ item.text }}

3.6 v-bind指令

动态地绑定一个或多个特性，或一个组件 prop 到表达式。v-bind指令可以在其名称后面带一个参数，中间用一个冒号隔开。这个参数通常是HTML元素的特性（attribute），比如：

[quote]v-bind:src="imageSrc"  可以缩写：:src="imgaeSrc"

:class="{ red: isRed }"  或  :class="[classA, classB]" ...

:style="{ fontSize: size + 'px' }"  或 :style="[styleObjectA, styleObjectB]" ...

绑定一个有属性的对象，比如：v-bind="{ id: someProp, 'other-attr': otherProp }"

...

语法结构：v-bind:argument="expression"

因为 Mustache 不能在 HTML 属性中使用，应使用 v-bind 指令，Mustache 是一个 logic-less （轻逻辑）模板解析引擎，它的优势在于可以应用在 Javascript、PHP、Python、Perl 等多种编程语言中。

案例实操：让列表第三行颜色变为紫色

运行结果：

3.7  v-on指令

      动态地绑定一个或多个特性，或一个组件 prop 到表达式；其作用和v-bind类似。注意：如果用在普通元素上时，只能监听原生 DOM 事件；但是如果用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

常用的修饰符包括：

.stop - 调用 event.stopPropagation()；停止冒泡。

.prevent - 调用 event.preventDefault(); 停止监听原生事件。

.capture - 添加事件侦听器时使用 capture 模式。

.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

.{keyCode | keyAlias} - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

.once - 触发一次。

使用手法：

案例实操：

运行结果:

我们在上面案例中接触到了新的methods方法，通过这个方法可以直接通过 app 实例访问这些方法，或者在指令表达式中使用,方法中的 this 自动绑定为 Vue 实例。这在后面的章节中我们还会介绍。