Skip to content

VueJS模板指令

前言

前端开发技术大致经历了这样一个过程：

  • 静态页面阶段：比如JSP等都是后端渲染，前端只是负责展示静态内容
  • Web 2.0时代：以jQuery和Ajax等技术为代表，前端需要和后端进行复杂的数据交互
  • MVC框架阶段：比如BackboneJS框架，前端开发模式的转变
  • SPA阶段：比如Angular、React、Vue JS等框架，从网站变成了网页App

但前端开发的最本质技术还是这三个：

  • HTML(超链接文本标记语言)：描述内容
  • CSS(层叠样式表)：显示样式
  • JavaScript：交互操作

Vue.js框架是渐进式(自底向上逐层使用或只使用某部分功能)，通过模板的一些指令，将这三个放在同一个模板文件中进行处理。

文本插值

以{{ var }}的形式直接引用，在这其中也可以进行表达式计算，比如 {{ var1 + var 2}}:

<h1> {{ title }} </h1>

<h1> {{ title  + name}} </h1>

v-once：单次渲染

默认变量每次改变都会自动重新渲染页面对应的值，如果只要求渲染一次，则使用这个指令:

<h1 v-once> {{ title }} </h1>

v-html：HTML渲染

默认是变量以文本形式渲染，如果变量内容是一段HTML，渲染时要以网页内容形式渲染，则使用:

<h1 v-html="title"></h1>

v-bind：属性绑定

普通属性值

绑定标签属性，比如:

<h1 v-bind:id="idVar"> {{ title }} </h1>

那么idVar的值变化了，对应h1的id就变化了，从而带动CSS样式的变化。

<h1 v-bind:[attributeName]="var"> {{ title }} </h1>

通过变量attributeName改变，使得var变量改变的可以是id值，也可以是class值。

这个指令常缩写为:

<h1 :id="idVar"> {{ title }} </h1>

<div :id="`list-${id}`"></div>

<h1 :[attributeName]="var"> {{ title }} </h1>

布尔类型属性值

针对布尔型属性的绑定，有些不同于其它属性值的情况:

<button :disabled="isButtonDisabled">Button</button>

但isButtonDisabled为真或空的时候，由于是布尔类型的变量，因此这个HTML标签就会包含这个叫disabled的属性，否则就不包含该属性。

多个属性一次性绑定

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper'
}

<div v-bind="objectOfAttrs"></div>

不指定具体属性名字，而是提供一个字典让它自动匹配属性和值。

v-on：事件绑定

绑定事件操作:

<button v-on:click="clickFunc"> Hello </button>

<button v-on:[eventName]="clickFunc"> Hello </button>

可以缩写为:

<button @click="clickFunc(x)"> Hello </button>

<button @click.stop="clickFuncStop(x)"> Hello </button>

<button @[eventName]="clickFunc"> Hello </button>

v-model: 双向绑定

一般是表单中使用:

<input type="text" v-model.number="age">input age</input>

<input type="text" v-model.trim="age">input age</input>

<input type="text" v-model.lazy="title">input title</input>

改变变量可以自动改变渲染后的结果，渲染后页面中改变值也自动改变了变量的值，从而不需要再去DOM中获取对应元素更新后的值。

v-if：条件渲染

条件渲染，可以进行条件分支渲染:

<h1 v-if="level == 1"> Level1 </h1>
<h1 v-else-if="level == 2"> Level2 </h1>
<h1 v-else> Level3</h1>

这个指令必须附着在一个HTML标签上，有两种方式来包裹多个标签元素内容:

<div v-if="level > 3">
    <span>hello1</span>
    <span>hello2</span>
</div>

<template v-if="level > 3">
    <span>hello1</span>
    <span>hello2</span>
</template>

使用 div 标签的版本，最终渲染结果还是内容存在于一个 div 中，而使用 template 版本渲染结果只是内部标签内容。

v-show：条件显示

它通过变量或函数计算结果来可控制是否显示:

<h1 v-show="show"> show it </h1>

它只是视觉上的切换，其实元素已经渲染出来了，只是控制它的 display属性 实现是否展示给用户。

和v-if相比的话，v-if是条件为真才会渲染出来，因此它消耗的是更新渲染切换过程的性能，如果不是频繁的切换就选择v-if；而v-show它因为一开始就渲染出来了，因此初始化时消耗性能，如果会频繁显示和隐藏，则这个v-show好。

v-for：遍历渲染

遍历元素进行渲染:

<template v-for="(item, key, index) in data" :key="key">
    <span>{{item}}</span>
</template>