2017-3-29 VUE

指令归纳总结

1、v-if :可以完全根据表达式的值在DOM中生成或者移除一个元素。如果v-if表达式赋值为false,对应的元素就会从DOM中移除。如果需要切换多个元素,把<template>元素当作包装元素,并使用v-if,最终的渲染结果不会包含它。

<div id="example">
        <template v-if="ok">
            <h1>A</h1>
            <p>B</p>
            <p>C</p>
        </template>
    </div>
    <script>
    var exampleVM2 = new Vue ({
        el:'#example',
        data: {
            ok:true
        }
    })
    </script>

2、v-show :根据表达式的值来显示或者隐藏HTML元素。当v-show赋值为false时,元素将被隐藏,并且元素增加一个内联样式style="display:none"。v-show不支持<template>语法。

<input type="text" name="" v-model="message" placeholder="edit me">
    <div id="example">
        <p v-show="ok">HEllo</p>
    </div>
    <script>
        var exampleVM2 = new Vue({
            el:'#example',
            data: {
                ok:false
            }
        })
    </script>

一般来说,v-if更高的切换消耗,而v-show有更高的初始渲染消耗,因此需要频繁地切换,使用v-show,在运行条件不大可能改变时,使用v-if。

3、v-else:必须跟着v-if或者v-show,充当else功能。

<div id="example">
        <p v-if="ok">yes</p>
        <p v-else="ok">no</p>
    </div>
    <script>
        var exampleVM2 = new Vue ({
            el:'#example',
            data: {
                ok:'false'
            }
        })
    </script>

4、v-model:用来在input、select、text、checkbox
、radio等表单控件元素上创建双向数据绑定。

<form id="example">
    姓名:
        <input type="text" name="" v-model="data.name" placeholder="">
        <br>
  性别:
  <input type="radio" name="" id="man" value="One" v-model="data.sex">
  <label for="man">男</label>
    <input type="radio" name="" id="male" value="Two" v-model="data.sex">
    <label for="male">女</label>
    <br>
    兴趣:
  <input type="checkbox" id="book" value="book" name="" v-model="data.interest">
    <label for="book">阅读</label>
    <input type="checkbox" id="swim" value="swim" name="" v-model="data.interest"> 
    <label for="swim">游泳</label>
    <input type="checkbox" id="game" value="game" name="" v-model="data.interest">
    <label for="game">游戏</label>
    <input type="checkbox" id="song" value="song" name="" v-model="data.interest">
    <label for="song">唱歌</label>
    身份:
    <select v-model="data.job">
        <option value="teacher">教师</option>
        <option value="doctor">医生</option>
        <option value="police">警察</option>
    </select>
    </form>
    <script>
        new Vue ({
            el:'#example',
            data: {
                    data: {
                        name:"",
                        sex:"",
                        interest:[],
                        job:''
                    }
                }
            }
        })
    </script>

v-model后面可以添加多个参数(number、lazy、debounce)

<div id="example">
    <input type="text" name="" v-model="msg" lazy>
    {{msg}}
 </div>
    <script>
        var Vue({
            el:'#example',
            data: {
                msg: 'change事件之后改变'
            }
        })
    </script>
<div id="example">
    <input type="text" name="" v-model="msg" debounce=""5000>
    {{msg}}
 </div>
    <script>
        var Vue({
            el:'#example',
            data: {
                msg: '5000s之后改变'
            }
        })
    </script>

5、v-for : 基于源数据重复渲染元素

(1)可以使用$index来呈现相对应的数组索引。v-for需要特殊的别名,形式为“item in items”,(item是数据数组,item是当前数组元素的别名)。

(2)v-for遍历一个对象,每一个重复的实例都将有一个特殊的属性$Key,或者给对象的键值提供一个别名。

<div id="example">
     <ul id="repeat-object">
        <li v-for="value in primitiveValues">{{ $key }} : {{ value }}</li>
        <li>---------</li>
        <li v-for="( key, item ) in objectValues">{{ key }} : {{ item.msg }}</li>
     </ul>
    </div>
    <script>
        var demo = new Vue ({
            el:'#repeat-object',
            data: {
                primitiveValues: {
                    FirstName: 'A',
                    LastName: 'a',
                    Age: 10
                },
                objectValues: {
                    one: {
                        msg: 'Hello'
                    },
                    two: {
                        msg: 'World'
                    }
                }
            }
        })
    </script>

(3)v-for支持整数

<div id="range">
        <div v-for="n in 10">整数:{{ $index }}</div>
    </div>

6、v-text :可以更新元素的textContent,在内部,{{ Mustache }}插值也被编译为textNode的一个v-text指令。

<span v-text="msg"></span>
<br>
<span>{{ msg }}</span>

7、v-bind:用于响应更新HTML特性,将一个或多个attribute,或者一个组件prop动态绑定到表达式。

(1)绑定class或者style,支持其他类型的值。

<div id="example">
        <div : class = "[ classA , { classB:isB , classC:isC }]"></div>
    </div>
    <script>
        var demo = new Vue ({
            el:'#example',
            data: {
                classA: 'A',
                isB: false,
                isC: true
            }
        })
    </script>

(2)没有参数时,可以绑定到一个对象,此时的class和style绑定不支持数组和对象(key会转换成小写)。

<div id="example">
        <div v-bind="{ id:someProp, 'OTHERAttr': otherProp }"></div>
    </div>
    <script>
        var exampleVM2 = new Vue ({
            el:'#example',
            data: {
                someProp: 'idName',
                otherProp: 'prop'
            }
        })
    </script>

8、v-on : 用于绑定事件监听器,类型由参数指定。

<!--方法处理器-->
<button v-on:click="doThis"></button>
<!--内联语句-->
<button v-on:click="doThat('hello',$event)"></button>
<!--缩写-->
<button @click="doThis"></button>

后面可以增加修饰符:

  • .stop —— 调用event.stopPropagation()。
  • .prevent —— 调用event.preventDefault()。
  • .capture —— 添加事件侦听器时使用capture模式。
  • .self —— 只当事件是从侦听器绑定的元素本身触发时才会出发回调。

9、v-pre : 编译时跳过当前元素和它的子元素。

自定义指令

1、指令实例属性
el:指令绑定的元素。
vm:拥有该指令的上下文ViewModel
expression:指令的表达式,不包括参数和过滤器。
arg:指令的参数。
name:指令的名字。
modifiers:一个对象,包含指令的修饰符。
descriptor:一个对象,包含指令的解析结果。

 <div id="example" @click="up" >
    <div id="demo" v-demo:hello.a.b="msg">
    </div>
 </div>
 <script>
    Vue.directive('demo',{
        bind: function(){
            console.log('demo bound');
        },
        update: function(value){
            this.el.innerHTML = 
            'name - ' + this.name + '<br>' + 'expression - ' + this.expression + '<br>' + 'argument - ' + this.arg + '<br>' + 'modifiers - ' + JSON.stringify(this.modifiers) + '<br>' + 'value - ' + value + '<br>' + 'vm-msg' + this.vm.msg
        }
    })
    var demo = new Vue ({
        el:'#example',
        data: {
            msg: 'hello'
        },
        methods: {
            up: function() {
                console.info("click");
            }
        }
    })
 </script>

推荐阅读更多精彩内容