Vue指令

文本指令

　<!-- 插值表达式 -->
    <p>{{ msg }}</p>

    <!-- eg:原文本会被msg替换 -->
    <p v-text='msg'>原文本</p>

    <!-- 可以解析带html标签的文本信息 -->
    <p v-html='msg'></p>

    <!-- v-once控制的标签只能被赋值一次 -->
    <p v-once>{{ msg }}</p>

 

斗篷指令

[v-cloak] { display: none; } //放在style中

 

属性指令

　　<!-- 给自定义全局属性绑定变量 -->

　　<p v-bind:abc="abc"></p>

 

　　<!-- 以原字符串形式绑定全局属性 -->
　　<p v-bind:title="'abc'"></p>

 

　　<!-- 单类名绑定 -->
　　<p v-bind:class="c1"></p>

 

　　<!-- 多类名绑定 -->
　　<p v-bind:class="[c2, c3]"></p>

 

　　<!-- 类名状态绑定 -->
　　<p v-bind:class="{c4: true|false|var}"></p>

 

　　<!-- 多类名状态绑定 -->
　　<p v-bind:class="[{c5: true}, {c6: flase}]"></p>

 

　　<!-- 样式绑定 -->
　　<div :style="div_style"></div>
　　<div :style="{width: '100px', height: '100px', backgroundColor: 'blue'}"></div>
　　<script type="text/javascript">
 　　new Vue({
 　　 el:"#app",
 　　 data: {
       　　     abc: "abc",
        　　    c1: "p1",
        　　    c2: "p2",
         　　   c3: "p3",
  　  div_style: {
    　　 width: "200px",
   　　  height: "200px",
   　　  backgroundColor: "cyan"
  　　 }
 　　 }
 　　})
　　</script>
　　<!-- v-bind: 指令可以简写为 : -->

 

 

事件指令

　　<!-- v-on: 指令 简写 @ -->
　　<!-- 不传参事件绑定，但事件回调方法可以获取事件对象 -->
　　<p @click="fn"></p>
　　<!-- ()可以传入具体实参 -->
　　<p @click="fn()"></p>
　　<!-- ()情况下，事件对象应该显式传入 -->
　　<p @click="fn($event)"></p>

 

表单指令

        <div id="app">
            <!-- v-model针对于表单元素 -->
            <form action="" method="get">
                <!-- 1、双向绑定：服务于文本输入框 -->
                <!-- v-model存储的值为输入框的value值 -->
                <div>
                    <input type="text" name="usr" v-model="in_val">
                    <input type="password" name="ps" v-model="in_val" >
                    <textarea name="info" v-model="in_val"></textarea>
                </div>

                <!-- 2、单选框 -->
                <div>
                    <!-- 单选框是以name进行分组，同组中只能发生单选 -->
                    <!-- v-model存储的值为单选框的value值 -->
                    男：<input type="radio" name="sex" value="男" v-model="ra_val">
                    女：<input type="radio" name="sex" value="女" v-model="ra_val">
                    {{ ra_val }}
                </div>

                <!-- 3、单一复选框 -->
                <!-- v-model存储的值为true|false -->
                <!-- 或者为自定义替换的值 -->
                <div>
                    <input type="checkbox" v-model='sin_val' true-value="选中" false-value="未选中" />
                    {{ sin_val }}
                </div>

                <!-- 4、多复选框 -->
                <!-- v-model存储的值为存储值多复选框value的数组 -->
                <div>
                    <input type="checkbox" value="喜好男的" name="cless" v-model='more_val' />
                    <input type="checkbox" value="喜好女的" name="cless" v-model='more_val' />
                    <input type="checkbox" value="不挑" name="cless" v-model='more_val' />
                    {{ more_val }}
                </div>
            </form>
        </div>

        <script type="text/javascript">
            new Vue({
                el: '#app',
                data: {
                    in_val: '',
                    // 默认值可以决定单选框默认选项
                    ra_val: '男',
                    // 默认值为true，单一复选框为选中，反之false为不选中
                    sin_val: '',
                    // 数组中存在的值对应的复选框默认为选中状态
                    more_val: ['喜好女的','不挑']
                }
            })
        </script>

 

 

条件指令

 

    <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对应的缓存,提高下一次渲染速度 -->

 

        <!-- v-show 案例 -->
        <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>
    <script type="text/javascript">
        new Vue({
            el: "#app",
            data: {
                isShow: false,
                tag: 0,
                flag: 0
            },
            methods: {
                toggle () {
                    this.isShow = !this.isShow;
                },
                changeWrap (num) {
                    this.tag = num;
                },
                changeMain (num) {
                    // this.flag num
                    this.flag = num;
                },
                whoShow (num) {
                    // this.flag num
                    return this.flag == num;
                }
            }
        })
    </script>

 

 

 

循环指令

 

    <div id="app">
        <h1>{{ msg }}</h1>
        <!-- v-for="item in items" -->
        <!-- 遍历的对象: 数组[] 对象(字典){} -->
        <ul>
            <li>{{ list[0] }}</li>
            <li>{{ list[1] }}</li>
            <li>{{ list[2] }}</li>
            <li>{{ list[3] }}</li>
            <li>{{ list[4] }}</li>
        </ul>

        <!-- n为遍历的元素值 -->
        <ul>
            <li v-for="n in list">{{ n }}</li>
        </ul>

        <!-- 一般列表渲染需要建立缓存 -->
        <!-- 列表渲染是循环,需要赋值变量给key,使用key需要v-bind:处理 -->
        <!-- v-for变量数组[]时,接收两个值时,第一个为元素值,第二个为元素索引 -->
        <ul>
            <li v-for="(n, i) in list" :key="i">value:{{ n }} | index: {{ i }}</li>
        </ul>

        <ul>
            <li>{{ dic['name'] }}</li>
            <li>{{ dic.age }}</li>
            <li>{{ dic.gender }}</li>
        </ul>

        <!-- v-for变量对象{}时,接收三个值时,第一个为元素值,第二个为元素键,第三个为元素索引 -->
        <ul>
            <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>
    <script type="text/javascript">
        new Vue({
            el: "#app",
            data: {
                msg: "列表渲染",
                list: [1, 2, 3, 4, 5],
                dic: {
                    name: 'zero',
                    age: 88888,
                    gender: 'god'
                },
                persons: [
                    {name: "zero", age: 8},
                    {name: "egon", age: 78},
                    {name: "liuXX", age: 77},
                    {name: "yXX", age: 38}
                ]
            }
        })
    </script>