vue实例分例：
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();
实例16：
<div id="app16">
<div class="title">(16) app16-内联处理器中的方法</div>
<button v-on:click="say('hi')">say hi</button>
<button v-on:click="say('what')">say what</button>
<div>如需在内联语句处理器中访问原始dom事件，可用特殊变量$event将其传入方法</div>
<button v-on:click="warn('form cannot be submitted',$event)">Submit</button>
</div>
var app16 = 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>
<!-- 添加事件监听器时使用事件捕获模式，即元素自身触发的事件先在此处理，然后再交由内部元素处理 -->
<div v-on:click.capture="doThis"></div>
<!-- 只当在event.target是当前元素自身时处理触发函数，即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件只触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- .passive滚动事件的默认行为将立即触发而不会等待onScroll完成,能提升移动端的性能 -->
<div v-on:scoll.passive="onScroll">...</div>
<!-- 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self
会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。 -->
<!-- 不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示
一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。 -->
</div>
实例18：
<div id="app18">
<div class="title">(18) app17-按键修饰符</div>
<!-- 只有在key为enter时调用vm.submit() -->
<input v-on:keyup.enter="submit">
<input v-on:keyup.page-down="onPageDown">
<!-- 按键码 -->
<input v-on:keyup.13="submit">
</div>
实例19：
<div id="app19" class="common">
<div class="title">(19) app19-表单操作</div>
<div class="parting-line">
<div>input:</div>
<input v-model="msg" placeholder="edit" />
<p>msg:{{msg}}</p>
</div>
<div class="parting-line">
<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>值绑定</div>
<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">
<!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
<select v-model="selected">
<option value="abc">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'
}
})
参考 & 感谢：vue官网 & 各路大神