Vue基础指令整理

Vue是一套用于构建用户界面的渐进式框架，Vue 被设计为可以自底向上逐层应用，不仅易于上手，还便于与第三方库或既有项目整合，下面是Vue的一些基本指令和用法

基本用法

<div id="app">
    {{ message }}
    <br>
    {{ name }}
    <br>
    {{ name[0]}} {{ name[1] }}
    <br>
    {{school}}
    <br>
    {{ school.name + ":" + school.phone }}
    <br>
    {{ (num1 + num2) * 2 }}
</div>

创建Vue实例对象，设置el（挂载点）属性和data属性

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"Hello Vue!",
            name:["北京","上海","广州","深圳"],
            school:{
                name:"清华",
                phone:"12345678998"
            },
            num1:5,
            num2:6
        }
    })
</script>

效果

Vue实例作用范围是el命中的元素及其内部的后代元素，建议使用id选择器，不能挂载html和body标签
Vue中用到的数据定义在data中，data中可以写复杂类型的数据，渲染时遵守js的基本语法

v-text

设置标签的文本值，默认写法会替换全部内容，使用 {{ }} 可以替换指定内容，内部支持写表达式

<div id="app">
    <h1 v-text="message + '!'">深圳</h1>
    <h1>{{ message + "!" }}深圳</h1>
    <h1></h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"Hello Vue"
        }
    })
</script>

v-html

设置元素的innerHtml，设置普通文本时与v-text没区别，但当内容中有html结构会被解析为标签，v-text无论什么内容都只会解析为文本

<div id="app">
        <h2 v-text="message"></h2>
        <h2 v-html="message"></h2>
        <p v-text="info"></p>
        <p v-html="info"></p>
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"Hello Vue",
            info:"网站"
        }
    })
</script>

v-on

v-on:事件名，为元素绑定事件，事件名不需要写on，可以简写成@，绑定的方法定义在methods属性中，可以传入自定义参数定义方法时需要自定义形参来接收传入的实参，事件后面跟上 . 修饰符 可以对时间进行限制，如下面的@keyup.enter，只有按下回车才触发，方法内部可以通过this访问定义在data中的数据

<div id="app">
        <input value="test1" type="button" v-on:click="doit">
        <input value="test2" type="button" v-on:mouseenter="doit">
        <input value="test3" type="button" v-on:dblclick="doit">
        <input value="test4" type="button" @click="doit">
        <h1 @click="change">{{message}}</h1>
        <input type="text" v-model="inputData" @keyup.enter="showInput">
        <input type="button" value="show" @click="show('Hello,Vue!')">
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"Hello Vue",
            inputData:""
        },
        methods:{
            doit:function () {
                alert("tttt");
            },
            change:function () {
                this.message += "!";//点一下加一个"!"
            },
            showInput:function () {
                alert(this.inputData);
            },
            show:function (data) {
                alert(data);
            }
        }
    })
</script>

v-show

根据true或false切换元素的显示状态，原理是修改元素的display，实现显示与隐藏，指令后的内容最终会被解析成布尔值，true:显示，false:隐藏

<div id="app">
        <input type="button" value="切换显示状态" @click="change">
        <input type="button" value="加年龄" @click="add">
        <img src="//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" v-show="true">
        <img src="//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" v-show="isShow">
        <img src="//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" v-show="age > 18">
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            age:16,
            isShow:false
        },
        methods:{
            change:function () {
                this.isShow = !this.isShow;
            },
            add:function () {
                this.age++;
            }
        }
    });
</script>

v-if

与v-show作用相似，根据表达式的真假切换元素的显示状态，true显示，false隐藏，但v-if本质是操作dom元素来切换显示状态，因此频繁切换时，使用v-show，只不频繁或者只切换一次时使用v-if

<div id="app">
        <p v-if="true">我是p标签1</p>
        <p v-if="age > 18">我是p标签2</p>
        <p v-if="isShow">我是p标签3</p>
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"Hello Vue!",
            age:16,
            isShow:true
        },
    });
</script>

v-bind

设置元素的属性（比如src，title，class），完整写法是v-bind:属性名，简写可以省略v-bind，只保留 :属性名，建议使用对象方式，比三元表达式易懂，也可以绑定一个返回对象的计算属性

<div id="app">
        <img :src="imgSrc" :title="imageTitle+'!!!'">
        <img :src="imgSrc" :class="isActive?'active':''">
        <img :src="imgSrc" :title="imageTitle" :class="classObject">
        <div :class="classObj"></div>
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            imgSrc:"//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
            imageTitle:"百度",
            isActive:false,
            error:null,
            classObject:{
                active:true
            }
        },
        computed:{
            classObj:function () {
                return {
                    active: this.isActive && !this.error,
                    'text-danger': this.error && this.error.type === 'fatal'
                }
            }
        }
    });
</script>

v-for

作用是根据数据生成列表结构，v-for经常和数组结合使用，语法是(item,index) in 数组，item和index可以结合其他指令一起使用，数组长度的更新会同步到页面上，是响应式的

<div id="app">
        <input type="button" value="增加" @click="add">
        <input type="button" value="减少" @click="remove">
        <ul>
            <li v-for="(item,index) in arr" :title="item">
                {{index + 1}}{{item}}
            </li>
            <li v-for="(item,index) in objArr">
                {{item}}
                <br>
                {{index+1}}{{item.name}}
                <div v-for="it in item.friends">
                    {{it}}
                </div>
            </li>
        </ul>
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            arr:["北京","上海","广州"],
            objArr:[
                {name:"Tom",friends:["Jack","rose","peter"]},
                {name:"Jerry",friends:["Michael","Tom","Bob"]}
            ]
        },
        methods:{
            add:function () {
                this.arr.push("深圳");
            },
            remove:function () {
                this.arr.shift();//去掉的是最数组前面的数据
            }
        }
    });
</script>

v-model

便捷地设置和获取表单元素的值（双向数据绑定），绑定的数据会和表单元素相关联，改变任何一个另外一个也会同步更新

<div id="app">
        <input type="text" v-model="message">
        <h2>{{message}}</h2>
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"Hello Vue!"
        },
    });
</script>

v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译

<div id="app">
        <h1>{{message}}</h1>
        <h1 v-pre>{{message}}</h1>
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"Hello,Vue!"
        }
    });
</script>

v-once

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

以上为Vue的一些主要指令，还有其他的一些如v-slot，v-else-if等可以参考官方的api文档https://cn.vuejs.org/v2/api/