三、双向数据绑定
v-model指令能轻松实现表单输入和应用状态之间的双向绑定
v-model ="变量"
一般多用于表单获取和设置数据
<body> <div id="app"> <form action=""> <input type="text" v-model="person.name"> <input type="text" v-model="person.age"> <select v-model="person.love"> <option value="eat">吃</option> <option value="he">喝</option> </select> <input type="radio" v-model="person.sex" value="1">男 <input type="radio" v-model="person.sex" value="2">女 </form> </div> </body> <script> var app = new Vue({ el: '#app', // 用于指定当前vue实例为哪个容器使用，值为css选择器字符串 data(){// 用于储存数据，数据供el指定的容器使用 return{ person:{ name:"小美", age:19, love:"eat", sex:2, }, } }, }); </script>
事件绑定
事件绑定v-on:事件名="表达式||函数名" 简写 @事件名="表达式||函数名"
事件名可以是原生也可以是自定义的。注意函数的定义也要在Vue中，采用methods属性
在事件对应的方法中获取到事件对象
不加括号
<body> <div id="app"> <button @click="fun1" >点击获取事件对象</button> </div> </body> <script> var app = new Vue({ el: '#app', methods:{ fun1(event){ console.log(event.target); }, }, }); </script>
加括号，加括号一般是需要有额外参数的情况
<body> <div id="app"> <button @click="fun2($event,'其他参数')" >点击获取事件对象(带括号)</button> </div> </body> <script> var app = new Vue({ el: '#app', methods:{ fun2(evnet, arg){ console.log(event.target,arg); }, }, }); </script>
事件修饰符
阻止冒泡
冒泡发生的情景：子元素和父元素绑定了相同的事件，然后点击了子元素，父元素也触发了该事件
使用原生js阻止冒泡
<body> <div id="app"> <div @click="fun3"> 外层div <div @click="fun3">里层div</div> </div> </div> </body> <script> var app = new Vue({ el: '#app', methods:{ fun3(event){ console.log(event.target); event.stopPropagation(); // 使用原生js阻止冒泡 }, }, }); </script>
使用vue事件的修饰符阻止冒泡
<body> <div id="app"> <div @click="fun4"> 外层div <div @click.stop="fun4">里层div</div> </div> </div> </body> <script> var app = new Vue({ el: '#app', methods:{ fun4(event){ console.log(event.target); }, }, }); </script>
阻止默认行为
有些标签是由默认行为的，比如a标签，有个默认的页面跳转。
使用原生js阻止冒泡
<body> <div id="app"> <a href="http://www.baidu.com" @click="fun5">百度</a> </div> </body> <script> var app = new Vue({ el: '#app', methods:{ fun5(event){ console.log(event.target); event.preventDefault(); // 使用原生js阻止默认行为 }, }, }); </script>
使用vue事件的修饰符阻止冒泡
<body> <div id="app"> <a href="http://www.baidu.com" @click.prevent="fun6">百度</a> </div> </body> <script> var app = new Vue({ el: '#app', methods:{ fun6(event){ console.log(event.target); }, }, }); </script>
一次事件
此事件只会执行一次，第二次点击无效
<div @click.once="fun7">一次事件</div>
键盘事件修饰符
键盘事件修饰符，主要筛选输入特定字符才触发。
<body> <div id="app"> <!-- 13表示是输入enter，起的keycode值可以查询 --> <input type="text" @keyup.13="change"> </div> </body> <script> var app = new Vue({ el: '#app', methods:{ change(event){ console.log(event.key,event.keyCode); }, }, }); </script>
