Vue 指令篇 案例(输入提交显示 提交数据_列表)

一.文本操作指令

//1.v-text    
<p v-text="msg"></p>
等价于
<p>{{msg}}</p>

//2.v-html    
//可以解析带html标签的文本信息 
<p v-html='msg'></p>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '<b>文本</b>'
        }
    })
</script>

//3.v-once一次性文本赋值
<p v-once>{{ msg }}</p>

二 避免页面闪烁指令

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

三 关键指令

    <div id="app">
        <!-- v-bind: -->
        
        <!-- v-bind:指令可以简写 : -->
        <p :class="'simple'">简写</p>
        
        <!-- 该指令 绑定 的是属性(html标签的全局属性) -->
        <!-- 绑定后的属性的属性值可以由变量控制 -->
        <p v-bind:abc="abc"></p>
        
        <!-- 绑定后 操作单一变量 -->
        <p v-bind:title="t1">p1p1p1p1p1p1p1</p>
        <!-- 绑定后 操作普通字符串 -->
        <p v-bind:title="'t2'">p2p2p2p2p2p2p2</p>

        <!-- 多类名 单一变量操作 -->
        <p v-bind:class="t3">p3p3p3p3p3p3p3</p>
        <p v-bind:class="[t4, tt4]">p4p4p4p4p4p4</p>

        <!-- 绑定class的{}语法 {key: value} key就是实际的类名,value是该类名的显隐(true就是起作用,false就是不起作用) -->
        <p v-bind:class="{abc: false}">p5p5p5p5p5p5</p>
        <p v-bind:class="{abc: t5}" v-on:click="fn">p5p5p5p5p5p5</p>

        <!-- class的[] {} 结合使用 -->
        <!-- class的值为p6 pp6, t6 tt6是值为true|false的变量,控制p6 pp6是否起作用 -->
        <p v-bind:class="[{p6: t6}, {pp6: tt6}]">p6p6p6p6p6p6p6p6</p>

        <!-- v-bind操作class -->
        <!-- [a, b] a,b为变量,对其赋值的是class的具体值 -->
        <!-- eg: a:active b:red => class="active red" -->

        <!-- {a: b} a为class值, b为值为true|false的变量,控制a的显隐 -->
        <!-- eg: b:true => class="a" -->
        <!-- eg: b:false => class="" -->

        <!-- 操作style -->
        <!-- style一般都是多条样式 -->
        <div :style="div_style"></div>
        <div :style="{ '100px', height: '100px', backgroundColor: 'blue'}"></div>
    </div>

<div id="app">
        <form action="">
            
            <!-- 数据的双向绑定 -->
            <!-- v-model绑定的是value,所以省略 -->
            <input type="text" v-model="val1" name="usr">
            <textarea v-model="val1"></textarea>
            <p v-text="val1"></p>

            <!-- 单一复选框 -->
            <!-- val2值为true|false的变量,控制单选框是否被选中 -->
            <!--  -->
            <input type="checkbox" v-model="val2" name="ck1">
            <!-- val3值为自定义"选中"|"未选中",控制单选框是否被选中 -->
            <!-- 选中状态,提交给后台可以对应的value为on,未选中状态,不向后台提交value值 -->
            <input type="checkbox" v-model='val3' true-value="选中" false-value="未选中" name="ck2" />

            <!-- 多复选框 -->
            <!-- 多个复选框的v-model绑定一个变量 -->
            <!-- 该变量为数组数据,存放的是复选框的value值(value值必须明确) -->
            <!-- 出现在数组中的value值对应的复选框默认为选中状态 -->
            <div>
                篮球<input type="checkbox" value="lq" v-model="val4" name="ck3">
                足球<input type="checkbox" value="zq" v-model="val4" name="ck3">
                乒乓球<input type="checkbox" value="ppq" v-model="val4" name="ck3">
            </div>
            
            <!-- 多单选框 -->
            <!-- 多个单选框的v-model绑定一个变量 -->
            <!-- 变量值为多个单选框中一个的value值,则该单选框为默认选中状态 -->
            <div>
                男:<input type="radio" value="男" v-model='val5' name="sex" />
                女:<input type="radio" value="女" v-model='val5' name="sex" />
            </div>

            <button type="submit">提交</button>
        </form>
    </div>

