ps：v-model双向数据绑定
// 二者等价
<input v-model="text">
<input v-bind:value="text" v-on:click="text=$event.target.value">
// 将其value特性绑定到一个名叫value的prop上；在其input事件被触发时将新的值通过自定义的input事件抛出
<custom-input v-model="text"></custom-input>
Vue.component('custom-input', {
props:['value'],
template:`
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
`
})
实例14：监听事件
<div id="app14">
<div class="title">(14) app14-监听事件</div>
<button v-on:click="counter += 1">Add 1</button>
<p>上面按钮被点击了{{counter}}次</p>
</div>
var app14 = new Vue({
el:'#app14',
data:{
counter:0
}
})
实例15：
<div id="app15">
<div class="title">(15) app15-事件处理方法</div>
<button v-on:click="greet">Greet</button>
</div>
var app15 = new Vue({
el:'#app15',
data:{
name:'vue.js'
},
methods:{
greet:function(event){
alert('hello ' + this.name)
if(event){
alert(event.target.tagName)
}
}
}
})
App15.greet ();
Example 16:
<div ID = "app16">
<div class = "title"> (16) app16- method inline processor </ div>
<Button ON-V: = the Click "say ( 'Hi')"> say Hi </ Button>
<Button ON-V: the Click = "say ( 'What')"> What say </ Button>
<div> For inline-statement processing is the access to the original dom events available special variable $ event to be passed to the method </ div>
<the Button v-ON: the Click = "the warn ( 'form CAN not bE submitted', $ event)"> the Submit </ the Button>
< / div>
var = app16 new new Vue ({
EL: '# app16',
Methods: {
say:function(msg){
alert(msg);
},
warn:function(msg,event){
if(event){
event.preventDefault();
}
alert(msg);
}
}
})
实例17：
<div id="app17">
<div class="title">(17) app17-事件修饰符</div>
<!-- vue为v-on提供了事件修饰符 -->
<!-- .stop阻止事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- .prevent提交事件不再重载页面 -->
<form v-on:submit.prevent="doSubmit"></form>
<!-- 修饰符串联 -->
<a v-on:click.stop.prevent="doWhat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<! - use when adding an event listener event capture mode, an event that is triggered by the element itself first in this process, and then handed over to the internal processing elements ->
<div v-ON: click.capture = "doThis"> < / div>
! <- only when it is in the process event.target trigger function when the current element itself, that event is not triggered from internal elements ->
<div v-oN: click.self = "dothat"> ... </ div>
<-! click event is triggered only once ->
<a v-on:click.once="doThis"> </a>
<-! .passive event of default scrolling behavior will not immediately trigger onScroll waits for completion, can improve performance of a mobile terminal ->
<div V-ON: scoll.passive = "onScroll"> ... </ div>
<- when using the modifier, the order is important; the corresponding code! occur in the same order. Therefore, with v-on: click.prevent.self
blocks all clicks and v-on: click.self.prevent will prevent clicks on the element itself. ->
<! - and do not put .passive.
A warning. Remember, .passive tells the browser that you do not want to prevent the default behavior of the event. ->
</ div>
Example 18:
<div id="app18">
<div class="title">(18) app17-按键修饰符</div>
<- invoked only when the key is vm.submit Enter () ->!
<INPUT ON-V: keyup.enter = "Submit">
<INPUT ON-V: keyUp = Down-.page "onPageDown">
<- key code ->!
<INPUT ON-V: keyup.13 = "Submit">
</ div>
example. 19:
<div ID = "app19" class = "Common ">
<div class =" title "> (. 19) app19- form action </ div>
<div class =" Parting-Line ">
<div> INPUT: </ div>
<INPUT = V-Model" MSG "placeholder = "edit" />
<div>textarea:</div>
<span>multiline msg:</span>
<p style="white-space:pre-line;">{{message}}</p>
<br />
<textarea v-model="message" placeholder="mutiple lines"></textarea>
</div>
<div class="parting-line">
<div>checkbox:</div>
<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{checked}}</label>
</div>
<div class="parting-line">
<div>多个复选框，绑定到同一个数组：</div>
<div id="mul-checkbox">
<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>
</div>
</div>
<div class="parting-line">
<div>单选按钮radio</div>
<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>
<div class="parting-line">
<div>选择框select</div>
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>selected:{{selected}}</span>
</div>
<div class="parting-line">
<div>v-for渲染的动态选项</div>
<select v-model="selected1">
<option v-for="option in options" v-bind:value="option.value">
{{option.text}}
</option>
</ SELECT>
<span>selected:{{selected1}}</span>
</div>
<div class = "Parting-Line">
<div> value binding </ div>
<-! When selected, `picked` string of" A "->
<INPUT type =" Radio "Model-V =" the Picked "value =" A ">
<-!` toggle` true or to false ->
<INPUT type = "CheckBox" = V-Model "Toggle">
<-! first elected when an option, `selected` string of" ABC "->
<SELECT = V-Model" Selected ">
<option value =" ABC "> the ABC </ option>
</ SELECT>
</ div>
<div class = "parting-line">
<div>复选框</div>
<input
type="checkbox"
v-model="toggles"
true-value="yes"
false-value="no"
/>
</div>
<div class="parting-line">
<div>修饰符</div>
<!-- 默认情况v-model在每次input事件触发后将输入框的值与数据进行同步，可以通过添加lazy修饰符从而
转变为使用change事件进行同步 -->
<!-- 在change时而非input时更新 -->
<input v-model.lazy="msg">
<!-- 若想自动将用户的输入值转为数值类型，可以给v-model添加number修饰符 -->
<input v-model.number="msg" type="number" />
<!-- 若要自动过滤用户输入的首尾空白字符可以给v-model添加trim修饰符 -->
<input v-model.trim="msg" />
</div>
</div>
var app19 = new Vue({
el:'#app19',
data:{
msg:'fs',
message:'dsdss',
checked:'true',
checkedNames:[],
picked:'',
selected:'',
selected1:'B',
options:[
{text:'One', value:'A'},
{text:'Two', value:'B'},
{text:'Three', value:'C'}
],
picked:'',
toggle:'',
toggles:'yes'
}
})