1、内容绑定、事件绑定（v-text\v-html\v-on）
1、v-text（绑定内容）
作用：设置标签的内容（无论内容是什么，它只会解析文本）
<!-- v-text --> <div id="d1" style="color: red;"> <h2 v-text="message" ></h2> <h1 v-text="message+'!'"></h1> </div> <script src="../Vuejs/vue.js"></script> <script> new Vue({ el:"#d1", data:{ message:"哈哈哈哈" } }) </script>
效果：
2、v-html（绑定内容）
作用：设置元素的innerHTML（内容）
<!-- v-html 1、设置元素的innerHtml --> <div id="d1"> <!-- <a href='http://www.baidu.com'>哈哈哈</a> --> <p v-text="inner"></p> <!-- 哈哈哈 --> <p v-html="inner"></p> </div> <script src="../Vuejs/vue.js"></script> <script> new Vue({ el:"#d1", data:{ inner:"<a href='http://www.baidu.com'>哈哈哈</a>" } }) </script>
效果：
*3、v-on（绑事件）
作用：为元素绑定事件
写法：有两种
①v-on：事件=“事件名”
②@事件=”事件名“
常见事件：
鼠标事件：click、dblclick(双击)、mouseover(移入)、mouseout(移出)
方法内部：通过this关键字可以访问定义在data中的数据
<!-- v-on --> <div id="d1"> <!-- 两种写法 1、v-on:事件=“事件名” 2、@事件=“事件名” --> <button v-on:click="dolt">百度一下</button> <button @click="dolt">百度一下</button> <input type="button" value="双击事件" @dblclick="dolt"> <h2 v-cloak @click="chagefood">{{food}}</h2> </div> <script src="../Vuejs/vue.js"></script> <script> new Vue({ el:"#d1", data:{ food:"西红柿炒鸡蛋" }, // 绑定事件的方法 methods:{ dolt:function(){ alert("确定进入百度?") }, chagefood:function(){ this.food+="好吃的很"; } } }) </script>
v-on补充：
补充：
①事件绑定的方法写成函数调用的形式，可传入自定义参数
②定义方法时需要定义形参来接受传入实参
③事件的后面跟上 .修饰符 可以对事件进行限制----例如：.enter 可以限制触发的按键为回车
<!-- ①事件绑定的方法写成函数调用的形式，可传入自定义参数 ②定义方法时需要定义形参来接受传入实参 ③事件的后面跟上 .修饰符 可以对事件进行限制----例如：.enter 可以限制触发的按键为回车 --> <div id="app"> <!-- 实参：666 "老铁" --> <input type="button" v-on:click="dianji(666,'老铁')" value="点击"> <!-- 实参：111 --> <input type="text" v-on:keyup.enter="huiche(111)"> </div> <script src="../Vuejs/vue.js"></script> <script> new Vue({ el:"#app", methods:{ // 在方法中定义形参 p1 p2 dianji:function(p1,p2){ console.log("做IT"); console.log(p1); console.log(p2) }, //在方法中定义形参 p3 huiche:function(p3){ alert("吃饭了没"+p3) } } }) </script>
2、显示切换、属性绑定
1、v-show（操作样式）
作用：根据真假切换元素的显示状态
原理：修改元素的display的值
-true:显示、-false:隐藏
写法：v-show="display"
<!-- v-show --> <!-- 作用：根据真假来切换元素的显示状态 原理：修改元素display的值（true\false） true-显示 false-隐藏 --> <div id="app"> <img src="./搜索.png" alt="" v-show="display"> <button v-on:click="dis">{{inner}}</button> </div> <!-- 引入Vue.js --> <script src="../Vuejs/vue.js"></script> <script> new Vue({ el:"#app", // 数据对象 data:{ display:true, inner:"显示/隐藏" }, // 事件 methods:{ dis:function(){ this.display=!this.display; } } }) </script>
效果：
*2、v-if（操作DOM元素）
1、作用：根据真假切换元素的显示状态
2、本质：通过操作DOM元素来切换显示状态
3、值为true:元素存在于DOM树中，值为false:元素从DOM树中移除
<!-- v-if --> <!-- 1、作用：根据真假切换元素的显示状态 2、本质：通过操作DOM元素来切换显示状态 3、值为true:元素存在于DOM树中，值为false:元素从DOM树中移除 --> <div id="app"> <h1 v-if="zhuangtai">哈哈哈哈哈</h1> <input type="button" value="切换显示状态" @click="qiehuan"> </div> <script src="../Vuejs/vue.js"></script> <script> new Vue({ el:"#app", data:{ zhuangtai:true }, methods:{ qiehuan:function(){ this.zhuangtai=!this.zhuangtai } } }) </script>
效果：
*3、v-bind（专门设置元素的属性）
作用：为元素设置属性（如：src\title\class等等）
完整写法：v-bind:属性名=“”
简写：：属性名=“”（可去掉v-bind）
注意：需要动态的增删class建议使用对象的方式
<div id="app"> <!-- 属性SRC的绑定 --> <img v-bind:src="imgSrc" alt=""> <!-- 属性title的绑定 --> <h1 v-bind:title="tle+'!!!'">hahahaha</h1> <!-- 属性class的绑定 --> <h1 @click="dianji" v-bind:class="isActive?'active':''">属性类名的绑定</h1> </div> <script src="../Vuejs/vue.js"></script> <script> new Vue({ el:"#app", data:{ imgSrc:"C:\Users\PC\Desktop\Vue\Vue标签\搜索.png", tle:"哈哈哈哈", isActive:false }, methods:{ dianji:function(){ this.isActive=!this.isActive } } }) </script>
效果：
*4、v-for
作用：根据数据生成列表结构
写法：（item,index） in 数组名
注意：
①数组经常和v-for结合使用
②item和index可以结合其他指令一起使用
③数组长度的更新会同步到页面上，是响应式的
<div id="app"> <!-- ------------------------------ --> <ul> <li v-for="(item,index) in arr"> {{index+1}} 中国： {{item}} </li> </ul> <!-- ------------------------------ --> <!-- 添加按钮 --> <input type="button" value="添加数据" @click="add" name="" id=""> <!-- 删除按钮 --> <input type="button" value="移除数据" @click="remove" name="" id=""> <h2 v-for="it in veg"> {{it.name}} </h2> </div> <!-- 引入vue.js --> <script src="../Vuejs/vue.js"></script> <!-- js实例 --> <script> new Vue({ // 挂载点 el:"#app", // 数据 data:{ arr:["北京","成都","陕西","上海","南京","重庆"], veg:[ {name:"番茄炒蛋"}, {name:"干炒牛河"}, {name:"新疆大盘鸡"} ] }, // 事件 methods:{ add:function(){ this.veg.push({name:"辣子蒜羊血"})//push(内容)--从数组末尾添加 }, remove:function(){ this.veg.shift();//shift()--从数组首位开始移除 } } }) </script>
效果：
*5、v-model
作用：便捷的获取和设置表单元素的值（双向数据绑定）
注意：
①绑定的数据会和表单元素的值相关联
②绑定的数据《-----》表单元素的值
<!-- 作用：便捷的获取和设置表单元素的值（双向数据绑定） 注意： 绑定的数据会和表单元素的值相关联 绑定的数据《-----》表单元素的值 --> <div id="app"> <!-- keyup.enter:键盘事件中的敲击回车键 --> <input type="button" v-on:click="setK" name="" id="" value="修改message"> <input v-on:keyup.enter="getK" type="text" v-model="message" name="" id=""> <h2 >{{message}}</h2> </div> <script src="../Vuejs/vue.js"></script> <script> new Vue({ el:"#app", data:{ message:"哈哈哈" }, methods:{ getK:function(){ alert(this.message) }, setK:function(){ this.message="我爱你你爱我蜜雪冰城甜蜜蜜" } } }) </script>
效果：
