指令

v-html/v-text

v-text

v-text
v-text和插值表达式的区别
- v-text 标签的指令更新整个标签中的内容
- 差值表达式，可以更新标签中局部的内容

v-html

可以渲染内容中的HTML标签
尽量避免使用，否则会带来危险(XSS攻击跨站脚本攻击)

v-bind

可以绑定标签上的任何属性
动态绑定图片的路径

<img v-bind:src="src" />
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            src: '1.jpg'
        }
    });
</script>

绑定a标签上的id

<a v-bind:href="'del.php?id=' + id">删除</a>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            id: 11
        }
    });
</script>

绑定class

对象语法和数组语法

对象语法
如果isActive为true，则返回的结果为 <div class="active"></div>

<div v-bind:class="{active: isActive}">
    hei
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            isActive: true  
        }
    });
</script>

数组语法

渲染的结果 <div class="active text-danger"></div>

<div v-bind:class="[activeClass, dangerClass]">
    hei
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            activeClass: 'active',
            dangerClass: 'text-danger'
        }
    });
</script>

绑定style

对象语法和数组语法

对象语法
渲染的结果<div style="color: red; font-size: 18px;"></div>

<div v-bind:style="{color: redColor, fontSize: font18 + 'px'}">
    hei
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            redColor: 'red',
            font18: 18
        }
    });
</script>

数组语法

<div v-bind:style="[color, fontSize]">abc</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            color: {
                color: 'red'
            },
            fontSize: {
                'font-size': '18px'
            }
        }
    });
</script>

v-model

表单元素的绑定

双向数据绑定
- 数据发生变化可以更新到界面
- 通过界面可以更改数据
绑定文本框
当文本框的值发生边框后，div中的内容也会发生变化

<input type="text" v-model="name">
<div>{{ name }}</div>
<script>
    var vm = new Vue({
       el: '#app',
        data: {
            name: ''
        }
    });
</script>

绑定多行文本框

<textarea v-model="name"></textarea>
<div>{{ name }}</div>

注意：多行文本框中不能使用{{ name }}的方式绑定

绑定复选框

绑定一个复选框

<input type="checkbox" v-model="checked">
<div>{{ checked }}</div>

绑定多个复选框

此种方式需要input标签提供value属性

吃饭：<input type="checkbox" value="eat" v-model="checklist"><br>
睡觉：<input type="checkbox" value="sleep" v-model="checklist"><br>
打豆豆：<input type="checkbox" value="ddd" v-model="checklist"><br>
{{ checklist }}
<script>
    var vm = new Vue({
       el: '#app',
        data: {
            checklist: []
        }
    });
</script>

绑定单选框

男<input type="radio" name="sex" value="男" v-model="sex">
女<input type="radio" name="sex" value="女" v-model="sex">
{{sex}}
<script>
    var vm = new Vue({
       el: '#app',
        data: {
            sex: ''
        }
    });
</script>

绑定下拉框

<div id="example-5">
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

v-on

绑定事件

<div id="app">
        <!-- 设置一个元素，并且给这个元素设置一个点击事件 -->
        <!-- <button v-on:click="doThis">点我有惊喜</button> -->
        <button @click="doThis">点我有惊喜</button>
    </div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
        },
        methods: {
            doThis: function(){
                alert('这就是传说中的惊喜');
            }   
        }
    });
</script>

事件修饰符：
- .prevent 阻止默认时间发生
- .once 只触发一次

<div id="app">
        <a  @click.prevent="go">我是一个a标签</a>
    </div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
        },
        methods: {
            go() {
               console.log('a标签');
            }
        }
    });

</script>

v-show

作用:控制元素的显示和隐藏

<div id="app">
        <button @click="show">控制元素的显示和隐藏</button>
        <p v-show="isShow">{{ msg }}</p>
    </div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "hello vue",
            isShow: false
        },
        methods: {
            show() {
                // this指向的是vm对象
                this.isShow = !this.isShow;
            }
        }
    });
</script>

v-if

作用:有着与v-show一样的功能,根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template> ，将提出它的内容作为条件块。当条件变化时该指令触发过渡效果。
注意:当和 v-if 一起使用时，v-for 的优先级比 v-if 更高

<div id="app">
        <button @click="show">控制元素的显示和隐藏</button>
        <p v-if="isShow">{{ msg }}</p>
        <hr>
        <p v-if="score === 'A'" >A</p>
        <p v-else-if="score ==='B'">B</p>
        <p v-else-if="score ==='C'">C</p>
        <p v-else>其它</p>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "hello vue",
            isShow: false,
            score: "D"//输出内容:其他
        },
        methods: {
            show() {
                // this指向的是vm对象
                this.isShow = !this.isShow;
            }
        }
    });
</script>

v-for

基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression ，为当前遍历的元素提供别名：

<div id="app">
        <!-- 使用 v-for 来遍历数组 -->
        <ul>
            <li v-for="(item,index) in arr">{{item}}---{{index}}</li>
        </ul>
        <!-- 使用 v-for 来遍历对象 -->
        <ul>
            <li v-for="(item,key) in obj">{{item}}---{{key}}</li>
        </ul>
    </div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            arr: ["a","b","c"],
            obj: {
                id: 1,
                name: '张三',
                age: 18
            }
        }        
    });
</script>

v-clock

不需要表达式

作用：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

<style>
[v-cloak] {
  display: none;
}
</style>

<div v-cloak>
  {{ message }}
</div>

不会显示，直到编译结束。

v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<div id="app">
        有v-once的div
        <div v-once>{{msg}}</div>
        没有v-once的div
        <div>{{msg}}</div>
    </div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "Hello Vue"
        }        
    });
</script>

v-model给表单元素绑定数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 1.0 使用v-model给文本框绑定数据: 双向数据绑定-->
        <input type="text" v-model="msg">
        <br>
        {{msg}}
        <hr>
        <!-- 2.0 使用v-model给多行文本框绑定数据   -->
        <textarea v-model="msg1"></textarea>
        <br>
        {{msg1}}
        <hr>
        <!-- 3.0 使用v-model给复选框绑定数据  -->
        <!-- 3.1 绑定的是一个复选框 -->
        <input type="checkbox" v-model="checkbox">
        <br>
        {{checkbox}}
        <hr>
        <!-- 3.2 绑定的是多个复选框 -->
        <input type="checkbox" value="eat" v-model="checkboxArr">吃饭
        <input type="checkbox" value="sleep" v-model="checkboxArr">睡觉
        <input type="checkbox" value="ddd" v-model="checkboxArr">打豆豆
        <br>
        {{checkboxArr}}
        <hr>
        <!-- 4.0 绑定单选框 -->
        <input type="radio" value="男" name="gender" v-model="radio">男
        <input type="radio" value="女" name="gender" v-model="radio">女
        <br>
        {{radio}}
        <hr>
        <!-- 5.0 给下拉框绑定数据 -->
        <select v-model="selected">
            <option value="-1">请选择</option>
            <option value="0">A</option>
            <option value="1">B</option>
            <option value="2">C</option>
        </select>
        <br>
        {{selected}}
    </div>
</body>
<script src="./vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "abc",
            msg1: "one",
            checkbox: "", // 值为true / false
            checkboxArr: ["eat","ddd"],
            radio: "女",
            selected: -1
        }        
    });
</script>
</html>

VueJS常用的指令及作用

指令

v-html/v-text

v-text

v-html

v-bind

v-model

双向数据绑定

绑定文本框

绑定多行文本框

绑定复选框

绑定多个复选框

绑定单选框

绑定下拉框