VUE的总结(2)

用到的代码： https://github.com/liyang1234...vue.js API传送门： https://cn.vuejs.org/v2/api/v-on指令<!DOCTYPE html><html lang=“en”><head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <meta http-equiv=“X-UA-Compatible” content=“ie=edge”> <title>v-on指令</title></head><body> <div id=“app”> <button v-on:click=“clickhandler”>btn</button> </div> <script src=“vue.min.js”></script> <script> let vm = new Vue({ el: ‘#app’, data: {}, methods: { clickhandler(){ console.log(Math.random()); } } }); </script></body></html>点击按钮产生了随机数，v-on：可以用@代替。点击按钮，数字自增 <div id=“app”> <button v-on:click=“clickhandler”>btn</button> <h1>{{num}}</h1> </div> <script src=“vue.min.js”></script> <script> let vm = new Vue({ el: ‘#app’, data: { num: 0 }, methods: { clickhandler(){ this. num++; } } }); </script>点击按钮数字增加但是有时候我们是要传参数的<div id=“app”> <button v-on:click=“clickhandler(2)">btn</button> <!– 相当于函数调用 2是实参 –> <h1 v-text=“num”></h1></div><script src=“vue.min.js”></script><script> let vm = new Vue({ el: ‘#app’, data: { num: 0 }, methods: {//相当于函数声明 clickhandler(n){ this. num += n; } } });</script>这样就是每点击一次增加2获取事件源用$event<div id=“app”> <button v-on:click=“clickhandler(2,$event)">btn</button> <!– 相当于函数调用 2是实参 –> <h1 v-text=“num”></h1></div><script src=“vue.min.js”></script><script> let vm = new Vue({ el: ‘#app’, data: { num: 0 }, methods: {//相当于函数声明 clickhandler(n,e){ this. num += n; console.log(e); } } });</script>可以在按钮上绑定多个事件<div id=“app”> <button v-on:click=“clickhandler(2,$event)">btn</button> <!– 相当于函数调用 2是实参 –> <h1 v-text=“num”></h1> <button v-on="{mousedown: doThis, mouseup: doThat}">btn2</button></div><script src=“vue.min.js”></script><script> let vm = new Vue({ el: ‘#app’, data: { num: 0 }, methods: {//相当于函数声明 clickhandler(n,e){ this. num += n; console.log(e); }, doThis(e){ console.log(‘doThis’); }, doThat(e){ console.log(‘doThat’); } } });</script>按下鼠标输出doThis 放开鼠标输出doThat冒泡<style> #div1{ width: 400px; height: 400px; background: red; } #div2{ width: 200px; height: 200px; background: green; }</style></head><body><div id=“app”> <button v-on:click=“clickhandler(2,$event)">btn</button> <!– 相当于函数调用 2是实参 –> <h1 v-text=“num”></h1> <button v-on="{mousedown: doThis, mouseup: doThat}">btn2</button> <div id=“div1” @click=“clickDiv1”> <div id=“div2” @click=“clickDiv2”></div> </div></div><script src=“vue.min.js”></script><script> let vm = new Vue({ el: ‘#app’, data: { num: 0 }, methods: {//相当于函数声明 clickhandler(n,e){ this. num += n; console.log(e); }, doThis(e){ console.log(‘doThis’); }, doThat(e){ console.log(‘doThat’); }, clickDiv1(){ console.log(‘div1’); }, clickDiv2(){ console.log(‘div2’); } } });</script>点击div2 再点击div1先捕获后冒泡，冒泡从里往外，先输出div2，再输出div1。阻止冒泡<div id=“div1” @click=“clickDiv1”> <div id=“div2” @click=“clickDiv2($event)"></div></div>clickDiv1(){ console.log(‘div1’); },clickDiv2(e){ console.log(‘div2’); e.stopPropagation(); }点击div2,只输出div2使用vue的方法 @click.stop<div id=“div1” @click=“clickDiv1”> <div id=“div2” @click.stop=“clickDiv2($event)"></div></div>clickDiv1(){ console.log(‘div1’); },clickDiv2(e){ console.log(‘div2’); }同样可以阻止冒泡阻止浏览器默认行为baidu点击超链接会默认跳转到百度网页，<a href=“http://www.baidu.com” @click=“baidu($event)">baidu</a>baidu(e){ e.preventDefault(); }点击超链接之后不会跳转了 vue提供的修饰符 .prevent<a href=“http://www.baidu.com” @click.prevent=“baidu($event)">baidu</a>同样能阻止默认行为两个修饰符可以连着写<a href=“http://www.baidu.com” @click.stop.prevent=“baidu($event)">baidu</a><input type=“text” @keyup=“keyuphandler($event)">keyuphandler(e){ if(e.keyCode == 13){//13是回车 console.log(‘hahahahh’); }}当在输入框中按回车键时，输出一串。。。keyCode总结：https://www.cnblogs.com/daysm….once修饰符表示只能一次<button v-on:click.once=“clickhandler(2,$event)">btn</button>按钮只能点击一次v-model指令原理 <div id=“app”> 用户名: <input type=“text” v-model=“username”> <h4>用户名是：{{username}}</h4> </div> <script src=vue.min.js></script> <script> new Vue({ el: ‘#app’, data: { username: ’’ } }); </script>input框里输入什么就显示什么原理:<input>相当于View层，通过v-model绑定上data里面的username,将数据自动同步到Model层,双花括号将两者联系起来，Model层将数据同步到“用户名是：”的View层，这就是双向数据绑定。v-model只限制于能使用的标签：<input><select><textarea>v-model自动将radio设成单选性别: <input type=“radio”>男 <input type=“radio”>女现在是单选框可以多选性别: <input type=“radio” name=“sex”>男<input type=“radio” name=“sex”>女添加name属性可以实现单选现在用v-model试一下性别: <input type=“radio” value=“男” v-model=“sex”>男<input type=“radio” value=“女” v-model=“sex”>女<h4>用户的性别是:{{sex}}</h4>后台接收数据接的是value 多选框爱好:<input type=“checkbox” value=“篮球” v-model=“hobbys”>篮球 <input type=“checkbox” value=“足球” v-model=“hobbys”>足球 <input type=“checkbox” value=“排球” v-model=“hobbys”>排球 <h4>用户的爱好是:{{hobbys}}</h4>data: { hobbys:[] } 下拉列表公司:<select name=”” id=”” v-model=“company”> <option value=“百度”>百度</option> <option value=“百度”>阿里巴巴</option> <option value=“百度”>腾讯</option> </select><h4>用户的公司是:{{company}}</h4>data:{ company:’ ’ }textarea <textarea value=“自我介绍” cols=“30” rows=“10” id=”” v-model=“description”></textarea> <h4>我的描述是：{{description}}</h4> data: { description:’’ } 几个修饰符.lazy 当鼠标挪出input框的时候才回显用户名: <input type=“text” v-model=“username”> <h4>用户名是：{{username}}</h4> 用户名lazy: <input type=“text” v-model.lazy=“username”> <h4>用户名是：{{username}}</h4>.number 年龄:<input type=“text” v-model=“age”> <h4>用户的年龄是:{{age}}</h4>得到的数据类型是 string 年龄:<input type=“text” v-model.number=“age”> <h4>用户的年龄是:{{age}}</h4>得到的数据类型是 number将type改成number,输入框可以有增加减少功能年龄:<input type=“number” v-model.number=“age”> <h4>用户的年龄是:{{age}}</h4>.trim去掉首尾空格用户名trim: <input type=“text” v-model.trim=“username”> <h4>用户名是：{{username}}</h4>v-bind绑定属性<body><div id=“app”> <img src=“imgSrc” alt=”"></div><script src=“vue.min.js”></script><script> new Vue({ el: ‘#app’, data: { imgSrc: ‘https://cn.vuejs.org/images/logo.png' } });想把ImgSrc的地址作为img标签中的图片，但是会报错：<img v-bind:src=“imgSrc” alt=”">OK了v-bind的简写形式是冒号:小例子 .aa{ width: 100px; height: 100px; background: #F00; } <div class=“aa”></div> .aa{ width: 100px; height: 100px; background: #F00; }v-bind的方式 .aa{ width: 100px; height: 100px; background: #F00; } <div :class=“className”></div> data:{ className:‘aa’ } 值控制是否显示 .aa{ width: 100px; height: 100px; background: #F00; } <div :class=“className”></div> <div :class="{aa:isAA}"></div> data:{ isAA: true }意思是样式显示取决于isAA是否为true样式写在对象中<div :style=“styleObj”></div> styleObj: { width: ‘100px’, height: ‘100px’, background: ‘#0f0’ }其他指令v-pre指令原样输出<body><div id=“app”> <h1>{{msg}}</h1></div><script src=“vue.min.js”></script><script> new Vue({ el: ‘#app’, data: { msg: ‘Hello’ } });</script><h1 v-pre>{{msg}}</h1>v-cloak指令渲染完成后显示v-once只渲染一次