vue常用指令

vue常用指令总结

一.vue指令

官网解释

---

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

1.v-once

进入页面时 只渲染一次 不在进行渲染

---

2.v-show

v-show是给一个display：none的属性 让它不显示！ true就正常显示。

3.v-if

v-if后面的是一个表达式或者也可以是返回true或false的表达式。 且值为true和fasle false的话就会被注释

v-show和v-if的区别：

v-if: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除;

v-show: 控制DOM 的显示隐藏是为DOM元素添加css的样式display，设置none或者是block，DOM元素是还存在的

4.v-else

必须和v-if一起用才可以 不能单独用 而且必须在v-if下面 中间有别的标签也会报错

<div id="app">
　　<p v-if="height > 1.7">小明的身高是: {{height}}m</p>
　　<p v-else>小明的身高不足1.70m</p>
</div>
<script src="js/vue.js"></script>
<script>
　　new Vue({
　　　　　　　　el: '#app',
　　　　　　　　data: {
　　　　　　　　height: 1.88
　　　　}
});
</script>

5.v-else-if

这个比较简单 直接看代码就可以了 哈哈哈 输入成绩多少 就显示相应的等级

<div id="app">
        <p>输入的成绩对应的等级是:</p>
        <p v-if="score >= 90">优秀</p>
        <p v-else-if="score >= 75">良好</p>
        <p v-else-if="score >= 60">及格</p>
        <p v-else>不及格</p>
        <input type="text" v-model="score">
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
           el: '#app',
            data: {
               score: 90  // 优秀 良好 及格 不及格
            }
        });
    </script>

6.v-for

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

该指令之值，必须使用特定的语法(item, index) in items, index是索引，可以省略。item是 为当前遍历元素提供别名(可以自己随便起名字) 。v-for的优先级别高于v-if之类的其他指令

7.v-html

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 而且给一个标签加了v-html 里面包含的标签都会被覆盖。

注意v-html要慎用 因为会出现安全问题 官网解释为：你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

<div id="app" v-html="html">
　　<p v-text="msg">哈哈哈</p>  
</div>
<script type="text/javascript">
　　new Vue({
        el:'#app',
        data:{
            msg:'我爱敏敏！！',
            html:'<p>大海森林我都不爱！</p>'
            }
    })
</script>　　

8.v-text

给一个便签加了v-text 会覆盖标签内部原先的内容 如下面的例子 哈哈哈不会显示

<div id="app">
    <p v-text="msg">哈哈哈</p>
</div>
<script type="text/javascript">
    new Vue({
        　　el:'#app',
        　　data:{
        　　　　msg:'我爱敏敏'
            }
        })
</script>

9.v-bind

用法 :

<!-- 完整语法 --> <a v-bind:href="url">...

</a> <!-- 缩写 --> <a :href="url">...</a>

<div id="app">
     改变src alt等属性
        <img v-bind:src="imgSrc" :alt="alt">
        <img :src="imgSrc1" :alt="alt">
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
           el: '#app',
            data: {
               imgSrc: 'img/img_01.jpg',
               imgSrc1: 'img/img_02.jpg',
               alt: '我是美女'
            }
        });
    </script>

还可以绑定类名和css样式等

<div id="app">
        //v-for是一个遍历                 给他一个calss 如果index===cative class名是active，如果不等就为空
        //index 是v-for的索引
        <p v-for="(college, index) in colleges" :class="index === activeIndex ? 'active': ''">
            {{college}}
        </p>
        <p :style="{color: fontColor}">今天的天气很好!</p>
    </div>
 
    <script src="js/vue.js"></script>
    <script>
        new Vue({
           el: '#app',
            data: {
               colleges: [
                   'iOS学院',
                   'Java学院',
                   'HTML5学院',
                   'UI学院',
                   'VR学院'
               ],
                activeIndex: 0,
                fontColor: 'green'
            }
        });
    </script>

10.v-on

<!-- 完整语法 -->

<a v-on:click="doSomething">...</a>

<!-- 缩写 -->

<a @click="doSomething">...</a>

11.v-model

v-model是一个指令，限制在、、、components中使用 用于数据的双向绑定操作.