vue的基本指令

一、vue的基本指令

1.v-text和v-html

v-text 只能用在双标签中
v-text 其实就是给元素的innerText赋值
v-html 其实就是给元素的innerHTML赋值

2.v-if和v-show

v-if和v-show的区别：
v-if和v-show效果基本一致，但v-if是dom元素的添加或删除。
v-show是元素的显示或隐藏
如果遇有大量元素需要操作则优先选择v-show
可以提高浏览器的效率

如何使用：
v-if判断值是否为true，为true则保留dom元素
为false则删除dom元素
v-show是元素的显示或隐藏

3.v-for=“(item,index) in arr”

当在组件中使用 v-for 时，key 现在是必须的是为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性
循环数组
具有两个参数item(每一项的值),index(每一项的下标)
循环对象
v-for="(val, key, i) in list"
值是:val ----- 键:key ----- 索引:i

4.v-on

处理自定义原生事件的,给按钮添加click并让使用变量的样式改变
普通使用 v-on:事件名=“表达式||函数名”
简写方式 @事件名=“表达式”

5.v-model

双向数据流（绑定）
页面改变影响内存(js)
内存(js)改变影响页面
v-bind 和 v-model 的区别?
v-model: 其的改变影响其他 v-bind: 其的改变不影响其他
v-bind就是对属性的简单赋值,当内存中值改变，还是会触发重新渲染

6.v-cloak

这个指令是用来保持在元素上直到关联实例结束时进行编译。

7.v-once

v-once关联的实例，只会渲染一次。之后的重新渲染，实例极其所有的子节点将被视为静态内容跳过，这可以用于优化更新性能。

8. v-bind

v-bind用来动态的绑定一个或者多个特性。没有参数时，可以绑定到一个包含键值对的对象。常用于动态绑定class和style。以及href等。
简写为一个冒号【 ：】
1.对象写法
代码如下（示例）：

//进行类切换的例子
<div id="app">
    <!--当data里面定义的isActive等于true时，is-active这个类才会被添加起作用-->
    <!--当data里面定义的hasError等于true时，text-danger这个类才会被添加起作用-->
    <div :class="{'is-active':isActive, 'text-danger':hasError}"></div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            isActive: true,  
            hasError: false
        }
    })
</script>

渲染结果

<!--因为hasError: false，所以text-danger不被渲染-->
<div class = "is-active"></div>

2.数组语法
代码如下（示例）：

<div id="app">
    <!--数组语法：errorClass在data对应的类一定会添加-->
    <!--is-active是对象语法，根据activeClass对应的取值决定是否添加-->
    <p :class="[{'is-active':activeClass},errorClass]">12345</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            activeClass: false,
            errorClass: 'text-danger'
        }
    })
</script>

渲染结果

<!--因为activeClass: false，所以is-active不被渲染-->
<p class = "text-danger"></p>