<div id="app">
    <!-- v-on: 指令 -->
    <p v-on:click='fn1'></p>
    <!-- 简写: @ -->
    <!-- 绑定的是事件,操作的是事件对应的方法名 -->
    <p @click="fn1"></p>
    <!-- 直接绑定方法名,不会携带自定义参数,但回调时能取到事件参数ev -->
    <p @click="fn2"></p>
    <!-- 带()的方法绑定,只传自定义参数,回调时只能取到自定义参数,事件参数ev丢失 -->
    <p @click="fn3(10)"></p>
    <!-- 带()的方法绑定,传入自定义参数同时,显式传入事件$event,回调时可以取到自定义参数及事件参数ev -->
    <p @click="fn4($event, 10, 20)"></p>
    <p @click="fn5(10, $event, 20)"></p>
</div>

四 条件指令

    <div id="app">
        <button @click="toggle">显隐切换</button>
        <!-- v-if -->
        <div class="box r" v-if="isShow"></div>
        <!-- v-show -->
        <div class="box o" v-show="isShow"></div>
        <!-- 1.条件渲染的值为true|false -->
        <!-- 2.true代表标签显示方式渲染 -->
        <!-- 3.false v-if不渲染到页面,v-show以display:none渲染到页面,但也不会显示 -->

        <!-- v-if v-else-if v-else -->
        <ul>
            <li @mouseover="changeWrap(0)">red</li>
            <li @mouseover="changeWrap(1)">green</li>
            <li @mouseover="changeWrap(2)">blue</li>
        </ul>
        <!-- red页面逻辑结构 -->
        <div class="wrap red" v-if="tag == 0" key="0">...</div>
        <!-- green页面逻辑结构 -->
        <div class="wrap green" v-else-if="tag == 1" key="1">...</div>
        <!-- blue页面逻辑结构 -->
        <div class="wrap blue" v-else key="2">...</div>
        <!-- v-if相关分支操作,在未显示情况下,是不会被渲染到页面中 -->
        <!-- 通过key全局属性操作后,渲染过的分支会建立key对应的缓存,提高下一次渲染速度 -->


        <ul>
            <li @mouseover="changeMain(0)">red</li>
            <li @mouseover="changeMain(1)">green</li>
            <li @mouseover="changeMain(2)">blue</li>
        </ul>
        <!-- red页面逻辑结构 -->
        <div class="main red" v-show="whoShow(0)">...</div>
        <!-- green页面逻辑结构 -->
        <div class="main green" v-show="whoShow(1)">...</div>
        <!-- blue页面逻辑结构 -->
        <div class="main blue" v-show="whoShow(2)">...</div>

    </div>

5  循环指令（必须建立缓存:key='' 不然标签有波浪 有错误）

    <div id="app">
        <!-- 列表 -->
        <ul>
        <!-- n为值 -->
            <li v-for="n in list">{{ n }}</li>
        </ul>
        <!-- 一般列表渲染需要建立缓存 -->
        <!-- 列表渲染是循环,需要赋值变量给key,使用key需要v-bind:处理 -->
        <ul>
        <!-- n为值 i为索引  key建立缓存-->
            <li v-for="(n, i) in list" :key="i">value:{{ n }} | index: {{ i }}</li>
        </ul>
        
        
        <!-- 字典-->
        <ul>
        <!--v为值 k为键 i为索引 -->
            <li v-for="(v, k, i) in dic" :key="k">value:{{ v }} | key:{{ k }} | index: {{ i }}</li>
        </ul>

        <!-- 遍历的嵌套 -->
        <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>
    </div>

案例

<body>
    <div id="app">
        <div>
            <input type="text" v-model="val">
            <button type="button" @click="submitMsg">提交</button>
        </div>
        <ul>
            <li v-for="(v, i) in list" :key="i" @click="removeMsg(i)">{{ v }}</li>
        </ul>
        {{ list }}
    </div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            val: "",
            list: []
        },
        methods: {
            submitMsg () {
                // 往list中添加input框中的value
                if (this.val) {
                    this.list.push(this.val);
                    this.val = ""
                }
            },
            removeMsg(index) {
                this.list.splice(index, 1)
            }
        }
    })
</script>