v-model
使用范围 input,textarea,select
三个属性
v-model.trim=" " 去除输入内容的空格
lazy 输入内容不会及时跟新变量的值，在其绑定的标签失去焦点后跟新
number 将输入数字转为其数字类型
input 实例
//main.js:
var app=new Vue({
el:'#app',
data:{
name:'1111'，
sex:'female', //默认选中值为female的
sex1:['female','male'], //默认两个选中
article:'sdsfffasssadsfsddsafssddffgfa',
city:'1',
city1:['1','2']
}
methods:{
onEnter:function(){
console.log('enter')
}
onLeave:function(){console.log('leave')}
onclick:function(){
.....
}
onKeyup:function(){
...
}
}
})
<!--html:-->
<div id="app">
<input type="text" v-model="name">
<span>{{name}}</span>
<button v-on="{mouseenter:onEnter,mouseleave:onLeave}" @click="onClick">
</button>
<form @submit="onSubmit" @keyup.enter="onKeyup">
<!--这里v-on：可以用@代替-->
<input type="text">
<input type="button" value="提交">
</form>
<form @submit.prevent="onSubmit" >
<!--提交表单时防止本页面刷新-->
</form>
<!--v-model在其他元素中的应用-->
<!--绑定radio-->
<label>
男
<input v-model="sex" value="male" type="radio">
</label>
<label>
女
<input v-model="sex" value="female" type="radio">
</label>
<!--绑定checkbox-->
<label>
男
<input v-model="sex1" value="male" type="checkbox">
</label>
<label>
女
<input v-model="sex1" value="female" type="checkbox">
</label>
<textarea v-model="article"></textarea>
<!--绑定select-->
<select v-model="city">
<option value="1">南京</option>
<option value="2">盐城</option>
</select>
<select v-model="city1" multiple>
<option value="1">南京</option>
<option value="2">盐城</option>
<option value="3">盐城</option>
<option value="4">盐城</option>
</select>
</div>
component
//mian.js
Vue.component('like',{
template:'<button :class="{a:this.liked}" @click="like_click"> {{like_count}}</button>',
//写html语句多行语句可以使用``包裹起来或写#id，在html页面中加入template标签id=id并写入此地需要的html语句
data:function () {
//data用function初始化可以使每个用此组件的变量重新初始化
return {
like_count:10,
liked:false,
}
},
methods:{
like_click:function () {
if(!this.liked){
this.like_count++;
}else {
this.like_count--;
}
this.liked=!this.liked;
}
}
});
//定义完component需定义域 即new Vue({el:'',})
//component须在域前定义
//定义完可以在html页面中加入<like></like>标签
定义在域外时是全局的component
定义在域内就是局部component，其他域无法使用
new Vue({
el:'#app1',
components:{
//组建名如果是类似like-component的名字需要用''包裹否则会报错，这里是一个单词可以不加
'like':{
template:'',
.....
},
}
})
component父子之间通信
Vue.component('user',{
template:'<a :href="\'/user/\'+username">{{username}}/a>',
props:['username'],
})
new Vue({
el='#a1'
})
<div id="a1">
<usr username="admin"></usr>
</div>
component子父通信
//子
Vue.component('show',{
template:
`<div >
<showbtn @show_balance="show"></showbtn>
<div v-if="balance">
余额为 ￥22222
</div>
</div>`,
//@show_balance这里就能监听父级定义的事件并触发子级的show function
data:function () {
return{
balance:false,
}
},
methods:{
show:function (data) {
//在监听事件中同时能把监听对象的参数带过来
this.balance=true;
console.log(data);
}
}
});
//父
Vue.component('showbtn',{
template: '<button @click="onclick"> 显示余额 </button>',
methods:{
onclick:function () {
this.$emit('show_balance',{a:1,b:2});//emit相当于一个快捷方式用来触发事件
}
}
});
//html 页面中只需加入<show></show>即可拥有父子所定义功能
