基础
大部分是源码
注意:
注意:注意 注意 注意 注意 注意 注意 注意 注意 注意 注意 注意 注意 注意 注意 注意 注意 注意 注意 注意 注意 注意 注意 注意 注意 引入外部: <script src="https://unpkg.com/vue@next"></script>
指令
Vue 面向DOM编程 变成 面向数据编程 v-if = "" 新的指令 v-on: 用来绑定响应事件 v-for=“” 循环数组的意思,循环出来 v-model= 绑定一个数据值,Vue重要一个的特性 数据双向绑定,一直变幻的 v-bind: 相当于属性绑定,给动态的组件传值 props:[] (用v-bind一绑定相当于属性,属性可生成多个,它是一个数组),接收父组件传来的参数 v-html= v-once 一次渲染,类似不绑定Data了 e.preventDefault(); 阻止默认事件,e 是传的参数 或者@click.prevent="handBtn" total 一般在methods(方法)的上面写计算属性(computed) <tempalte>标签</tempalte> 业务逻辑标签 v-bind:title="message" ===== :title="message" // 简写方法 v-on:click="handClick" ===== @click="" v-for=“item of list” 意思是:把list的每一项都赋给item(自己取的名字) <li v-for="(item,index) of list">[{{index}}]{{item}}</li> //index 索引 把索引打印出来 component("参数(组件名称),{template(模板):''}") 声明一个单独的组件,它是一个方法。 自定义组件
修饰符
修饰符 // prevent 阻止默认行为的修饰符 例:form表单里有默认行为 // capture 改为捕获模式 捕获模式和冒泡模式对应 相反 // .once 只运行一次 // passive 关于性能 // <div @click.self="btnClick1"> // 除标签外的,div本身的元素才能触发 // <button @click.stop="addClick">增加一位佳丽</button> // .stop 阻止冒泡 按键修饰符 // 常用的: enter /tab/delete/esc/up/down/left/right // keydown <input @keydown="函数名" /> // 函数名(){ // console.log('keydown...') // } // 例:<input @keydown.enter="keyDown" /> 单指 按回车的时候 鼠标修饰符: left(默认左键) /right /middle(滚轮)
生命周期函数
beforeCreate 在 实例生成之前会自动执行的函数 created 在 实例生成之后会自动执行的函数 beforeMount 在模板渲染完成之前执行的函数 mounted 生命周期函数 ,自动执行,在模板渲染完成之后执行的函数 beforeUpdate 当data 中数据发生变化时,会立即自动执行的函数 updated 当data 中数据发生变化时,页面重新渲染完成后,会自动执行的函数 beforeCreate() { // 在 实例生成之前会自动执行的函数 console.log("beforcreate") }, created() { // / 在 实例生成之后会自动执行的函数 console.log('created') }, beforeMount() { // 在模板渲染完成之前执行的函数 console.log('beforMount') }, mounted() { // 生命周期函数 ,自动执行,在模板渲染完成之后执行的函数 console.log("mounted") }, beforeUpdate() { // 当data 中数据发生变化时,会立即自动执行的函数 console.log("beforeUpdata") console.log(document.getElementById('app').innerHTML) // 渲染前 }, updated() { // 当data 中数据发生变化时,页面重新渲染完成后,会自动执行的函数 console.log("Updata ") console.log(document.getElementById('app').innerHTML) },
差值表达式:
{{差值表达式}}
初识Vue
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello!</title> <script src="https://unpkg.com/vue@next"></script> <style> #app{ font-size: 50px; color: crimson; text-align: center; } </style> </head> <body> <div id="app"> <a class="one" ></a> </div> </body> <script> Vue.createApp({ // 创建一个Vue实例 template:'<a>金玲清脆嗜血误,一生总被无情诉</a>' }).mount(".one") </script> </html>
字面量
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计时器</title> <script src="https://unpkg.com/vue@next"></script> <style> #app{ font-size: 100px; text-align: center; color: crimson; } </style> </head> <body> <div id="app"></div> </body> <script> Vue.createApp({ data(){ return{ counter:1 } }, mounted(){ // 生命周期 ,自动执行 setInterval(()=>{ this.counter+=1 // 一般在开发中用 //this.$data.counter+=1 // document.getElementById('app').innerHTML(2) },1000) }, template:'<div>{{counter}}</div>' // 字面量 }).mount("#app") </script> </html>
显示隐藏文本
<button v-on:click="welcomeBtnClick">有顾客来</button> # 点击事件和空格 v-if = "" 新的指令 v-on: 用来绑定响应事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>显示隐藏文本!</title> <script src="https://unpkg.com/vue@next"></script> <script src="./assets/js/echarts.min.js"></script> <style> #app{ font-size: 50px; color: crimson; text-align: center; } button{ padding: 15px; font-size: 20px; } </style> </head> <body> <div id="app"> <a class="one1">金玲清脆嗜血误,一生总被无情诉</a> <a class="one" ></a> <br> </div> </body> <script> Vue.createApp({ // 创建一个Vue实例 data(){ return{ countent:'', setMeal:'真空套餐 帝王套餐 夏日套餐 学生套餐', isShowMeal:false } }, methods:{ // 多个方法加S welcomeBtnClick(){ // alert("欢迎欢迎!") this.countent="欢迎你的光临!贵宾一位" }, byeBtnClick(){ // alert('拜拜') this.countent="欢迎下次光临,下次真空套餐8折" }, showOrHide(){ this.isShowMeal=!this.isShowMeal } }, template:` <div> <div>{{countent}}</div> <button v-on:click="welcomeBtnClick">有顾客来</button> <button v-on:click="byeBtnClick">顾客离开</button> <div> <div v-if="isShowMeal">{{setMeal}}</div> <button v-on:click="showOrHide">显示/隐藏套餐</button> </div> </div> ` }).mount(".one") </script> </html>
Vue3列表和循环
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>佳丽列表</title> <script src="https://unpkg.com/vue@next"></script> <style> ul{ list-style: none; } </style> </head> <body> <div id="app"></div> </body> <!-- <script> Vue.createApp({ data(){ return { list:['1-小点点','2-小甜甜','3-小巧巧'] } }, template:` <div> <ul> <li v-for="(item,index) of list">[{{index}}]{{item}}</li> </ul> </div> ` }).mount("#one") </script> --> <!-- 现在想点击按钮,就增加一位佳丽 --> <script> Vue.createApp({ data(){ return { // list:['1-小点点','2-小甜甜','3-小巧巧'] list:[], inputValue:"" } }, methods:{ handleAddItem(){ this.list.push(this.inputValue) this.inputValue='' // 面向数据编程 } }, template:` <div> <input v-model="inputValue" /> <button v-on:click="handleAddItem">增加佳丽</buyyon> <ul> <li v-for="(item,index) of list">[{{index}}]{{item}}</li> </ul> </div> ` }).mount("#app") </script> </html>
组件化开发
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件化开发</title> <script src="https:unpkg.com/vue@next"></script> <style> #app{ text-align: center; font-family: 'Courier New', Courier, monospace; } ul{ list-style: none; } span{ color: crimson; } </style> </head> <body> <div id="app"></div> </body> <script> const app = Vue.createApp({ // const 声明app变量 data(){ return { list:[], inputValue:"" } }, methods:{ handleAddItem(){ this.list.push(this.inputValue) this.inputValue='' // 输入后,input里什么都没有,归零 }, }, template:` <div> <my-title /> <input v-model="inputValue" /> <button v-on:click="handleAddItem">增加佳丽</button> <ul> <my-beauty v-for="(item,index) of list" v-bind:item="item" v-bind:index="index" /> </ul> </div> ` }) // template 模板的意思 app.component('my-title',{ template:` <h1 style="text-align:center">只为<span>浴</span>见你</h1> ` }) app.component('my-beauty',{ props:['index','item'], template:` <li>[{{index}}]-{{item}}</li> ` }) app.mount("#app") // 注意:要是mount在前,组件将不能用 </script> </html>
基础
1.基础语法
createApp({}).mount("#") <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基础语法</title> <script src="https:unpkg.com/vue@next"></script> <style> a{ text-decoration: none; } </style> </head> <body> <div id="app"></div> </body> <script> const app = Vue.createApp({ data() { return { message:'jspang.com' // 1.在这里定义了一个数据,也就是model } }, template:`<a href="http://jspang.com">{{message}}</a>` // 2. 定义一个模板 View // 定以后,Vue自动关联, vm }) // Application Vue.createApp 就是创建了一个Vue的应用 // app.mount("#app") // mount 挂载 const vm=app.mount("#app") // 根组件 console.log(vm) // mvvm m model v view vm ViewModel 数据视图连接层 </script> </html>
2.生命周期函数-1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>生命周期函数-1</title> <script src="../../two/Vue/vue.global.js"></script> <style> div{ text-align: center; color: crimson; font-family: 'Courier New', Courier, monospace; } </style> </head> <body> <div id="app"></div> </body> <script> // 生命周期函数: 在 某一时刻 会 自动执行 的函数 const app = Vue.createApp({ data() { return { message:'莫轩玉' } }, methods: { handBtnClick(){ alert("此生不悔入魔道") } }, beforeCreate() { // 在 实例生成之前会自动执行的函数 console.log("beforcreate") }, created() { // / 在 实例生成之后会自动执行的函数 console.log('created') }, beforeMount() { // 在模板渲染完成之前执行的函数 console.log('beforMount') }, mounted() { // 生命周期函数 ,自动执行,在模板渲染完成之后执行的函数 console.log("mounted") }, template:` <h2> <a v-on:click="handBtnClick">{{message}}</a> </h2> ` }) app.mount("#app") </script> </html>
3.生命周期函数-2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>生命周期函数-2</title> <script src="../../two/Vue/vue.global.js"></script> </head> <body> <div id="app"></div> </body> <script> const app = Vue.createApp({ data() { return { content:"内容" } }, methods: { handClick(){ this.content = this.content=="魔道"?"莫轩玉":"魔道" // } }, beforeCreate() { console.log("beforeCreate") }, created() { console.log("created") }, beforeMount() { console.log('beforeMount') }, mounted() { console.log('mounted') }, beforeUpdate() { // 当data 中数据发生变化时,会立即自动执行的函数 console.log("beforeUpdata") console.log(document.getElementById('app').innerHTML) // 渲染前 }, updated() { // 当data 中数据发生变化时,页面重新渲染完成后,会自动执行的函数 console.log("Updata ") console.log(document.getElementById('app').innerHTML) }, beforeUnmount() { // 当Vue应用失效时,会自动执行的函数 console.log("beforeUmount") console.log(document.getElementById('app').innerHTML) }, unmounted() { // 当Vue应用失效时,且DOM完全销毁之后,会自动执行的函数 console.log("unmounted") console.log(document.getElementById('app').innerHTML) }, template:` <a v-on:click='handClick'> {{content}}</a> ` }) app.mount("#app") </script> </html>
4.差值表达式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>差值表达式</title> <script src="../../two/Vue/vue.global.js"></script> </head> <body> <div id="app"></div> </body> <script> const app=Vue.createApp({ data() { return { // content:"<b>轩玉</b>", message:"轩玉", count:5 } }, methods: { handClick(){ this.message = this.message=='轩玉'? '魔道' : '轩玉' } }, // template:` // <div // v-on:click='handClick' // v-html="content" // v-once // ></div> // ` template:` <h2 v-bind:title='message' v-on:click='handClick'>{{message}}</h2> <h2>{{count>2?'大':'小'}}</h2> <h2>{{2+3}}</h2> <h2>{{'魔道'+'轩玉'}}</h2> ` }) app.mount("#app") </script> </html>
5.模板动态参数和阻止默认事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>[基础]模板动态参数和阻止默认事件</title> <script src="../../two/Vue/vue.global.js"></script> </head> <body> <div id="app"></div> </body> <script> const app = Vue.createApp({ data() { return { message:"轩玉", name:'title', // 动态绑定 // event:'mouseenter' 鼠标滑落 event:'click' } }, methods: { handClick(){ alert("魔道") }, handBtn(e){ // e.preventDefault(); // 阻止默认事件 alert("已阻止") } }, template:` <h2 :[name]="message" @[event]="handClick" > {{message}} </h2> <form action="https://jspang.com" @click.prevent="handBtn"> <button type="submit">提交</button> </form> ` }) const vm=app.mount("#app") </script> </html>
6.模板中的条件判断
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模板中的条件判断</title> <script src="../../two/Vue/vue.global.js"></script> <style> div{ text-align: center; } .one{ color: crimson; } .two{ color: aqua; } .three{ color: #f0f; } </style> </head> <body> <div id="app"></div> </body> <script> const app=Vue.createApp({ data() { return { content:"轩玉" // 用三元运算符 设置content的颜色 } }, methods: { handClick(){ this.content=this.content == "此生不悔入魔道"?"恩慈":"此生不悔入魔道" } }, template:` <div> <a @click="handClick" v-if="content=='轩玉'" class="one">{{content}}</a> <a @click="handClick" v-else class="two">{{content}}</a> </div> ` // <a @click="handClick" v-if="content=='恩慈'" class="three">{{content}}</a> // :class="content=='恩慈'?'one':'two'" }) const vm=app.mount("#app") // 使用v-if进行判断 </script> </html>
7.Vue中的计算属性-computed
price 单价 count 数量 一般在methods(方法)的上面写计算属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算属性</title> <script src="../../two/Vue/vue.global.js"></script> <style> div{ text-align: center; color: aqua; font-size: 50px; } </style> </head> <body> <!-- 计算属性的特性,当计算属性依赖的内容发生改变时,才会重新执行计算。 --> <div id="app"> </div> </body> <script> const app= Vue.createApp({ data() { return { content:"忘羡", price:10, count:2 } }, computed:{ // 计算属性的特性,当计算属性依赖的内容发生改变时,才会重新执行计算。 total(){ return this.price * this.count // return Date.now() } }, methods: { handClick(){ this.content = this.content == "金铃清脆噬血误"?"一生总被痴情诉":"金铃清脆噬血误" }, // 只要页面重新渲染,就会重新执行方法 getTotal(){ // return this.price * this.count; return Date.now() }, addCount(){ this.count++ } }, template:` <div> <a v-on:click="handClick"> {{content}} </a> </div> <a>总和:{{total}}</a><br/> <button @click="addCount">再买一个</button> ` }) // <a> 总和:{{ getTotal() }} </a> // <a>总和:{{price * count}}</a> const vm = app.mount("#app") </script> </html>
8.Vue中的侦听器(监听器-watch)
使用方法: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>侦听器-watch</title> <script src="../../two/Vue/vue.global.js"></script> <style> div{ text-align: center; color: aqua; font-size: 50px; } .one{ color: cyan; } .two{ color: crimson; } </style> </head> <body> <div id="app"></div> </body> <script> const app = Vue.createApp({ data() { return { content:'加油', price:10, count:2, newTotal:20 } }, watch:{ count(current,prev){ // console.log('count changed') // console.log('现在的值',current) // console.log('以前的值',prev) this.newTotal=this.price * current }, price(){ console.log('price changed') } }, computed:{ total(){ // console.log("...count changed") return this.price * this.count } }, methods: { handClick(){ this.content=this.content == "轩玉"?"魔道":"轩玉" }, getTotal(){ this.count++ }, getPrice(){ this.price++ } }, template:` <div> <a @click="handClick" v-if="content=='加油'" class="two"> {{content}}</a> <a @click="handClick" v-else="content=='轩玉'" class="one"> {{content}}</a> <h2> 总和:{{newTotal}}</h2> <button @click="getTotal">再买一个</button> <button @click="getPrice">涨价</button> </div> ` }) const vm = app.mount("#app") </script> </html>
9.模板样式绑定-1初识
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模板样式绑定-1初识</title> <script src="../../two/Vue/vue.global.js"></script> <style> h2{ text-align: center; } .one{ background-color: #f3f; } .two{ color: aqua; } .three{ color: crimson; } .four{ background-color: #3f3; } </style> </head> <body> <div id="app"></div> </body> <script> const app = Vue.createApp({ data() { return { classString:'two', classObject:{one:true,three:true}, // 绑定对象的形式, true 或 false classArray:['four',{three:true}] // 绑定数组的样式,可以嵌套个对象进来 } }, template:` <h2 :class="classString"> jspang.com </h2> <h2 :class="classObject"> jspang.com </h2> <h2 :class="classArray"> jspang.com </h2> ` }) const vm = app.mount("#app") </script> </html>
10.模板样式绑定-2进阶
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模板样式绑定-2进阶</title> <script src="../../two/Vue/vue.global.js"></script> <style> body{ height: 1200px; font-size: 35px; text-align: center; } .red{ color: red; } .aqua{ color: aqua; } .back{ background-color: blueviolet; } </style> </head> <body> <div id="app"> </div> </body> <script> const app= Vue.createApp({ data() { return { classString:'red', classObject:{red:true,back:true}, // object 对象 classArray:['aqua','back'], styleString:"color:orange;", styleObject:{ // 个人来说:比上面 true 好 color:'red', background:'aqua' } } }, template:` <h2 :class="classArray"> 努力 </h2> <h2 style="color:#f3f;"> 坚持 </h2> <h2 :style='styleString'> 奋斗 </h2> <h2 :style='styleObject'> 半醒半醉日复日,花落花开年复年 </h2> <sonCom class="red"/> ` }) // component 组件 (子组件的名称,{以对象的形式定义,制定一个模板}) 自定义组件 app.component('sonCom',{ template:` <div>但愿老死花酒间,不愿鞠躬车马前;</div> ` }) const vm = app.mount("#app") </script> </html>
11.v-show和v-if的区别
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-show和v-if的区别</title> <script src="../../two/Vue/vue.global.js"></script> <style> body{ height: 1200px; font-size: 35px; text-align: center; } .red{ color: red; } .aqua{ color: aqua; } .back{ background-color: blueviolet; } </style> </head> <body> <div id="app"></div> </body> <script> const app = Vue.createApp({ data() { return { content:"加油各位!", show:false } }, methods: { }, // V-if 更加灵活 template:` <h2 v-show="show"> {{content}} </h2> <h2 v-if="show"> 加油干</h2> ` }) const vm = app.mount("#app") </script> </html>
12.v-for列表循环详细讲解-1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-for循环</title> <script src="../../two/Vue/vue.global.js"></script> <style> ul{ list-style: none; } </style> </head> <body> <div id="app"></div> </body> <script> const app = Vue.createApp({ data() { return { listArray:['坚持','我也不怕生命随你流浪','跨越更遥远的光年','奋斗'], inputValue:'', listObject:{ beautyone:'小点点', beautytwo:"小甜甜", beautythree:"小巧巧" } } }, methods: { handClick(){ this.listArray.push(this.inputValue) this.inputValue="" } }, // 不加key 整个列表要渲染 加key只增加数据 不从新渲染 // v-for 除了循环列表,还可以循环对象,和列表相比参数是不同的 template:` <ul> <input v-model="inputValue"/> <button @click="handClick">添加</button> <li v-for="(item,index) in listArray" :key="index+item" > [{{index}}]{{item}} </li> </ul> <ul> <li v-for="value,key,index in listObject" :key="key" > [{{index}}]{{key}} {{value}} </li> </ul> ` }) const vm = app.mount("#app") </script> </html>
13.v-for列表循环详细讲解-2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>for循环-2</title> <script src="../../two/Vue/vue.global.js"></script> <style> body{ text-align: center; font-size: 35px; } ul{ list-style: none; } </style> </head> <body> <div id="app"></div> </body> <script> const app = Vue.createApp({ data() { return { listString:['坚持','努力','奋斗'], listObject:{ beauty1:"明天", beauty2:"会", beauty3:"更好" }, inputValue:"" } }, methods: { handClick(){ this.listString.push(this.inputValue) this.inputValue="" } }, template:` <ul> <input v-model="inputValue" /> <button @click="handClick">添加</button> <template v-for="(item,index) in listString" :key="key+item"> <li v-if='item != "努力" ' > [{{index}}] {{item}} </li> </template> </ul> <ul> <li v-for="(value,key,index) in listObject" >[{{index}}] {{value}}</li> </ul> <span v-for="count in 99"> {{count}} | </span> ` }) const vm = app.mount("#app") </script> </html>
14.绑定事件详讲-方法和参数
event.target 得到我们的dom元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绑定事件详讲--方法和参数</title> <script src="../../two/Vue/vue.global.js"></script> <style> body{ font-family: 'Courier New', Courier, monospace; font-size: 35px; text-align: center; } </style> </head> <body> <div id="app"></div> </body> <script> const app= Vue.createApp({ data(){ return{ content:"十年生死两茫茫", count:0 } }, methods:{ addClick(num,event){ this.count+=num, console.log(event.target) }, btnClick1(){ alert(1) }, btnClick2(){ alert(2) } }, template:` <h2>{{content}} </h2> <hang/> <div>现在的佳丽 {{count}}.</div> <button @click="btnClick1(),btnClick2()">增加一位佳丽</button> ` // <button @click="btnClick1(),btnClick2()">增加一位佳丽</button> 想要同时调用两个函数,触发两个事件,必须要带括号(即使没有参数), // <button @click="addClick(2,$event)">增加一位佳丽</button> // <button @click="addClick">增加一位佳丽</button> }) app.component('hang',{ template:` <h2>自定义组件</h2> ` }) const vm = app.mount("#app") </script> </html>
15.绑定事件详讲-事件修饰符
比上面的重, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绑定事件详讲--方法和参数</title> <script src="../../two/Vue/vue.global.js"></script> <style> body{ font-family: 'Courier New', Courier, monospace; font-size: 35px; text-align: center; } </style> </head> <body> <div id="app"></div> </body> <script> const app= Vue.createApp({ data(){ return{ content:"十年生死两茫茫", count:0 } }, methods:{ addClick(){ this.count++ }, btnClick1(){ alert(1) } }, // 冒泡,先弹出1,后增加一位佳丽 template:` <div @click.capture="btnClick1"> 除标签外的,div本身的元素 <h2>{{content}} </h2> <hang/> <div>现在的佳丽 {{count}}.</div> <button @click="addClick">增加一位佳丽</button> </div> ` // 修饰符 // prevent 阻止默认行为的修饰符 例:form表单里有默认行为 // capture 改为捕获模式 捕获模式和冒泡模式对应 相反 // .once 只运行一次 // passive 关于性能 // <div @click.self="btnClick1"> // 除标签外的,div本身的元素才能触发 // <button @click.stop="addClick">增加一位佳丽</button> // .stop 阻止冒泡 }) app.component('hang',{ template:` <h2>自定义组件</h2> ` }) const vm = app.mount("#app") </script> </html>
16.绑定事件详讲-键盘and鼠标修饰符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Demo21</title> <script src="https://unpkg.com/vue@next" ></script> <style> body{ font-size: 35px; font-family: 'Courier New', Courier, monospace; text-align: center; } </style> </head> <body> <div id="app"></div> </body> <script> const app=Vue.createApp({ data(){ return{ } }, methods:{ keyDown(){ console.log('keydown...') }, handClick(){ alert("click") }, riClick(){ alert("借问人间 知我者能有几") } }, template:` <div> <input @keydown.enter="keyDown" /> <div @click="handClick"> 魔道轩玉 </div> <div @click.right="riClick"> 恩慈 </div> </div> ` }) // 按键修饰符 // 常用的: enter /tab/delete/esc/up/down/left/right // keydown <input @keydown="函数名" /> // 函数名(){ // console.log('keydown...') // } // 例:<input @keydown.enter="keyDown" /> 单指 按回车的时候 // 鼠标修饰符:left(默认左键) /right /middle(滚轮) const vm=app.mount("#app") </script> </html>
17.表单的双向数据绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>input的双向数据绑定</title> <script src="https://unpkg.com/vue@next" ></script> <style> body{ text-align: center; font-size: 45px; font-family: 'Courier New', Courier, monospace; } </style> </head> <body> <div id="app"></div> </body> <script> const app=Vue.createApp({ data(){ return{ name:" ", checked:false, beauty:[], girls:'' } }, methods:{ }, template:` <div> {{name}} </div> <div><input v-model="name" /></div> <div><textarea v-model="name" /></div> <div> {{checked}} <input type="checkbox" v-model="checked" /> </div> <div> {{beauty}} 小点点<input type="checkbox" v-model="beauty" value="小点点" /> 小甜甜<input type="checkbox" v-model="beauty" value="小甜甜" /> 小巧巧<input type="checkbox" v-model="beauty" value="小巧巧" /> </div> <div> [{{girls}}] 小点点<input type="radio" v-model="girls" value="小点点" /> 小甜甜<input type="radio" v-model="girls" value="小甜甜" /> 小巧巧<input type="radio" v-model="girls" value="小巧巧" /> </div> ` }) // checkbox 复选框 // <div> // {{beauty}} // 小点点<input type="checkbox" v-model="beauty" value="小点点" /> // 小甜甜<input type="checkbox" v-model="beauty" value="小甜甜" /> // 小巧巧<input type="checkbox" v-model="beauty" value="小巧巧" /> // </div> // 单选框 // <div> // [{{girls}}] // 小点点<input type="radio" v-model="girls" value="小点点" /> // 小甜甜<input type="radio" v-model="girls" value="小甜甜" /> // 小巧巧<input type="radio" v-model="girls" value="小巧巧" /> // </div> const vm = app.mount("#app") </script> </html>
18.表单的双向数据绑定-2修饰符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Demo23</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app"></div> </body> <script> const app = Vue.createApp({ data() { return { checked: true, name:'请选择', message:'' } }, // .lazy template: ` <div>{{checked}}<input type="checkbox" v-model="checked" /></div> <div> {{name}} <input type="checkbox" v-model="name" true-value="魔道" false-value="轩玉" /> </div> <div> {{ message}} <input v-model.="message" /> </div> ` }) // // true-value="魔道" // false-value="轩玉" // 双向绑定的修饰符: // lazy(懒) // 这时候当你在文本框中输入任何内容的时候,插值表达式会跟着改变。 // 如果你不想马上显示,就可以用lazy修饰符,这样就可以实现当输入完成后,失去焦点再进行改变。 // <div> // {{message}} // <input v-model.lazy="message" /> // </div> // number // 看的是第一个值 // 加上number修饰符后,你输入的值只要是数字,就变成了number类型。(也就是说,如果你输入的是字母,它还会是字符串类型) // <div> // {{ typeof message}} // <input v-model.number="message" /> // </div> // trim修饰符,用来消除input框输入内容<前面和后面>的空格的。 const vm = app.mount("#app") </script> </html>
建议
methods、watch和computed
三者使用优先级: computed 和 methods 都能实现的功能,建议使用computed,因为有缓存,不渲染页面就刷新。 computed 和 watch 都能实现的功能,建议使用computed,因为更加简洁
v-if、v-show
如果显示和隐藏切换的比较频繁,经常进行切换,建议使用 v-show 因为 并没有重新渲染,而只是控制CSS样式,来进行显示隐藏
v-for、v-if
当v-for、v-if 在同一个标签的时候,v-for的优先级会高于v-if,这时候判断就会失效