Vue 基本指令使用

Posted 2021-03-04 d0usr

1、模板语法：

使用双大括号(Mustache 语法) “{{ }}” 是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来。例如：

<template>
  <div id="app">
    <p>{{ msg }}</p>
    <p>{{ 20+1 }}</p>
    <p>{{ "ok" ? ‘yes‘ : ‘no‘ }}</p>
  </div>
</template>
<script>

export default {
  name: ‘HelloWorld‘,
  data () {
    return {
      msg: ‘Welcome to Your Vue.js App‘
    }
  }
}
</script>

2、v-once 指令：

作用是定义它的元素或组件只渲染一次，包括元素或组件的所有子节点。首次渲染后，不再随数据的变化重新渲染，将被视为静态内容。例如：

<template>
  <div id="app">
    <span v-once>{{ msg }}</span>
  </div>
</template>

<script>
export default {
  name: ‘HelloWorld‘,
  data () {
    return {
      msg: ‘hello vue‘
    }
  }
}
</script>

v-once 在业务中很少使用，当需要进一步优化性能时，可能会用到。

3、v-html 指令：

作用是渲染 html 内容。有的时候想输出 html ，而不是将数据解释为纯文本，可以使用 v-html：

<template>
  <div id="app">
    <span v-html="link"></span>
  </div>
</template>

<script>
export default {
  name: ‘HelloWorld‘,
  data () {
    return {
      link: ‘<a href="#">这是一个链接</a>‘
    }
  }
}
</script>

但是需注意的是，虽然可以直接用 v-html 指令渲染html 内容，但在服务端要对提交的html 做处理， 避免发生xss 攻击。

4、v-bind 指令：

v-bind 指令作用是动态更新 html 元素上的属性，比如 id，class，src 等。例如：

<template>
  <div id="app">
    <a v-bind:href="url">链接</a>
    <img v-bind:src="imgUrl"  />
  </div>
</template>

<script>
export default {
  name: ‘HelloWorld‘,
  data () {
    return {
      url: ‘https://www.github.com‘,
      imgUrl: ‘http://xxx.xxx.xx/img.png‘ 
    }
  }
}
</script>

5、v-if、v-else-if、v-else 指令：

与 javascript 的条件语句 if、else、else if 类似，Vue.js 的条件指令可以根据表达式的值在 DOM 中渲染或销毁元素组件，例如：

<template>
  <div id="app">
    <p v-if="status === 1">当status为1时显示该行</p>
    <p v-else-if="status === 2">当status为2时显示该行</p>
    <p v-else>否则显示该行</p>
  </div>
</template>

<script>
export default {
  name: ‘HelloWorld‘,
  data () {
    return {
      status: 1
    }
  }
}
</script>

v-else-if 要紧跟 v-if, v-else 要紧跟 v-else-if 或v-if，表达式的值为真时， 当前元素／组件及所有子节点将被渲染，为假时被移除。

6、v-show 指令：

v-show 的用法与 v-if 基本一致，只不过 v-show 是改变元素的 css 属性 display。当 v-show 表达式的值为 false 时，元素会隐藏，查看 DOM 结构会看到元素上加载了内联样式 diplay:none。例如：

<template>
  <div id="app">
      <p v-show="status === 1">当status为1显示该行</p>
  </div>
</template>

<script>
export default {
  name: ‘HelloWorld‘,
  data () {
    return {
      status: 2
    }
  }
}
</script>

渲染后的结果为：
<p style="display: none;">当status为1显示该行</p>

7、v-if 与 v-show 选择：

1、v-if 和v-show 具有类似的功能，不过v-if 才是真正的条件渲染，它会根据表达式适当地销毁
或重建元素及绑定的事件或子组件。若表达式初始值为false ，则一开始元素／组件并不会渲染，只
有当条件第一次变为真时才开始编译。
2、而v-show 只是简单的css 属性切换，无论条件真与否，都会被编译。相比之下， v-if 更适合
条件不经常改变的场景，因为它切换开销相对较大，而v-show 适用于频繁切换条件。

8、v-for 指令：

（1）当需要将一个数组遍历或枚举一个对象循环显示时，就会用到列表渲染指令v-for 。它的表达式需结合in 来使用，类似 item in items 的形式。例如：

<template>
  <div id="app">
      <ul>
        <li v-for="book in books">{{ book.name }}</li> 
      </ul>
  </div>
</template>

<script>
export default {
  name: ‘HelloWorld‘,
  data () {
    return {
      books: [
        {name: ‘《Vue.js实战》‘},
        {name: ‘《JavaScript高级程序设计》‘}
      ]
    }
  }
}
</script>

（2）在表达式中， books 是数据， book 是当前数组元素的别名， 循环出的每个＜li ＞内的元素都可以访问到对应的当前数据book 。列表渲染也支持用 of 来代替 in 作为分隔符，它更接近JavaScript 迭代器的语法：

<li v-for="book of books">{{ book.name }}</li>

（3）v- for 的表达式支持一个可选参数作为当前项的索引， 例如：

<li v-for="(book, index) in books">{{ index }} - {{ book.name }}</li>

（4）与 v-if 一样，v-for 也可以用在父标签上，将多个元素进行渲染：

<template>
  <div id="app">
    <ul v-for="book in books">
      <li>书名：{{ book.name }}</li>
    </ul>    
  </div>
</template>

<script>
export default {
  name: ‘HelloWorld‘,
  data () {
    return {
       books: [
         {name: ‘《Vue.js实战》‘},
         {name: ‘《JavaScript高级程序设计》‘}
       ]
    }
  }
}
</script>

（5）对象的属性也是可以遍历的，例如：

<template>
  <div id="app">
    <span v-for="value in user">{{ value }}</span>
  </div>
  
</template>

<script>
export default {
  name: ‘HelloWorld‘,
  data () {
    return {
      user: {
        name: ‘Tom‘,
        gender: ‘男‘,
        age: 26
      }
    }
  }
}
</script>

渲染后的结果为：
<span>Tom</span><span>男</span><span>26</span>

遍历对象时，有两个可选参数，分别是键名和索引：

<template>
  <div id="app">
    <ul>
      <li v-for="(value, key, index) in user">
        {{ index }} - {{ key }} : {{ value }}
      </li>
    </ul>
  </div>
  
</template>

（6）v-for 还可以迭代整数：

<template>
  <div id="app">
    <span v-for="n in 10">{{ n }}</span>
  </div>
</template>

渲染结果为：
1 2 3 4 5 6 7 8 9 10

 

 

 

参考：

《Vue.js实战》

https://cn.vuejs.org/v2/guide/