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' } })