Vue常用指令总结

v-once

• 该指令表示元素和组件值渲染一次，不会随着数据的改变而改变

<script type="text/javascript">
    const app = new Vue({
        el: "#app",
        data: {
            message: "你好",
            firstName: "kobe",
            lastName: "bryant",
            counter: 100,
            url:"<a href=''http://www.baidu.com'>百度一下</a>"
        }
    })
</script>

<div id="app">
    <h2 v-once>{{firstName+lastName}}</h2>
</div>

v-html

• 该指令后面往往会跟上一个string类型，会将string的html解析出来并渲染
• 如果服务器直接返回了一个html代码，可能会用到该指令

<div id="app">
    <h2 v-html="url"></h2>

v-text

• v-text作用与mustache比较相似，都是用于将数据显示在界面上，通常接收一个string类型
• v-text指令接收的内容会将后面的文本给覆盖掉，因此该指令很少用

<div id="app">
    <!-- hello会被message给覆盖掉 -->   
    <h2 v-text="message">hello</h2>

v-pre

• v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的mustache语法
• 该指令与pre标签很相似，往里面写的是什么，就会原封不动的展示出什么

<div id="app">
    <!-- 输出结果为：{{message}} -->
    <h2 v-pre>{{message}}</h2>

v-cloak

• cloak：斗篷，遮蔽物
• 在某些情况下，我们浏览器可能会直接显示出未编译的mustache
• 在Vue解析之前，div中有一个属性v-cloak，在Vue解析之后，该属性就会被删除

<div id="app">
	<h2 v-cloak>{{message}}</h2>

 <style type="text/css">
     [v-cloak] {
         /* 在div未被解析出来时，隐藏这个div */
         display: none;
     }
</style>

v-if

• v-if、v-else-if、v-else这三个指令与JavaScript中的if、else、 else if即为相似
• Vue中的这三个条件指令会根据表达式的值在DOM中渲染或销毁元素或组件

<div id="app">
    <p v-if="score>=90">优秀</p>
    <p v-else-if="score>=80">良好</p>
    <p v-else-if="score>=60">及格</p>
    <p v-else>不及格</p>
</div>

data: {
    score: 88
}

// 结果：良好

v-show

• v-show与v-if极为相似，也是决定了一个元素或组件是否渲染，不同的是：

  • v-if后面的条件为false时，根本不会有对应的标签出现在DOM中
  • v-show后面的条件为false时，仅仅是将元素的display属性设置为none而已

• 当某个组件或元素需要频繁的显示或隐藏时，应选择v-show，而当该组件或元素只需要渲染一次时，选择v-if

<p v-show="score>=90">我太优秀了</p>

v-bind

• v-bind指令较为复杂且很常用，因此单独作为一个文件讲解，详解见->

v-on

• 详解见->

v-for

• 详解见->

v-model

• 详解见->