1.普通插值表达式插入数据: 在标签尖括号中使用{{}}插入js表达式:变量,函数调用,三目运算等等 ,插值表达式中的标识符 代表vue对象中的data的属性名或者methods中的方法名
<div id="app"> <!-- 双大括号可以直接拿到我们的Vue对象里面的数据 --> {{name}} </div> <script> new Vue({ el:"#app", // el:绑定的根元素 data:{ name:"小猫瘦瘦~" } }) </script><div id="app"> <h1> {{name}}</h1> <h1> {{dog}}</h1> <!-- 1.@click等于v-on:click --> <!-- 2.不传参直接写函数名 --> <!-- 3.需要传参，直接在函数名后传即可 --> <button type="button" @click="change">点我触发函数</button> </div> <script> new Vue({ el:"#app", data:{ name:"小猫瘦瘦~", dog:"" }, // 方法 methods:{ change(){ this.name="大猫胖胖~", this.dog="汪汪" } }, }) </script>
2.文本指令:(面试)
v-html ==>相当于innerHTML
v-text==>相当于innerText
v-pre==>插件表达式就被识别为文本,而不是js表达式
v-cloak==>加上这个属性的标签相当于在构建虚拟节点的时候就会有这个属性,等data的数据生成的时候,这个标签会自动去掉这个属性,可以利用这个特性来在css中把这个元素在加载初期写样式(隐藏)
<div id="app2" v-html="name"><!--v-html:会解析标签--> {{name}} </div> <script> new Vue({ el:"#app2", // el:绑定的根元素 data:{ name:"<h1>小猫瘦瘦~</h1>" } }) </script> <div id="app3" v-text="name"> <!--v-text:不会解析标签--> {{name}} </div> <script> new Vue({ el:"#app3", // el:绑定的根元素 data:{ name:"<h1>小猫瘦瘦~</h1>" } }) </script> 考点:如何解决vue第一次加载的时候 页面上使用的数据会闪烁?(面试) 1.使用v-html,v-text指令操作,或者css中加[v-cloak] {display:none}; 2.添加一个属性 v-clock 在vue框架运行时 会把项目中的v-clock属性去掉 3.不用el关联，使用$mount 4.尽量使用指令 <style> [v-cloak]{ display: none; } </style> <!-- v-cloak属性--> <div id="app" v-cloak> {{name}} </div> <script> new Vue({ el:"#app", // el:绑定的根元素 data:{ name:"小猫瘦瘦~" } }) </script> <!-- vue项目渲染流程： 1.先解析html代码css代码 2.加载vue 3.清掉空的模板标签或属性 -->
3.v-show:true(展示) v-show:false(消失)
<div id="app"> <h1 v-show="isTrue"> {{name}}</h1> <!-- v-show:true(展示) v-show:false(消失) --> <button type="button" @click="isShow">点我有惊喜</button> </div> <script> new Vue({ el:"#app", data:{ isTrue:false, name:"小猫瘦瘦~", }, // 方法 methods:{ isShow(){ this.isTrue=!this.isTrue; } }, }) </script>4.v-if/v-else
<div id="app1"> <h1 v-if="isIf"> {{sport}}</h1> <h1 v-else> {{msg}}</h1> <button type="button" @click="isShow">点我有惊喜</button> </div> <script> new Vue({ el:"#app1", data:{ isIf:false, sport:"篮球", msg:"lmf" }, // 方法 methods:{ isShow(){ this.isIf=!this.isIf; } }, }) </script>v-show和v-if的区别
在业务中常常可以通过操作if或者show使用的变量,来达到操作元素显示和隐藏的效果
v-if的做法是删除节点,v-show做法是操作css的display:nonevisibility: hidden; 不脱离文档流的
display:none 脱离文档流
v-if 删除节点
v-show display:none这个两个谁好?(面试)
根据它们底层的设计不一样有各自的使用场景
v-if具有较高的 切换消耗,常常用在用户不常切换的模块
v-show具有较高的性能消耗,常常用在频繁切换的模块中
5.v-bind
<style> #app img{ width: 100px; height: 100px; } </style> <div id="app"> <!-- 将src变成一个变量属性 --> <!-- v-bind简写成":" v-bind:src :src--> <img :src="imgSrc"> </div> <script> new Vue({ el:"#app", data:{ imgSrc:"./img/a.png", } }) </script>
6.事件绑定
在methods中写方法,供事件或者别的方法内部调用
new Vue({ el:"#app", data:{}, methods:{ fn1(){console.log("fn1")}, fn2:function(){console.log("fn2")}, fn3:()=>{console.log("fn3")}, fn4, fn5, fn6 } })事件绑定
//v-on: 和 @ 都是绑定事件的指令 //指令后面跟事件类型,值就是methds中的方法,可以加小括号也可以不加 <button v-on:click="fn1()">点击事件1</button> <button @click="fn2">点击事件2</button>
7. 事件修饰符
.stop 阻止冒泡，阻止从当前元素经过的所有冒泡行为
.prevent 阻止默认事件
.capture 添加事件侦听器时让事件在捕获阶段触发
.self 其他元素的事件触发时 事件链经过它,无论是捕获还是冒泡阶段都不会触发它的事件,只有它自己是精准对象才会触发事件, 虽然它自己不会被别人影响,但是它自己的事件触发的时候还是会生成事件链经过其他元素,并不阻止继续冒泡到其他元素
.once 事件只触发一次,触发完之后,事件就解绑
多修饰符一起使用:连点
<div class="box" @click="divBoxHandler"> <input type="button" @click.stop="btnHandler" value="戳他"> </div> <a v-on:click.prevent.once="doThat">阻止点击跳转，但是只会阻止第一次</a>
8.样式的绑定
8.1对class 属性进行绑定
代码中的<div :class="{phone:isRed,phone2:isBlue}">
phone：作为属性值，isRed：true/false是data里的数据
实现页面的切换：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> .phone { width: 350px; height: 750px; border: 1px solid; background-color: red; } .phone2 { width: 350px; height: 750px; border: 1px solid; background-color: blue; } </style> </head> <body> <div id="app"> <div :class="{phone:isRed,phone2:isBlue}"> <button class="btn1" @click="fn()">1</button> <button class="btn2" @click="fn()">2</button> </div> </div> <script type="text/javascript"> new Vue({ el: "#app", data: { isRed: true, isBlue: false }, // 方法 methods: { fn() { this.isBlue = !this.isBlue, this.isRed = !this.isRed } } }) </script> </body>8.2 对style 进行绑定
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> .box { width: 600px; height: 500px; /* border: 1px solid; */ margin: 0 auto; } .top { height: 40px; display: flex; justify-content: space-between; background-color: pink; } .top button { width: 200px; } .bottom { width: 600px; height: 460px; border: 1px solid; } </style> </head> <body> <div id="app"> <div class="box"> <div class="top"> <button @click="one">1</button> <button @click="two">2</button> <button @click="three">3</button> </div> <!-- v-bind:将属性(style)变为一个变量属性 --> <div class="bottom" v-bind:style="{'background-color':bgc}"> </div> </div> </div> <script> new Vue({ el: "#app", data: { bgc: "", }, methods: { one() { this.bgc = "red" }, two() { this.bgc = "blue" }, three() { this.bgc = "pink" } }, }) </script> </body> </html>
4114
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
