【Vue】Re04 指令：第二部分
一、v-on指令
作用是用来将元素绑定事件监听器，触发特定的函数执行一定功能
关键字：事件监听
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <p> <button v-on:click='theTest'>点我触发事件</button></p> <p> <button @click='theTest'>点我触发事件(@缩写语法)</button></p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript"> let vm = new Vue({ el : '#app', data : { aaa : '233' }, methods : { theTest : function ( ) { alert(this.aaa); } } }); </script> </body> </html>
v-on事件绑定的函数中参数传递的问题：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="v"> <!-- 演示事件监听 + 参数执行 --> <button @click="fun01" >按钮01</button> <button @click="fun01()">按钮02</button> <hr> <!-- 带参指向 --> <button @click="fun02(100)">按钮03</button> <button @click="fun02">按钮04</button> <hr> <!-- 打印事件 --> <button @click="fun03(222)">按钮05</button> <button @click="fun03">按钮06</button> <!-- 如果不注入参数调用打印，可以发现是一个事件在这个里面 --> <hr> <!-- 如果存在多个参数 手动获取浏览器事件对象，需要使用$event注入 --> <button @click="fun04($event, 222)">按钮07</button> <button @click="fun04">按钮08</button> <hr> <button>按钮7</button> <button>按钮08</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript"> const v = new Vue({ el : '#v', data : { message : 'Hello', }, methods : { fun01 : function () { console.log('无参调用测试'); }, fun02 : function (val) { console.log('带参调用测试'); }, fun03(abc) { console.log(abc); }, fun04(event, abc) { // Vue默认第一个参数即为事件对象 console.log(event); console.log(abc); } } }); </script> </body> </html>
常用的修饰符使用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="v"> <div @click="function02"> <button @click="function01">testing1</button> </div> <!-- 我们点击按钮，函数01和函数02都会被触发，这样的状况被称为冒泡 --> <hr> <!-- 如果我们希望其中的一个不要被触发,可以使用.stop进行修饰 --> <div @click="function02"> <!-- 对div设置无效 --> the div tag content <button @click.stop="function01">testing2</button> <!-- 例如这里只让div上的事件生效 只要点击按钮才会让函数1生效 --> </div> <hr> <!-- .prevent修饰符用于阻止默认事件的触发 --> <form action="#"> <input type="text" name="username"> <input type="text" name="password"> <input type="submit" @click.prevent="function01" > <!-- 阻止表单提交，更改为使用自定义函数 --> </form> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript"> const v = new Vue({ el : '#v', data : { message : 'sss' }, methods : { function01() { console.log(' function01 -> ' + this.message); }, function02() { console.log(' function02 -> ' + this.message); } } }); </script> </body> </html>
二、v-if、v-else-if、v-else指令
用于条件判断控制元素是否显示出来
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- v-if v-else-if v-else --> <div id="app"> <p> <button @click="changeFlag">点我切换</button> </p> <p v-if="flag" > flag为true则显示此信息</p> <p> <button @click="changeScore">测试v-else-if</button> </p> <!-- 当指令的值符合为true时创建dom进行渲染，否则移除dom元素 --> <p v-if="score == 100">100分</p> <p v-else-if="score == 90">90分</p> <p v-else-if="score == 80">80分</p> <p v-else-if="score == 70">70分</p> <p v-else-if="score == 60">60分</p> <p v-else>不及格</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript"> let vm = new Vue({ el : '#app', data : { flag : true, score : 100 }, methods : { changeFlag : function () { this.flag = !this.flag; }, changeScore : function () { this.score -= 10; } } }); </script> </body> </html>
切换登录凭证的小案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="v"> <p> <span v-if="isUser"> <label for="username">用户名称：</label> <input type="text" id="username" placeholder="用户名称"> </span> <span v-else> <label for="email">邮箱账号：</label> <input type="text" id="email" placeholder="邮箱账号"> </span> <button @click="changeLoginWay" >切换登录方式</button> <button @click="isUser = !isUser" >切换登录方式[简写]</button> </p> </div> <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--> <script src="./../dependencies/vue.js"></script> <script type="text/javascript"> const v = new Vue({ el : '#v', data : { isUser : true }, methods : { changeLoginWay() { this.isUser = !this.isUser; } } }); </script> </body> </html>
解决Input元素复用的问题
我们发现在用户名输入框输入字符时，切换到邮箱账号
发现输入的字符被Vue保存在邮箱账号的输入框中
也许真实的需求中就是希望这样实现
但是一般情况应该是删除清空的
解决办法是使用Key属性作为区分的标识：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="v"> <p> <span v-if="isUser"> <label for="username">用户名称：</label> <input type="text" id="username" placeholder="用户名称" key="username"> </span> <span v-else> <label for="email">邮箱账号：</label> <input type="text" id="email" placeholder="邮箱账号" key="email"> </span> <button @click="changeLoginWay" >切换登录方式</button> <button @click="isUser = !isUser" >切换登录方式[简写]</button> </p> </div> <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--> <script src="./../dependencies/vue.js"></script> <script type="text/javascript"> const v = new Vue({ el : '#v', data : { isUser : true }, methods : { changeLoginWay() { this.isUser = !this.isUser; } } }); </script> </body> </html>
三、v-show指令
决定指令绑定的元素是否需要在页面中显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- v-show是纯粹的v-if --> <div id="app"> <p v-show="!flag"> show this tag 1 </p> <p v-show="100 > 2"> show this tag 2 </p> <p v-show="true == true"> show this tag 3 </p> <p v-show="false == false"> show this tag 4 </p> <p v-show="2 < 1"> show this tag 5 </p> </div> <!-- v-if 和 v-show的区别 虽然二者都是判断条件来实现元素的是否显示在浏览器上 但是： v-if是直接不创建dom元素实现 v-show是创建了dom元素但是使用display:none属性进行了隐藏处理 适用的场景，如果需要频繁的显示隐藏元素的话更适合使用v-show处理 如果使用v-if则需要反复创建dom可能造成内存浪费 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--<script src="./../dependencies/vue-min.js"></script>--> <script type="text/javascript"> let vm = new Vue({ el : '#app', data : { flag : true } }); </script> </body> </html>
注意v-show和v-if的区别：
v-if 和 v-show的区别 虽然二者都是判断条件来实现元素的是否显示在浏览器上
但是： v-if是直接不创建dom元素实现 v-show是创建了dom元素但是使用display:none属性进行了隐藏处理
适用的场景，如果需要频繁的显示隐藏元素的话更适合使用v-show处理
如果使用v-if则需要反复创建dom可能造成内存浪费
四、v-for指令
普通数组遍历
对象属性遍历
对象数组遍历
索引获取，key + value获取
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="v"> <!-- 普通遍历使用 --> <ul> <li v-for="n in names">{{n}}</li> </ul> <!-- 获取索引下标 index, 这里的索引是第二参数即可 --> <ul> <li v-for="(n, i) in names">{{i}} - {{n}}</li> </ul> <!-- 遍历对象的属性和值 --> <ul><!-- 只有一个参数，获取的是值 --> <li v-for="k in obj">{{k}}</li> </ul> <ul><!-- 两个参数 参数1是属性值，参数二是属性名，获取的是值 --> <li v-for="(v, k) in obj">{{k}} {{v}}</li> </ul> <ul><!-- 便利对象属性也支持获取下标 --> <li v-for="(v, k, i) in obj">{{i}} {{k}} {{v}}</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript"> const v = new Vue({ el : '#v', data : { names : ['wan', 'why', 'james'], obj : { name : '杰哥', age : 24, gender : false } }, }); </script> </body> </html>
五、v-model
关键字：双向绑定
该指令本质时 v-on + v-bind的结合，为方便开发的一个语法糖
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- v-model指令，一般用于表单数据提交处理 ，使用v-model用来实现数据和表单元素的双向绑定 --> <!-- 可以理解为 v-bind 是单向绑定 vue对象对dom更新 --> <!-- 而 v-model 是双向绑定 vue对象和dom双方都可以实现更新 --> <div id="vue-app"> <h3>{{text_value}}</h3> <p>无V-MODEL输入 <input type="text" :value="text_value"> </p> <!-- 使用v-bind绑定数据只能让vue对象的属性更改，如果是用户对dom输入更改的数据将不会更新 --> <p>有V-MODEL输入 <input type="text" v-model="text_value"> </p> <!-- 使用v-model之后 输入标签控制的元素也能对数据更新了 --> <!-- 使用函数注入事件对象监听获取 实现绑定 --> <p>使用函数事件对象进行绑定 <input type="text" :value="text_value" @input="listenInputChanges"> </p> <!-- 简写在事件绑定中获取 --> <p>使用函数事件对象进行绑定 <input type="text" :value="text_value" @input="text_value = $event.target.value"> </p> <!-- 绑定select标签 --> <p> <select name="" id="" v-model="program_lang"> <option value="Java">Java</option> <option value="C/C++">C/C++</option> <option value="C#">C#</option> <option value="Python">Python</option> <option value="PHP">PHP</option> <option value="Rust">Rust</option> <option value="Ruby">Ruby</option> <option value="Julia">Julia</option> </select> </p> </div> <!-- <script type="text/javascript" src="../dependencies/vue.js"></script> --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript"> let vm = new Vue({ el : '#vue-app', data : { text_value : '文本值', program_lang : 'Julia' /* 设置的是默认选中的值 */ }, methods : { listenInputChanges(eventsObject) { this.text_value = eventsObject.target.value; } } }); </script> </body> </html>
修饰符的使用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- v-model修饰符 --> <div id="v"> <p>原始model <input type="text" v-model="message"></p> <p v-text="message"></p> <!-- 有时候我们不希望立刻更新model绑定输入的值，所以需要延迟或者非立即性的加载 --> <!-- 使用.lazy修饰进行延缓处理 --> <p>使用lazy修饰 <input type="text" v-model.lazy="lazyMessage"></p> <p v-text="lazyMessage"></p> <!-- lazy修饰符，使用后在失去焦点和Enter回车后才刷新渲染 --> <p>无number修饰 <input type="text" v-model="num"> </p> <p>{{num}} {{typeof num}}</p> <!-- .number用于处理属性的数据类型 --> <p>number修饰 <input type="text" v-model.number="num2"> </p> <p>{{num2}} {{typeof num2}}</p> <!-- 默认就支持？ --> <p>无trim清除 <input type="text" v-model="trimTest"> </p> <p v-text="trimTest"></p> <p>trim清除 <input type="text" v-model.trim="trimTest2"> </p> <p v-text="trimTest2"></p> </div> <!-- <script type="text/javascript" src="../dependencies/vue.js"></script> --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript"> const v = new Vue({ el : '#v', data : { message : '', lazyMessage : '', num : '', num2 : '', trimTest : ' wqe qeq ', trimTest2 : ' wqe qeq ', }, }); </script> </body> </html>
