Vue学习04

【表单】

指令：v-model

--html

<input v-model="message" placeholder="edit me">

<p>Message is: {{ message }}</p>

#单个复选框

--html

<input type="checkbox" id="checkbox" v-model="checked">

<label for="checkbox">{{ checked }}</label>

--view

▢false

#多个复选框

<input type="checkbox" id="jack" value="jack" v-model="checkedNames">

<label for="jack">Jack</label>

<input type="checkbox" id="john" value="John" v-model="checkedNames">

<label for="john">John</label>

<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">

<label for="Mike">Mike</label>

<br>

<span>Checked names: {{ checkedNames }}</span>

--js

new Vue({

    el:'...'

    data{

        checkedNames:[]

    }

})

--view

▢Jack ▢John ▢Mike

Checked names:[]

#单选按钮

--html 

<div id="example-4">

    <input type="radio" id="one" value="One" v-model="picked">

    <label for="one">One</label>

    <br>

    <input type="radio" id="two" value="Two" v-model="picked">

    <label for="two">Two</label>

    <br>

    <span>Picked:{{ picked }}</span>

</div>

--js

new Vue({

    el:"example-4",

    data:{

        picked:''

    }

})

--view

◯ One

◯ Two

#选择框

--html

<div id="example-5">

    <select v-model="selected">

    <option disabled value="">请选择</option>

    <option>A</option>

    <option>B</option>

    <optiion>C</option>

    </select>

    <span>Selected:{{ selected }} </span>

</div>

--js

new Vue({

    el:'...',

    data:{

        selected:''

    }    

}）

//多选

--html

<select v-model="seleted" multiple style="50p;">

--js

selected:[]

#用 v-for 渲染的动态选项

--html

<select v-model="seleted">

    <option v-for="option in options" v-bind:value="option.value">

    {{ option.text }}

    </option>

</select>

<span>Seleted:{{ selected }}</span>

--js

new Vue({

    el:'...',

    data:{

        seleted:'A',

        options:[

            { text: 'One',value:'A'},

            { text: 'Two, value:'B'},

            { text: 'Three',value:'C'}

        ]

    }

})

#修饰符

.lazy：在 change 时而非 input 时更新

<input v-model.lazy="msg">

.number：将输入值转换为数值类型，如果值无法被 parseFloat() 解析则会返回原始值

<input v-model.number="age" type="number">

.trim：过滤首尾空白字符

<input v-model.trim="msg">

【组件】

--html

// 定义一个名为 button-counter 的新组件

Vue.component('button-counter',{

    data:function(){

        return{

            count:0

        }

    },

    template:'<button v-on:click="count++">You clicked me {{ count }} times.</button>'

})

组件是可复用的vue 实例，可以把组件作为自定义元素使用

--html

<div id="componets-demo>

    <button-counter></button-counter>

</div>

--js

new Vue({

    el:'#components-demo'

})

# 通过Prop 向子组件传递数据

--js

Vue.component('blog-post',{

    props:['title'],

    template:'<h3>{{ title }}</h3>'

})

--html

<blog-post title="My journey with Vue"></blog-post>

<blog-post title="Blogging with Vue"></blog-post>

<blog-post title="Why Vue is so fun"></blog-post>

--view

My Journey with Vue

Blogging with Vue

Why Vue is so fun 

#基础组件的自动化全局注册

--js

import BaseButton from './BaseButton.vue'

import BaseIcon from './BaseIcon.vue'

import BaseInput from './BaseInput.vue'



export default{

    components:{

        BaeButton,

        BaseIcon,

        BaseInput

    }

}

-- html

<BaseInput

    v-model="searchText"

    @keydown.enter="search"

/>

<BaseButton @click="search">

    <BaseIcon name="search"/>

</BaseButton>

#Prop 验证

--js

Vue.component('my-component',{

    props:{

        //基础的类型检查（null 和 undefined 会通过任何类型验证）

        propA:Number,

        //多个可能的类型

        probB:[String,Number],

        //必填的字符串

        propC:{

            type=String,

            required:true

        },

        //带有默认值的数字

        propD:{

            type=Number,

            default:100

        },

        //带有默认值的对象

        propE:{

            type:Object,

            //对象或数组默认值必须从一个工厂函数获取

            default:function(){

                return{message:'hello'}

            }

        },

        //自定义验证函数

        propF:{

            validator:function(value){

                return['success','warinning','danger'].indexOf(value)!==-1

            }

        }

    }    

}

当prop验证失败，Vue将会产生一个控制台的警告