【表单】
指令：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将会产生一个控制台的警告