3 vue之插值语法、文本指令、事件指令+案例
一、vue之插值语法
语法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>插值</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> </head> <body> <div id="box"> <ul> <li>字符串：{{name}}</li> <li>数值：{{age}}</li> <li>数组：{{list1}}</li> <li>对象：{{obj1}}</li> <li>字符串：{{link1}}</li> <li>运算：{{10+20+30+40}}</li> <li>三目运算符：{{10>20?'是':'否'}}</li> </ul> </div> </body> <script> let vm = new Vue({ el: '#box', // 在box这个div中可以写 vue的语法 data: { name: 'Darker', // 字符串 age: 18, // 数值 list1: [1,2,3,4], // 数组 obj1: {name: 'Darker', age: 19}, // 对象 link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>' } }) </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>插值语法</title> <script src="./js/vue.js"></script> </head> <body> <h1>插值语法</h1> <div id="app"> <h1>我的名字是:{{name}}</h1> <h2>我的年龄是：{{age}}</h2> <h3>我的爱好是：{{hobby}}</h3> <h4>显示对象：{{obj}}</h4> <p>{{url}}</p> 默认情况，原封不动显示，如果能直接渲染成标签，说明存在漏洞 xss攻击 </div> </body> <script> var vm =new Vue({ el:'#app', data:{ name:'lqz', age:19, hobby:['篮球','足球','乒乓球'], obj:{wife:'迪丽热巴',addr:'上海'}, url:'<a href="http://www.baidu.com"></a>' } }) </script> </html>
二、Vue之文本指令
指令就是写在标签上以 v-xx 开头的都是vue的指令，有特殊含义，做一些处理
v-html:把标签字符串显示成标签
v-text：等同于插值
v-show：显示不显示，不是真正删除
v-if：显示不显示，是真正的删除
v-html
指令写在标签内，指令对应的变量，直接写就可以了，不需要再用 {{}} 包裹了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-html</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> </head> <body> <div id="app"> {{link}} <hr> 文本指令之v-html: <span v-html="link"></span> </div> </body> <script> let vm = new Vue({ el: '#app', // 在box这个div中可以写 vue的语法 data: { link: '<a href="https://www.baidu.com">百度一下 你就知道</a>' } }) </script> </html>
v-text
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-html</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> </head> <body> <div id="app"> <hr> 文本指令之v-text: <span v-text="msg"></span> </div> </body> <script> let vm = new Vue({ el: '#app', // 在box这个div中可以写 vue的语法 data: { msg:'dzg is handsome' } }) </script> </html>
v-show
一个标签是否显示,用变量可以，用true或false也可以， 其实是display: none;并不是真正的把dom删除了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-html</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> </head> <body> <div id="app"> <hr> 文本指令之v-show: <span v-show="b">我是span</span> </div> </body> <script> let vm = new Vue({ el: '#app', // 在box这个div中可以写 vue的语法 data: { b:'true' } }) </script> </html>
v-if
真正的删除，效率低
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-html</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> </head> <body> <div id="app"> <hr> 文本指令之v-if: <span v-if="b">我是span</span> </div> </body> <script> let vm = new Vue({ el: '#app', // 在box这个div中可以写 vue的语法 data: { b:'true' } }) </script> </html>
三、vue之事件指令
使用最多的是click事件
v-on:click 可以缩写成@click
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件指令</title> <script src="./js/vue.js"></script> </head> <body> <h1>事件指令</h1> <div id="app"> v-on表示事件指令，click表示单击,老语法，不用了 <p><button v-on:click="handleClick">按钮</button></p> <br> 新语法，以后都用这种： @click='函数名' <p><button @click="handleClick2">按钮二</button></p> </div> </body> <script> var vm = new Vue({ el: '#app', data: {}, methods: { handleClick() { alert('我被点了') }, handleClick2() { alert("按钮2被点击了") } } }) </script> </html>
四、案例
点击后显示和不显示div
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-html</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div id="app"> <button class="button btn-danger" v-on:click="handleClick">点我显示和不显示div</button> <div v-show="show">我是div</div> </div> </body> <script> let vm = new Vue({ el: '#app', // 在box这个div中可以写 vue的语法 data: { show:true }, methods:{ handleClick(){ this.show = !this.show }, } }) </script> </html>
