1-2.Vue 常用指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。 — 官方定义

在 Vue 项目中常用的一些指令。包括每个指令的含义以及如何使用他们。我们在日常项目中会大量地使用指令，指令是 Vue 中相对基础和简单的知识点。

1、v-if 、v-else、 v-show、v-else-if

这几个条件指令用于显示与隐藏各类元素，使用方式如下：
（1）v-if


<div v-if="isLogin">你好</div>
<div v-if="isLogin">你好</div>
<div v-if="isLogin">你好</div>

（2）v-else


<div v-else>请登录后操作</div>
<div v-else>请登录后操作</div>
<div v-else>请登录后操作</div>

（3）v-show


<div v-show="isLogin">你好</div>
<div v-show="isLogin">你好</div>
<div v-show="isLogin">你好</div>

（4）v-else-if


<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>

（5）v-if与v-show的区别

v-if：在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，开销较高，在运行时条件很少改变时使用。
v-show：调整css dispaly属性，开销较小，在常频繁地切换时使用。

2、v-for

（1）基本用法


<!-- 模板 -->
<div id="app">
    <ul>
        <li v-for="item in items">
            {{item}}
        </li>
    </ul>
</div>
<!--JS代码 -->
<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data:{
            items:[20,23,18,65]
        }
    })
</script>
<!-- 模板 -->
<div id="app">
    <ul>
        <li v-for="item in items">
            {{item}}
        </li>
    </ul>
</div>

<!--JS代码 -->
<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data:{
            items:[20,23,18,65]
        }
    })
</script>
<!-- 模板 -->
<div id="app">
    <ul>
        <li v-for="item in items">
            {{item}}
        </li>
    </ul>
</div>

<!--JS代码 -->
<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data:{
            items:[20,23,18,65]
        }
    })
</script>

（2）对象遍历
参数：第一个为值，第二个为键名，第三个为索引


<!-- 模板 -->
<div id="app">
    <ul>
        <li v-for="(value, key, index) in object">
        {{ index }}. {{ key }} - {{ value }}
        </li>
    </ul>
</div>
<!--JS代码 -->
<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data:{
            object: {
                firstName: 'John',
                lastName: 'Doe'
            }
        }
    })
</script>
<!-- 模板 -->
<div id="app">
    <ul>
        <li v-for="(value, key, index) in object">
        {{ index }}. {{ key }} - {{ value }}
        </li>
    </ul>
</div>

<!--JS代码 -->
<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data:{
            object: {
                firstName: 'John',
                lastName: 'Doe'
            }
        }
    })
</script>
<!-- 模板 -->
<div id="app">
    <ul>
        <li v-for="(value, key, index) in object">
        {{ index }}. {{ key }} - {{ value }}
        </li>
    </ul>
</div>

<!--JS代码 -->
<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data:{
            object: {
                firstName: 'John',
                lastName: 'Doe'
            }
        }
    })
</script>

3、v-text 、v-html

（1）v-text
{{xxx}}取值有个弊端，当网速很慢或javascript出错时，会在页面显示{{xxx}}，Vue提供的v-text可以解决这个问题


<div>{{ message }}</div>
<!-- 和下面的一样 -->
<div v-text="message"></div>
<div>{{ message }}</div>
<!-- 和下面的一样 -->
<div v-text="message"></div>
<div>{{ message }}</div>
<!-- 和下面的一样 -->
<div v-text="message"></div>

（2）v-html
用于输出html代码


<span v-html="msgHtml"></span>
<span v-html="msgHtml"></span>
<span v-html="msgHtml"></span>

4、v-on

（1）常规用法


// html
<div>本场比赛得分：{{count}}</div>
<button v-on:click="add">加分</button>
// JS
data:{
    count: 1
},
methods: {
    add() {
        this.count++;
    }
}
// html
<div>本场比赛得分：{{count}}</div>
<button v-on:click="add">加分</button>

// JS
data:{
    count: 1
},
methods: {
    add() {
        this.count++;
    }
}
// html
<div>本场比赛得分：{{count}}</div>
<button v-on:click="add">加分</button>

// JS
data:{
    count: 1
},
methods: {
    add() {
        this.count++;
    }
}

