vue.js-指令

Vue.js

指令

表达式的值除了可以出现内容中，也可以使用在其它位置，比如：属性。但是不能使用 { {}} 语法，而是需要 指令

在 vue 中，指令是一个带有 v- 前缀的属性，与普通属性不一样的地方在于，指令的值是引号括起来的 表达式，不同的指令有不同的作用，vue 内置了一些常用的指令，后期我们还可以自定义属于自己的指令

• 内容输出
• 循环
• 逻辑
• 属性绑定
• 事件
• 其它

内容输出

通过 { {}} 我们可以很方便的中模板中输出数据，但是这种方式会有一个问题，当页面加载渲染比较慢的时候，页面中会出现 { {}} ，vue 提供了几个指令来解决这个问题

指令中的表达式不需要使用 { {}}

v-text

<p v-text="title">p>

弊端：v-text 会填充整个 innerHTML

v-cloak

<p v-cloak>{
  {title}}p>

需要配合 css 进行处理

v-html

为了防止 xss 攻击，默认情况下输出是不会作为 html 解析的，通过 v-html 可以让内容作为 html 进行解析

v-once

只渲染元素和组件一次，后期的更新不再渲染

v-pre

忽略这个元素和它子元素内容的编译

逻辑处理

v-show

根据表达式的值（布尔值），切换元素的显示与隐藏（display 属性）

适用于状态切换比较频繁的情况

v-if

根据表达式的值（布尔值），创建或销毁元素

适用于状态切换不频繁的情况

v-else / v-else-if

与 v-else 配合

循环与列表

v-for

根据数据循环渲染 v-for 指令所在的元素及其子元素

可以循环的数据：Array | Object | number | string | Iterable (2.6 新增)

<div v-for="(item, index) in items">div>
<div v-for="(val, key) in object">div>
<div v-for="(val, key, index) in object">div>

v-for 中也可以使用 of 语法，在 vue 中两者没有什么区别

:key

默认情况下，在渲染 DOM 过程中使用 原地复用 ，这样一般情况下会比较高效，但是对于循环列表，特别是依赖某种状态的列表，会有一些问题，我们可以通过 :key 属性，来给每个循环节点添加一个标识

属性绑定

v-bind

绑定数据（表达式）到指定的属性上，

，这里的参数就是指定的属性名称

<div id="app">
  <div v-bind:id="'box1'">div>
  <div v-bind:id="myId">div>
div>

<script>
	new Vue({
    
    el: '#app',
    data: {
    
      myId: 'kaikeba'
    }
  })
script>

缩写

有的一些常用指令会有对应的缩写，v-bind 对应的缩写为：:

<div :id="myId">div>

样式

针对样式属性，v-bind 值有一些特殊的写法

style

原生普通写法

<div style="width: 100px; height: 100px; background: red">div>

v-bind 写法

<div :style="'width: 100px; height: 100px; background: red'">div>

对象写法

<div :style="style1">div>

...
<script>
new Vue({
    
	el: '#app',
	data: {
    
		style1: {
    
      width: '100px