vue指令

一、文本操作指令

1、v-text 操作文本内容，和JavaScript中innerText差不多

v-text <==> {{}}
<p v-text="msg"></p>

2、v-html

<p v-html="msg"></p>
// <b>123</b>  => 加粗的123

3、v-once

<p v-once>
    {{msg}}
</p>
// 只能被赋值一次

4、v-model

<input type="text" v-model="val">
// v-model控制的是表单元素的value值

5、v-cloak  解决页面闪烁

<style>
    [v-cloak] {
        display: none;
    }
</style>
<div id="app" v-cloak>
    
</div>

二、关键指令

1、v-bind

操作的是属性,绑定属性后,属性值可以由变量来控制
操作title
v-bind:title="'my_title'"  => title="my_title"

v-bind:title="title"
data: {
    title: "my_title"
}
=> title="my_title"

操作class
v-bind:class="my_class"
data: {
    my_class: active
}
=> class="active"

v-bind:class="[c1, c2]"
data: {
    c1: C1,
    c2: C2
}
=> class="C1 C2"

v-bind:class="{abc: abc_able}"
data: {
    abc_able: ture
}
=> class="abc"
data: {
    abc_able: false
}
=> class=""

操作style
:style="{'200px', height:'200px'}"

:style="my_style"
data: {
    my_style: {
         "200px",
        height: "200px"
    }
}

2、v-on指令

1.简写 v-on:click <=> @click
2.默认绑定 @click="fn" => 回调方法可以获取ev
3.带参绑定 @click="fn(10)" => 回调参数只能获取自定义参数10
4.带参绑定 @click="fn(10, $event)" => 回调参数可以获取自定义参数10即事件参数ev

<div id="app">
    <p @click="fn1"></p>
    <p @click="fn2"></p>
    <p @click="fn3(10)"></p>
    <p @click="fn4($event, 10, 20)"></p>
    <p @click="fn5(10, $event, 20)"></p>
</div>
<script type="text/javascript">
    new Vue({
        el: "#app",
        methods: {
            fn1: function () {
                console.log("click event");
            },
            fn2 (ev) {
                console.log(ev);
            },
            fn3 (num) {
                console.log(num);
            },
            fn4 (ev, n1, n2) {
                console.log(ev);
                console.log(n1);
                console.log(n2);
            },
            fn5 (n1, ev, n2) {
                console.log(ev);
            }
        }
    })
</script>

3、v-model指令 操作的是表单元素的value值

// 双向绑定
<input type="text" v-model="val" name="txt1">
<input type="text" v-model="val" name="txt2">
// 两个输入框绑定的是同一个val,那么其中一个input的内容改变会直接映射到另一个input上

// 单个复选框
// val默认为true(选框选中,提交给后台的为ck=on)
// val默认为false(选框未选中,不向后台提交该数据)
<input type="checkbox" v-model="val" name="ck">

// 多个复选框
// v-model绑定的是同一个变量
// 该变量的值为数组形式
// 出现在数组中的value对应的复选框默认为选中状态,eg: val: ['ppqiu', 'zqiu'] => 
　　乒乓球,足球复选框默认选中
// 提交给后台数据: ck=ppqiu&ck=zqiu
篮球<input type="checkbox" value="lqiu" v-model="val" name="ck">
足球<input type="checkbox" value="zqiu" v-model="val" name="ck">
乒乓球<input type="checkbox" value="ppqiu" v-model="val" name="ck">

// 多个单选框
// v-model绑定的是同一个变量
// 该变量的值为每个单选框的value值,那么该单选框默认选中 eg: val: famale => 女单选框默认选中
// 提交给后台数据: sex=famale
男:<input type="radio" value="male" v-model="val" name="sex">
女:<input type="radio" value="famale" v-model="val" name="sex">

三、条件渲染指令

v-show

<div v-show="isShow"></div>

// 变量isShow值为true(显示,display: block)|false(隐藏,display: none)

v-if

<div v-if="isShow"></div>

// 变量isShow值为true(显示,渲染到页面)|false(隐藏,不渲染到页面)

v-if v-else-if v-else

<div v-if="tag == 0" key="0"></div>
<div v-else-if="tag == 1" key="1"></div>
<div v-else="tag == 2" key="2"></div> 

// v-else逻辑可言省略
// 变量tag取值在0~2之间,可以决定具体渲染那个div
// 全局属性key是为渲染过的分支建立缓存,加快该分支下一次被渲染的速度,key的值具有唯一性

四、列表渲染指令

v-for 遍历数组[]

<ul>
    <li v-for="(n, i) in list" :key="i">value:{{ n }} | index: {{ i }}</li>
</ul>
// list为提供的数组数据
// n为遍历的数组元素值,i为遍历的元素索引
// key是为遍历建立缓存,采用变量赋值,所以通过v-bind:指令操作
<script>
new Vue({
    el: "#app",
    data: {
        list: [1, 2, 3, 4, 5],
    }
})
</script>

v-for 遍历对象

<ul>
    <li v-for="(v, k, i) in dic" :key="k">value:{{ v }} | key:{{ k }} | index: {{ i }}</li>
</ul>
// dic为提供的对象(字典)数据
// v为遍历的对象值,k为对象值的键,i为对象值的索引
// key是为遍历建立缓存,采用变量赋值,所以通过v-bind:指令操作
<script>
new Vue({
    el: "#app",
    data: {
        dic: {
            name: '张三',
            age: 18,
            gender: '男'
        }
    }
})
</script>

遍历的嵌套

<div v-for="(person, index) in persons" :key="index" style="height: 21px;">
    <div v-for="(v, k) in person" :key="k" style="float: left;">{{ k }} : {{ v }}&nbsp;&nbsp;&nbsp;</div>
</div>

<script>
new Vue({
    el: "#app",
    data: {
        persons: [
            {name: "zero", age: 8},
            {name: "egon", age: 78},
            {name: "liuXX", age: 77},
            {name: "yXX", age: 38}
        ]
    }
})
</script>