（2）缩写


<button @click="add">加分</button>
<button @click="add">加分</button>
<button @click="add">加分</button>

指令详情的更多用法参照v-on官方API

5、v-model

以下的model都需要在data中声明初始值：


data: {
    count: 1,
    status: [],
    sex: '男',
    selected: ''
}
data: {
    count: 1,
    status: [],
    sex: '男',
    selected: ''
}
data: {
    count: 1,
    status: [],
    sex: '男',
    selected: ''
}

（1）input


<input type="text" v-model="message">
<input type="text" v-model="message">
<input type="text" v-model="message">

（2）textarea


<textarea  cols="30" rows="10" v-model="message"></textarea>
<textarea  cols="30" rows="10" v-model="message"></textarea>
<textarea  cols="30" rows="10" v-model="message"></textarea>

（3）checkbox


<input type="checkbox" id="first" value="1" v-model="status">
<label for="first">有效</label>
<input type="checkbox" id="second" value="2" v-model="status">
<label for="second">无效</label>
<div>状态：{{status}}</div>
<input type="checkbox" id="first" value="1" v-model="status">
<label for="first">有效</label>
<input type="checkbox" id="second" value="2" v-model="status">
<label for="second">无效</label>
<div>状态：{{status}}</div>
<input type="checkbox" id="first" value="1" v-model="status">
<label for="first">有效</label>
<input type="checkbox" id="second" value="2" v-model="status">
<label for="second">无效</label>
<div>状态：{{status}}</div>

（4）radio


<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex">
<label for="one">女</label>
<div>性别：{{sex}}</div>
<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex">
<label for="one">女</label>
<div>性别：{{sex}}</div>
<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex">
<label for="one">女</label>
<div>性别：{{sex}}</div>

（5）select


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

6、v-bind

用于处理html标签的动态属性，即动态赋值。
（1）常规用法


// html
<img v-bind:src="imgSrc"  width="200px">
// js
data: {    
    imgSrc:'http://liangxinghua.com/uploads/image/20180709/1531106987.png'
}
// html
<img v-bind:src="imgSrc"  width="200px">

// js
data: {    
    imgSrc:'http://liangxinghua.com/uploads/image/20180709/1531106987.png'
}
// html
<img v-bind:src="imgSrc"  width="200px">

// js
data: {    
    imgSrc:'http://liangxinghua.com/uploads/image/20180709/1531106987.png'
}

（2）缩写


<img :src="imgSrc"  width="200px">
<img :src="imgSrc"  width="200px">
<img :src="imgSrc"  width="200px">

指令详情的更多用法参照v-bind官方API

7、v-pre、v-cloak、v-once

（1）v-pre
在模板中跳过vue的编译，直接输出原始值，如果在标签中加入v-pre就不会输出vue中的data值了


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

（2）v-cloak
在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用


// css
[v-cloak] {
    display: none;
}
// html
<div v-cloak>{{message}}</div>
// css
[v-cloak] {
    display: none;
}

// html
<div v-cloak>{{message}}</div>
// css
[v-cloak] {
    display: none;
}

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

（3）v-once
只显示DOM第一次渲染的值，以后不改变了


<div v-once>第一次绑定的值：{{message}}</div>
<div v-once>第一次绑定的值：{{message}}</div>
<div v-once>第一次绑定的值：{{message}}</div>

