表单控件元素checkbox

获取checkbox值

    
    <input type="checkbox" id="check" v-model="check">
    <label for="check">{{check}} </label>
        
    

获取一组checkbox的值

    
    <input type="checkbox" id="play" value="play" v-model="checks">
    <input type="checkbox" id="join" value="join" v-model="checks">
    <input type="checkbox" id="think" value="think"  v-model="checks">
    {{checks}}
        
    

表单控件元素radio

获取radio的值

    
    <input type="radio" value="first" v-model="radio">
    <input type="radio" value="second" v-model="radio">
    {{radio}}
        
    

表单控件元素select

下拉菜单的获取值

    
    <select v-model="selected">
    <option value="4" selected>A</option>
    <option value="5">b</option>
    <option value="6">c</option>
    </select>
    {{selected}}
    
    

下拉菜单的多选

    <select v-model="selects" multiple>
    <option value="4" selected>A</option>
    <option value="5">b</option>
    <option value="6">c</option>
    </select>
    {{selects}}

动态获取下拉菜单数据

    <select v-model="name">
    <!--绑定value 到 Vue 实例的一个动态属性-->
    <option v-for="a in ary" :value="a.value">{{a.name}}</option>
    </select>

表单元素参数特性

lazy 将input改变为change

    <input type="text" v-model="data" lazy>
    {{data}}

延时数据改变时间

    <input type="text" v-model="data" debounce="500">
    

在使用 debounce 时应当用 vm.$watch();

组件

使用方法Vue.component(tag, constructor)

    
    var com = Vue.extend({
    template:'<div>hello world</div>'
    })
    Vue.component('my',com);
    var vm = new Vue({
    el:"##app"
    });
    

要先注册组件再创造实例

components

多个组件

    var Child = Vue.extend({
    template:'****'
    });
    var Parent = Vue.extend({
    template: '...<my-component></my-component>',
    components: {
    //<my-component> 只能用在父组件模板内
    'my-component': Child
    }
    });
    Vue.component('parent',Parent);

语法糖

    Vue.component('parent',{
    template:'<div>Hello</div><child></child>',
    components: {
    'child': {
    template:'<div>world</div>'
    }
    }
    });