内部指令

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

这几个条件指令用于显示与隐藏各类元素,使用方式如下:
(1)v-if

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

(2)v-else

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

(3)v-show

<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>

(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>

(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>

3、v-text 、v-html

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

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

(2)v-html
用于输出html代码

<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++;
    }
}

(2)缩写

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

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

5、v-model

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

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

(1)input

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

(2)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>

(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>

(5)select

<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'
}

(2)缩写

<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>

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

// css
[v-cloak] {
    display: none;
}

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

(3)v-once
只显示DOM第一次渲染的值,以后不改变了

<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>