8、完整示例代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门之Helloworld</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style type="text/css">
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- v-if -->
        <div v-if="isLogin">你好</div>
        <!-- v-else -->
        <div v-else>请登录后操作</div>
        <!-- v-show -->
        <div v-show="isLogin">你好</div>
        <!-- v-else-if -->
        <div v-if="type === 'A'">A</div>
        <div v-else-if="type === 'B'">B</div>
        <div v-else-if="type === 'C'">C</div>
        <div v-else>Not A/B/C</div>
        <!-- v-for基本使用 -->
        <ul>
            <li v-for="item in items">
                {{item}}
            </li>
        </ul>
        <!-- v-for高级使用 -->
        <ul>
            <li v-for="(value, key, index) in object">
                {{ index }}. {{ key }} - {{ value }}
            </li>
        </ul>
        <!-- v-text -->
        <div v-text="message"></div>
        <!-- v-html -->
        <div v-html="msgHtml"></div>
        <!-- v-on部分 -->
        <div>本场比赛得分：{{count}}</div>
        <!-- 常规写法 -->
        <button v-on:click="add">加分</button>
        <!-- @缩写 -->
        <button @click="add">加分</button><br/>
        <!-- v-model input -->
        <input type="text" v-model="message"><br/>
        <!-- v-model textarea -->
        <textarea  cols="30" rows="10" v-model="message"></textarea><br/>
        <!-- v-model checkbox -->
        <input type="checkbox" id="first" value="1" v-model="status">
        <label for="first">有效</label>
        <input type="checkbox" id="second" value="2" v-model="status">
        <label for="second">无效</label>
        <div>状态：{{status}}</div>
        <!-- v-model radio -->
        <input type="radio" id="one" value="男" v-model="sex">
        <label for="one">男</label>
        <input type="radio" id="two" value="女" v-model="sex">
        <label for="one">女</label>
        <div>性别：{{sex}}</div>
        <!-- v-model select -->
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <div>Selected: {{ selected }}</div>
        <!-- v-model select -->
        <img v-bind:src="imgSrc"  width="200px"><br/>
        <img :src="imgSrc"  width="200px"><br/>
        <!-- v-pre -->
        <div v-pre>{{message}}</div>
        <!-- v-cloak -->
        <div v-cloak>{{message}}</div>
        <!-- v-pre -->
        <div v-once>第一次绑定的值：{{message}}</div>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                isLogin: false,
                type: 'A',
                items:[20,23,18,65],
                object: {
                    firstName: 'John',
                    lastName: 'Doe'
                },
                message: 'hello Vue',
                msgHtml: '<h2>hello Vue!</h2>',
                count: 1,
                status: [],
                sex: '男',
                selected: '',
                imgSrc:'http://liangxinghua.com/uploads/image/20180709/1531106987.png'
            },
            methods: {
                add() {
                    this.count++;
                }
            }
        })
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门之Helloworld</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style type="text/css">
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- v-if -->
        <div v-if="isLogin">你好</div>
        <!-- v-else -->
        <div v-else>请登录后操作</div>
        <!-- v-show -->
        <div v-show="isLogin">你好</div>
        <!-- v-else-if -->
        <div v-if="type === 'A'">A</div>
        <div v-else-if="type === 'B'">B</div>
        <div v-else-if="type === 'C'">C</div>
        <div v-else>Not A/B/C</div>
        <!-- v-for基本使用 -->
        <ul>
            <li v-for="item in items">
                {{item}}
            </li>
        </ul>
        <!-- v-for高级使用 -->
        <ul>
            <li v-for="(value, key, index) in object">
                {{ index }}. {{ key }} - {{ value }}
            </li>
        </ul>
        <!-- v-text -->
        <div v-text="message"></div>
        <!-- v-html -->
        <div v-html="msgHtml"></div>
        <!-- v-on部分 -->
        <div>本场比赛得分：{{count}}</div>
        <!-- 常规写法 -->
        <button v-on:click="add">加分</button>
        <!-- @缩写 -->
        <button @click="add">加分</button><br/>
        <!-- v-model input -->
        <input type="text" v-model="message"><br/>
        <!-- v-model textarea -->
        <textarea  cols="30" rows="10" v-model="message"></textarea><br/>
        <!-- v-model checkbox -->
        <input type="checkbox" id="first" value="1" v-model="status">
        <label for="first">有效</label>
        <input type="checkbox" id="second" value="2" v-model="status">
        <label for="second">无效</label>
        <div>状态：{{status}}</div>
        <!-- v-model radio -->
        <input type="radio" id="one" value="男" v-model="sex">
        <label for="one">男</label>
        <input type="radio" id="two" value="女" v-model="sex">
        <label for="one">女</label>
        <div>性别：{{sex}}</div>
        <!-- v-model select -->
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <div>Selected: {{ selected }}</div>
        <!-- v-model select -->
        <img v-bind:src="imgSrc"  width="200px"><br/>
        <img :src="imgSrc"  width="200px"><br/>
        <!-- v-pre -->
        <div v-pre>{{message}}</div>
        <!-- v-cloak -->
        <div v-cloak>{{message}}</div>
        <!-- v-pre -->
        <div v-once>第一次绑定的值：{{message}}</div>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                isLogin: false,
                type: 'A',
                items:[20,23,18,65],
                object: {
                    firstName: 'John',
                    lastName: 'Doe'
                },
                message: 'hello Vue',
                msgHtml: '<h2>hello Vue!</h2>',
                count: 1,
                status: [],
                sex: '男',
                selected: '',
                imgSrc:'http://liangxinghua.com/uploads/image/20180709/1531106987.png'

            },
            methods: {
                add() {
                    this.count++;
                }
            }
        })
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门之Helloworld</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style type="text/css">
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- v-if -->
        <div v-if="isLogin">你好</div>
        <!-- v-else -->
        <div v-else>请登录后操作</div>
        <!-- v-show -->
        <div v-show="isLogin">你好</div>
        <!-- v-else-if -->
        <div v-if="type === 'A'">A</div>
        <div v-else-if="type === 'B'">B</div>
        <div v-else-if="type === 'C'">C</div>
        <div v-else>Not A/B/C</div>
        <!-- v-for基本使用 -->
        <ul>
            <li v-for="item in items">
                {{item}}
            </li>
        </ul>
        <!-- v-for高级使用 -->
        <ul>
            <li v-for="(value, key, index) in object">
                {{ index }}. {{ key }} - {{ value }}
            </li>
        </ul>
        <!-- v-text -->
        <div v-text="message"></div>
        <!-- v-html -->
        <div v-html="msgHtml"></div>
        <!-- v-on部分 -->
        <div>本场比赛得分：{{count}}</div>
        <!-- 常规写法 -->
        <button v-on:click="add">加分</button>
        <!-- @缩写 -->
        <button @click="add">加分</button><br/>
        <!-- v-model input -->
        <input type="text" v-model="message"><br/>
        <!-- v-model textarea -->
        <textarea  cols="30" rows="10" v-model="message"></textarea><br/>
        <!-- v-model checkbox -->
        <input type="checkbox" id="first" value="1" v-model="status">
        <label for="first">有效</label>
        <input type="checkbox" id="second" value="2" v-model="status">
        <label for="second">无效</label>
        <div>状态：{{status}}</div>
        <!-- v-model radio -->
        <input type="radio" id="one" value="男" v-model="sex">
        <label for="one">男</label>
        <input type="radio" id="two" value="女" v-model="sex">
        <label for="one">女</label>
        <div>性别：{{sex}}</div>
        <!-- v-model select -->
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <div>Selected: {{ selected }}</div>
        <!-- v-model select -->
        <img v-bind:src="imgSrc"  width="200px"><br/>
        <img :src="imgSrc"  width="200px"><br/>
        <!-- v-pre -->
        <div v-pre>{{message}}</div>
        <!-- v-cloak -->
        <div v-cloak>{{message}}</div>
        <!-- v-pre -->
        <div v-once>第一次绑定的值：{{message}}</div>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                isLogin: false,
                type: 'A',
                items:[20,23,18,65],
                object: {
                    firstName: 'John',
                    lastName: 'Doe'
                },
                message: 'hello Vue',
                msgHtml: '<h2>hello Vue!</h2>',
                count: 1,
                status: [],
                sex: '男',
                selected: '',
                imgSrc:'http://liangxinghua.com/uploads/image/20180709/1531106987.png'

            },
            methods: {
                add() {
                    this.count++;
                }
            }
        })
    </script>
</body>
</html>

版权声明本站名称：大雄搜集站
本站永久网址：https://soujiz.com
1 本站资源大多存储在云盘，如有链接失效，请留言反馈站长更新！
2 本站各种资源及源码软件大部分为网络搜集而来，如有侵犯版权的，请邮件与我们联系，本站将予以改正。
3 由于网络资源有极快的复制性，付费资源一经购买，不以任何形式退款，购买过程中如有付费资源失效，请及时联系站长。

THE END