個(gè)人網(wǎng)站主頁(yè)模板黃桃圖片友情鏈接
簡(jiǎn)介
什么是Vue？
一套用于構(gòu)建用戶(hù)界面的漸進(jìn)式JavaScript框架。將數(shù)據(jù)轉(zhuǎn)變成用戶(hù)可看到的界面。
什么是漸進(jìn)式？?
Vue可以自底向上逐層的應(yīng)用
簡(jiǎn)單應(yīng)用:只需一個(gè)輕量小巧的核心庫(kù)
復(fù)雜應(yīng)用:可以引入各式各樣的Vue插件
Vue的特點(diǎn)是什么？
1.采用組件化模式，提高代碼復(fù)用率、且讓代碼更好維護(hù)。
2.聲明式編碼，讓編碼人員無(wú)需直接操作DOM，提高開(kāi)發(fā)效率。
3.使用虛擬DOM+優(yōu)秀的Diff 算法，盡量復(fù)用DOM節(jié)點(diǎn)
?Vue官網(wǎng)
vue2?
介紹 — Vue.js
vue3??
Vue.js - 漸進(jìn)式 JavaScript 框架 | Vue.js
Vue2-html文件中寫(xiě)vue
下載安裝?
?開(kāi)發(fā)版本比較大，生產(chǎn)版本較小。
開(kāi)發(fā)時(shí)推薦引入開(kāi)發(fā)版本的vue，有提示。
我們下載下來(lái)源碼并引用，甚至可用修改源碼。
?下載Vue開(kāi)發(fā)者工具
參考：vue devtools在谷歌瀏覽器安裝使用，附vue,vue3devtools下載資源_vue3.js tools 谷歌_…咦的博客-CSDN博客
學(xué)習(xí)vue2，可參考vue2的文檔API — Vue.js
外：shift+點(diǎn)擊網(wǎng)頁(yè)刷新，為強(qiáng)制刷新。
外：vscode的live server運(yùn)行html，網(wǎng)頁(yè)除了輸入http://127.0.0.1:5h500/http://127.0.0.1:5500/Vue/Vue.htmlhttp://127.0.0.1:5500/還可輸入http://127.0.0.1:5500/，然后選中文件夾
可在vsCoder中安裝一個(gè)Vue 3 snippets插件。?寫(xiě)vue代碼回有提示補(bǔ)全。
演示代碼：
目錄結(jié)構(gòu)?
html代碼?
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>初識(shí)Vue</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 總結(jié):初識(shí)Vue:1.想讓Vue工作，就必須創(chuàng)建一個(gè)Vue實(shí)例，且要傳入一個(gè)配置對(duì)象;2.root容器里的代碼依然符合html規(guī)范。只不過(guò)混入了一些特殊的Vue語(yǔ)法;3.root容器里的代碼被稱(chēng)為【Vue模板】;4.Vue實(shí)例和容器是一一對(duì)應(yīng)的;5.真實(shí)開(kāi)發(fā)中只有一個(gè)Vue實(shí)例,并且會(huì)配合著組件一起使用;6.{{xxx}}中的xxx要寫(xiě)js表達(dá)式，且xxx可以自動(dòng)讀取到data中的所有屬性;7.一旦data中的數(shù)據(jù)發(fā)生改變，那么頁(yè)面中用到該數(shù)據(jù)的地方也會(huì)自動(dòng)更新;--><!-- 準(zhǔn)備好一個(gè)容器 --><div id="root"><h1>hello,kdy</h1><!-- {{}}中的需要為一個(gè)js表達(dá)式(表達(dá)式最終計(jì)算出一個(gè)值的),而不是js代碼 --><p>{{name.toUpperCase()}}--{{new Date()}}</p></div><p>{{name}}</p><!--//容器外,data無(wú)效--><script type="text/javascript">Vue.config.productionTip=false// 在配置下方寫(xiě)vue實(shí)例/*const x = */new Vue({el:"#root", //element元素,讓vue實(shí)例和容器之間建立聯(lián)系,指定當(dāng)前實(shí)例為哪個(gè)容器服務(wù).里面?zhèn)鬟f選擇器,可id可class.,若class就".root"data:{ //data中用于存儲(chǔ)數(shù)據(jù)，數(shù)據(jù)供el所指定的容器去使用。name:"kdy"}})</script>
</body>
</html>注意：vue實(shí)例和容器之間是一對(duì)一的：若兩個(gè)class為root容器對(duì)于一個(gè)綁定.root的vue實(shí)例，則第二個(gè)容器中不生效。若一個(gè)id為root的容器綁定兩個(gè)new Vue的cl為“#root”的實(shí)例，則第二個(gè)new的vue實(shí)例不生效。
模板語(yǔ)法
1、插值語(yǔ)法{{}}：位于標(biāo)簽體中
2、指令語(yǔ)法v-bind：位于標(biāo)簽屬性
代碼演示：?
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>模板語(yǔ)法</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- Vue模板語(yǔ)法有2大類(lèi):1.插值語(yǔ)法:功能:用于解析標(biāo)簽體內(nèi)容。寫(xiě)法:{{xxx}}，xxx是js表達(dá)式，且可以直接讀取到data中的所有屬性。2.指令語(yǔ)法:功能:用于解析標(biāo)簽（包括:標(biāo)簽屬性、標(biāo)簽體內(nèi)容、綁定事件.....） 。舉例:v-bind:href="xxx”或簡(jiǎn)寫(xiě)為:href="xxx"，xxx同樣要寫(xiě)js表達(dá)式,且可以直接讀取到data中的所有屬性。備注: Vue中有很多的指令，且形式都是: v-????，此處我們只是拿v-bind舉個(gè)例子。--><div id="app"><p>{{message}}</><p>{{user.name}}</><p>{{user.age}}</><br/><!-- 指令語(yǔ)法v-bind: 可指定任何一個(gè)屬性--><a v-bind:href="url">百度</a><div :x="hello"></div></div><script type="text/javascript">new Vue({el:"#app",data:{message:"插值語(yǔ)法",url:"http://www.baidu.com",hello:"你好",user:{name:"王五",age:20}},})</script>
</body>
</html>數(shù)據(jù)綁定
單向數(shù)據(jù)綁定v-bind:，data->模板頁(yè)面
代碼案例? 數(shù)據(jù)綁定.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>數(shù)據(jù)綁定</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- Vue中有2種數(shù)據(jù)綁定的方式:1.單向綁定(v-bind):數(shù)據(jù)只能從data流向頁(yè)面。2.雙向綁定(v-model):數(shù)據(jù)不僅能從data流向頁(yè)面，還可以從頁(yè)面流向data。備注:1.雙向綁定一般都應(yīng)用在表單類(lèi)元素上(如: input、select等）2.v-model:value可以簡(jiǎn)寫(xiě)為v-model，因?yàn)関-model默認(rèn)收集的就是value值。--><div id="app">單向數(shù)據(jù)綁定:<input type="text" v-bind:value="msg"/><br/>雙向數(shù)據(jù)綁定:<input type="text" v-model:value="msg2"/><br/>雙向數(shù)據(jù)綁定:<input type="text" v-model="msg2"/><!-- 如下代碼是錯(cuò)誤的,v-model只能綁定在表單類(lèi)的元素(輸入元素)上 input\單選框\多選框\select框\多行輸入--><!-- <h2 v-model:x="msg2">你好啊</h2> --></div><script type="text/javascript">new Vue({el:"#app",data:{msg:"hello123",msg2:"hello123"},})</script>
</body>
</body>
</html>? el與data的兩種寫(xiě)法
代碼展示： el與data的兩種寫(xiě)法.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>el與data的兩種寫(xiě)法</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- data與el的2種寫(xiě)法1.el有2種寫(xiě)法( 1).new Vue時(shí)候配置el屬性。(2).先創(chuàng)建Vue實(shí)例，隨后再通過(guò)vm. $mount( ' #root ')指定el的值。2.data有2種寫(xiě)法(1).對(duì)象式(2).函數(shù)式如何選擇:目前哪種寫(xiě)法都可以，以后學(xué)習(xí)到組件時(shí)，data必須使用函數(shù)式，否則會(huì)報(bào)錯(cuò)。3.一個(gè)重要的原則:由Vue管理的函數(shù)，一定不要寫(xiě)箭頭函數(shù)，一旦寫(xiě)了箭頭函數(shù)，this就不再是Vue實(shí)例了。--><div id="root"><h1>你好,{{name}}</h1></div><script type="text/javascript">
/* const v = new Vue({//el:"#root",data:{name:"王五"}})console.log(v)//打印出vue實(shí)例.發(fā)現(xiàn)有很多$開(kāi)頭的內(nèi)容,這些$開(kāi)頭的內(nèi)容就是給程序員使用的.///el就可通過(guò)v.$mount("#root"),這種方式比較靈活.v.$mount("#root")*/new Vue({el:"#root",//data的第一種寫(xiě)法:對(duì)象式/*data:{name:"王五"},*///data的第二種寫(xiě)法:函數(shù)式 以后學(xué)習(xí)組件的時(shí)候,必須使用該函數(shù)式的datadata:function(){console.log(this)//此處的this是vue實(shí)例對(duì)象return{name:"王六"}},/*data函數(shù)式不能寫(xiě)箭頭函數(shù),以下寫(xiě)法是錯(cuò)誤的,必須老老實(shí)實(shí)的寫(xiě)上面的function的這種.data:()=>{console.log(this)//箭頭函數(shù)由于沒(méi)有自己的this,就找到了最外層的data即windows}*/})</script>
</body>
</html>MVVM模型
vue參考了MVVM：
1.M:模型(Model) :對(duì)應(yīng)data中的數(shù)據(jù)
2.V:視圖(View):模板
3.VM:視圖模型(ViewModel) : Vue 實(shí)例對(duì)象
?文檔中常用vm代表vue實(shí)例。
vm實(shí)例中的所有東西都可寫(xiě)在{{}}中
代碼演示：vue中的MVVM.html:?
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 觀(guān)察發(fā)現(xiàn):1.data中所有的屬性,最后都出現(xiàn)在了vm身上。2.vm身上所有的屬性及 Vue原型上所有屬性，在Vue模板中都可以直接使用。--><div id="root"><p>{{name}}</p><!-- vue實(shí)例中的東西都可在{{}}中 --><P>{{$options}}</P><P>{{$emit}}</P><!-- view --></div><script type="text/javascript">const vm = new Vue({ // ViewModelel:"#root",data:{// modelname:"張三"}})console.log(vm)//data中寫(xiě)的內(nèi)容會(huì)出現(xiàn)在vm上,也就是vue實(shí)例上.</script>
</body>
</html>回顧js的Object.defineproperty方法
代碼演示：Object.defineproperty.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script type="text/javascript">let number = 18;let person={name:"張三",sex:"男"}Object.defineProperty(person,'age', { //給person增加一個(gè)屬性//value:18,//enumerable:true, //控制屬性是否可以枚舉,默認(rèn)值是false//writable:true, //控制屬性是否可以被修改,默認(rèn)值是false//configurable:true, //控制屬性是否可以被刪除,默認(rèn)值是false//當(dāng)有人讀取person的age屬性時(shí)，get函數(shù)(getter)就會(huì)被調(diào)用，且返回值就是age的值get:function(){ //get:function()也可簡(jiǎn)寫(xiě)為get()console.log('有人讀取age屬性了')return number}, set(value){console.log('有人修改了age屬性,且值是',value)number=value}})console.log(person)console.log(Object.keys(person))for(let key in person){console.log('@',person[key])}</script>
</body>
</html>運(yùn)行后在f12控制臺(tái)中person.age和person.age = 150這樣設(shè)置。?
數(shù)據(jù)代理
代碼演示：何為數(shù)據(jù)代理.html?
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>何為數(shù)據(jù)代理</title>
</head>
<body><script type="text/javascript" >let obj = {x:100}let obj2 = {y:200}Object.defineProperty(obj2,'x',{get(){return obj.x},set(value){obj.x = value}})</script>
</body>
</html>運(yùn)行后在f12控制臺(tái)中obj.x和obj2.x和其set。?
就是通過(guò)vm讀取或?qū)懭雂ata中的數(shù)據(jù)：?
vm將data中的數(shù)據(jù)放到了_data中（_data里的數(shù)據(jù)做了數(shù)據(jù)劫持）
Vue中的數(shù)據(jù)代理.html:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 1.vue中的數(shù)據(jù)代理:通過(guò)vm對(duì)象來(lái)代理data對(duì)象中屬性的操作(讀/寫(xiě))2.Vue中數(shù)據(jù)代理的好處:更加方便的操作data中的數(shù)據(jù)3.基本原理:通過(guò)object.defineProperty()把data對(duì)象中所有屬性添加到vm上.為每一個(gè)添加到vm上的屬性，都指定一個(gè)getter/setter。在getter/setter內(nèi)部去操作（讀/寫(xiě)）data中對(duì)應(yīng)的屬性。--><div id="app"><h2>姓名:{{name}}</h2><!-- vue對(duì)象的屬性可直接在插值表達(dá)式中 --><h2>姓名:{{_data.name}}</h2><h2>年齡:{{age}}</h2></div><script type="text/javascript">let data={name:"張三",age:20}const vm = new Vue({el:"#app",data})</script>
</body>
</html>live server運(yùn)行后，f12控制臺(tái)測(cè)試為：
?vm.name
'張三'
vm.name="王五"
'王五'
vm.name
'王五'
vm._data.name="張柳"
'張柳'
vm.name
'張柳'
vm._data==data
true
如果vue沒(méi)有做數(shù)據(jù)代理，f12控制臺(tái)只能訪(fǎng)問(wèn)vm._data.name了，加上數(shù)據(jù)代理，就可以vm.name使用了。
數(shù)據(jù)代理，就是把_data中的東西放到vm對(duì)象身上。
?事件處理
事件的基本使用.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件的基本使用</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 事件的基本使用:1.使用v-on : xxx或@xxx綁定事件,其中xxx是事件名;2.事件的回調(diào)需要配置在methods對(duì)象中，最終會(huì)在vm上;3.methods中配置的函數(shù),不要用箭頭函數(shù)!否則this就不是vm了;4.methods中配置的函數(shù)，都是被Vue所管理的函數(shù)，this的指向是vm或組件實(shí)例對(duì)象5.@click="demo”和L@click="demo($event)”效果一致，但后者可以傳參;--><div id="root"><h2>歡迎來(lái)到{{name}}學(xué)習(xí)</h2><button v-on:click="showInfo">點(diǎn)我顯示提示信息</button><br/><!-- 也可寫(xiě)成@click --><button @click="showInfo2">點(diǎn)我顯示提示信息2</button><br/><!-- 事件傳遞參數(shù)進(jìn)入 一個(gè)參數(shù)直接寫(xiě),如果要用到event,需要$event占位--><button @click="showInfo3(66,'你好',$event)">點(diǎn)我顯示提示信息3</button></div><script type="text/javascript">const vm = new Vue({el:"#root",data:{name:"尚硅谷",//雖然方法也可寫(xiě)在data中,但會(huì)增加vue負(fù)擔(dān),會(huì)也做數(shù)據(jù)代理和數(shù)據(jù)劫持},methods:{showInfo(event){console.log(event.target.innerText)//點(diǎn)我顯示提示信息console.log(this)//此處的this是vue對(duì)象alert("你好")},showInfo2:(event)=>{console.log(this)//此處的this沒(méi)有自己的this,就找到了全局的Window},//所以推薦所有被vue管理的函數(shù)要寫(xiě)成普通函數(shù),不用寫(xiě)箭頭函數(shù)showInfo3(num,hello,event){console.log(num)console.log(hello)console.log(event)},}})</script>
</body>
</html>天氣案例.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>天氣案例</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><div id="root"><h3>今天天氣很{{info}}</h3><button @click="changeWeather">切換天氣</button><br/><!-- 簡(jiǎn)單的@click事件可如下這樣寫(xiě) --><button @click="isHot=!isHot">切換天氣</button><br/><!-- 甚至vm中data中可以把window也引過(guò)來(lái),但不推薦這樣寫(xiě)哈 --><button @click="window.alert('你好')">切換天氣</button></div>
</body>
<script type="text/javascript">new Vue({el:"#root",data:{isHot:true,window},computed:{info(){return this.isHot? "炎熱":"寒冷"}},methods: {changeWeather(){this.isHot = !this.isHot}},})
</script>
</html>事件修飾符
阻止默認(rèn)行為、阻止冒泡、事件只觸發(fā)一次. . .?
demo.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件修飾符</title><script type="text/javascript" src="../js/vue.js"></script><style>*{margin-top: 20px;}.demo1{height: 50px;background: blanchedalmond;}.box1{background-color: aqua;padding: 10px;}.box2{padding: 10px;background-color: rgb(213, 221, 123);}.list{width: 200px;height: 200px;background-color:coral;/* 形成滾動(dòng)條 */overflow: auto;}li{height: 100px;}</style>
</head>
<body><!-- Vue中的事件修飾符:1.prevent: 阻止默認(rèn)事得(常用）;2.stop:阻止事件冒泡（常用）;3.once:事件只觸發(fā)一次（常用）;4.capture:使用事件的捕獲模式;5.self:只有event.target是當(dāng)前操作的元素是才觸發(fā)事件;6.passive:事件的默認(rèn)行為立即執(zhí)行，無(wú)需等待事件回調(diào)執(zhí)行完畢; --><div id="root"><h2>歡迎來(lái)到{{name}}學(xué)習(xí)</h2><a href="http://www.baidu.com" @click="showInfo">百度</a><br/><!-- 阻止了事件的默認(rèn)行為方式2 .prevent就是事件修飾符--><a href="http://www.baidu.com" @click.prevent="showInfo2">百度2</a><!-- 阻止事件冒泡 @click.stop --><div class="demo1" @click="showInfo2"><button @click.stop="showInfo2">點(diǎn)我提示信息</button></div><!-- 事件只觸發(fā)一次 --><button @click.once="showInfo2">點(diǎn)我提示信息</button><!-- 使用事件的捕獲模式 --><div class="box1" @click="showMsg(1)">div1<div class="box2" @click="showMsg(2)">div2</div></div><!-- 當(dāng)上面div2點(diǎn)擊后，控制臺(tái)先打印2，再打印1，如果給外面盒子div1加上捕獲capture，就會(huì)先捕獲在處理了,就先打印1，再打印2了 --><div class="box1" @click.capture="showMsg(1)">div1<div class="box2" @click="showMsg(2)">div2</div></div><!-- 只有event.target是當(dāng)前操作的元素是才觸發(fā)事件; --><div class="demo1" @click.self="showInfo3"><button @click="showInfo3">點(diǎn)我提示信息</button><!--外層div事件修飾符不加self：f12控制臺(tái)打印了兩邊按鈕的元素，說(shuō)明還是這個(gè)按鈕的事件，所以給外層div加上一個(gè)事件修飾符self也從某種意義上阻止了事件冒泡<button>點(diǎn)我提示信息</button><button>點(diǎn)我提示信息</button>--></div><!-- passive:事件的默認(rèn)行為立即執(zhí)行，無(wú)需等待事件回調(diào)執(zhí)行完畢; --><ul @wheel.passive="demo" class="list"><!--@scroll滾輪和拖曳滾動(dòng)條均可 @whell是僅滾輪滾動(dòng) --><!-- 綁定的demo函數(shù)中有個(gè)很繁瑣的for循環(huán)，默認(rèn)會(huì)等demo函數(shù)完全執(zhí)行完之后才會(huì)執(zhí)行滾輪的默認(rèn)事件，加上passive，就會(huì)不用等demo函數(shù)執(zhí)行完就執(zhí)行滾輪的默認(rèn)事件向下滾動(dòng)了。passive進(jìn)行優(yōu)化的，如移動(dòng)端手機(jī)或平板肯惡搞會(huì)使用一下。 --><li>1</li><li>2</li><li>3</li><li>4</li></ul></div><script type="text/javascript">const vm = new Vue({el:"#root",data:{name:"尚硅谷"},methods:{showInfo(event){event.preventDefault()//阻止了事件的默認(rèn)行為方式1alert("你好")},showInfo2(event){//event.stopPropagation();alert("你好")},showMsg(msg){console.log(msg)},showInfo3(event){console.log(event.target)},demo(){for(let i=0;i<100000;i++){console.log("#")}console.log("累壞了")}}})</script>
</body>
</html>事件修飾符，也可以連著寫(xiě)，@click.stop.prevent=showInfo()
鍵盤(pán)事件
鍵盤(pán)事件.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>鍵盤(pán)事件</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 1.Vue中常用的按鍵別名:回車(chē) => enter 刪除=> delete(捕獲"刪除”和“退格”鍵) 退出=>esc空格=> space換行=> tab 上 => up 下=> down 左=>left 右=> right2.Vue未提供別名的按鍵，可以使用按鍵原始的key值去綁定，但注意要轉(zhuǎn)為kebab-case（短橫線(xiàn)命名）3.系統(tǒng)修飾鍵(用法特殊）:ctrl、alt、 shift、meta即win鍵(1).配合keyup使用:按下修飾鍵的同時(shí)，再按下其他鍵，隨后釋放其他鍵，事件才被觸發(fā)。(2).配合keydown使用:正常觸發(fā)事件。4.也可以使用keyCode去指定具體的按鍵（不推薦)5.Vue.config. keyCodes.自定義鍵名=鍵碼,可以去定制按鍵別名--><div id="root"><input type="text" placeholder="按下回車(chē)鍵提示輸入" @keyup="showInfo"/><br/><!-- vue給常用的按鍵起了別名 Enter別名enter --><input type="text" placeholder="按下回車(chē)鍵提示輸入" @keyup.enter="showInfo2"/><br/><!-- Vue未提供別名的按鍵，可以使用按鍵原始的key值去綁定，但注意要轉(zhuǎn)為kebab-case（短橫線(xiàn)命名） --><input type="text" placeholder="按下caps-lock鍵提示輸入" @keyup.caps-lock="showInfo2"/><br/><!-- 對(duì)于tab，必須使用keydown，不能使用keyup --><input type="text" placeholder="按下tab鍵提示輸入" @keydwon.tab="showInfo2"/><br/><!-- 3.系統(tǒng)修飾鍵(用法特殊）:ctrl、alt、 shift、meta即win鍵(1).配合keyup使用:按下修飾鍵的同時(shí)，再按下其他鍵，隨后釋放其他鍵，事件才被觸發(fā)。(2).配合keydown使用:正常觸發(fā)事件。--><input type="text" placeholder="按下shift鍵提示輸入" @keydown.shift="showInfo2"/><br/><!-- 4.也可以使用keyCode去指定具體的按鍵（不推薦)可讀性差 --><input type="text" placeholder="按下回車(chē)鍵提示輸入" @keydown.13="showInfo2"/><br/> <!-- Vue.config. keyCodes.自定義鍵名=鍵碼,可以去定制按鍵別名 --><input type="text" placeholder="按下回車(chē)鍵提示輸入" @keydown.huiche="showInfo2"/><br/> <!-- 查看鍵盤(pán)按鍵的key和keyCode --><input type="text" placeholder="按下鍵提示輸入" @keyup="showInfo3"/><br/></div><script type="text/javascript">//5.Vue.config. keyCodes.自定義鍵名=鍵碼,可以去定制按鍵別名Vue.config.keyCodes.huiche = 13const vm =new Vue({el:"#root",data:{name:"張三"},methods:{showInfo(e){if(e.keyCode!=13) returnconsole.log(e.keyCode)console.log(e.target.value)},showInfo2(e){console.log(e.target.value)},showInfo3(e){console.log(e.key,e.keyCode)/*Control 17Shift 16CapsLock 20*/}}})</script>
</body>
</html>如果需要按下shift+y時(shí)觸發(fā)事件：@keydown.shift.y="showInfo2"? ? 連寫(xiě)
不用計(jì)算屬性,使用{{方法()}}
計(jì)算屬性
計(jì)算屬性.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>姓名案例-插值語(yǔ)法實(shí)現(xiàn)</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body> <!-- 計(jì)算屬性:1.定義:要用的屬性不存在，要通過(guò)已有屬性計(jì)算得來(lái)，不能是脫離vue的變量。2.原理:底層借助了objcet.defineproperty方法提供的getter和setter。3.get函數(shù)什么時(shí)候執(zhí)行?(1).初次讀取時(shí)會(huì)執(zhí)行一次。(2).當(dāng)依賴(lài)的數(shù)據(jù)發(fā)生改變時(shí)會(huì)被再次調(diào)用。4.優(yōu)勢(shì):與methods實(shí)現(xiàn)相比，內(nèi)部有緩存機(jī)制（復(fù)用），效率更高，調(diào)試方便。5.備注:1.計(jì)算屬性最終會(huì)出現(xiàn)在vm上，直接讀取使用即可。2.如果計(jì)算屬性要被修改，那必須寫(xiě)set函數(shù)去響應(yīng)修改，且set中要引起計(jì)算時(shí)依賴(lài)的數(shù)據(jù)發(fā)生-->
<div id="root">姓：<input type="text" v-model="firstName"><br/><br/>名：<input type="text" v-model="lastName"><br/><br/><!-- {{計(jì)算屬性無(wú)括號(hào)}} -->全名：<span>{{ fullName }}</span><br/>全名：<span>{{ fullName }}</span><br/>全名：<span>{{ fullName }}</span><br/>全名：<span>{{ fullName2 }}</span><br/>全名：<span>{{ fullName3 }}</span><br/><!-- 即使引用了多個(gè)fullName，實(shí)際上fullName的get方法也只是被執(zhí)行了一次，然后緩存了 -->
</div><script type="text/javascript">const vm = new Vue({el:"#root",data:{firstName:"張",lastName:"三"},computed:{ //vm區(qū)找fullName的get方法，拿到返回值賦值給fullNamefullName:{/*l、get有什么作用?當(dāng)有人讀取fullName時(shí)，get就會(huì)被調(diào)用，且返回值就作為fullName的值2、get什么時(shí)候調(diào)用?1.初次讀取fullName時(shí)。2.所依賴(lài)的數(shù)據(jù)發(fā)生變化時(shí)。*/get(){return this.firstName+"-"+this.lastName},//set不是必須寫(xiě)的，當(dāng)fullName被修改時(shí)調(diào)用set(value){const arr = value.split('-')this.firstName = arr[0]this.lastName = arr[1]}//f12中vm.fullname= "李-四"},//計(jì)算屬性簡(jiǎn)寫(xiě)fullName2:function(){return this.firstName+"-"+this.lastName},//計(jì)算屬性簡(jiǎn)寫(xiě)fullName3(){return this.firstName+"-"+this.lastName}}})</script>
</body>
</html>監(jiān)視屬性
監(jiān)視屬性也叫偵聽(tīng)屬性。
天氣案例-監(jiān)視屬性.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>天氣案例</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 監(jiān)視屬性watch:1.當(dāng)被監(jiān)視的屬性變化時(shí)，回調(diào)函數(shù)自動(dòng)調(diào)用，進(jìn)行相關(guān)操作2.監(jiān)視的屬性必須存在,才能進(jìn)行監(jiān)視!!3.監(jiān)視的兩種寫(xiě)法:( 1).new Vue時(shí)傳入watch配置(2).通過(guò)vm.$watch監(jiān)視--><div id="root"><h3>今天天氣很{{info}}</h3><button @click="changeWeather">切換天氣</button><br/></div>
</body>
<script type="text/javascript">const vm = new Vue({el:"#root",data:{isHot:true,},computed:{info(){return this.isHot? "炎熱":"寒冷"}},methods: {changeWeather(){this.isHot = !this.isHot}},watch:{isHot:{/*handler(){console.log('isHot被修改了')}*/// handler什么時(shí)候調(diào)用?當(dāng)isHot發(fā)生改變時(shí)。handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)},immediate:true //初始化時(shí)讓handler調(diào)用一下,默認(rèn)false f12刷新王爺后立即 isHot被修改了 true undefined},//簡(jiǎn)寫(xiě)方式 當(dāng)只有handler時(shí)可以開(kāi)始簡(jiǎn)寫(xiě)形式/*isHot(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)},*/}})// 監(jiān)視屬性也可這樣寫(xiě)/*vm.$watch('isHot',{// handler什么時(shí)候調(diào)用?當(dāng)isHot發(fā)生改變時(shí)。handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)},immediate:true })*///監(jiān)視屬性$watch的簡(jiǎn)寫(xiě) 僅有handler時(shí)可簡(jiǎn)寫(xiě)/*vm.$watch('isHot',function(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)})*/
</script>
</html>深度監(jiān)視
深度監(jiān)視.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>天氣案例</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 深度監(jiān)視:(1).vue中的watch默認(rèn)不監(jiān)測(cè)對(duì)象內(nèi)部值的改變(一層)。(2).配置deep:true可以監(jiān)測(cè)對(duì)象內(nèi)部值改變（多層）。備注:(1).Vue自身可以監(jiān)測(cè)對(duì)象內(nèi)部值的改變，但Vue提供的watch默認(rèn)不可以!(2).使用watch時(shí)根據(jù)數(shù)據(jù)的具體結(jié)構(gòu),決定是否采用深度監(jiān)視。--><div id="root"><h3>今天天氣很{{info}}</h3><button @click="changeWeather">切換天氣</button><br/><hr/><h3>a的數(shù)據(jù)是{{numbers.a}}</h3><button @click="numbers.a++">點(diǎn)我讓a加1</button><br/><hr/><h3>b的數(shù)據(jù)是{{numbers.b}}</h3><button @click="numbers.b++">點(diǎn)我讓a加1</button><br/></div>
</body>
<script type="text/javascript">const vm = new Vue({el:"#root",data:{isHot:true,numbers:{a:1,b:1}},computed:{info(){return this.isHot? "炎熱":"寒冷"}},methods: {changeWeather(){this.isHot = !this.isHot}},watch:{isHot:{handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)}},'numbers.a':{//監(jiān)視多級(jí)結(jié)構(gòu)中某個(gè)屬性的變化，只監(jiān)視a不監(jiān)視bhandler(){console.log("a改變了")}},//再提要求，監(jiān)視numbers中b屬性的變化，c屬性的變化，d、e、f...一百多個(gè)屬性的變化，總不能一個(gè)個(gè)的寫(xiě)吧numbers:{deep:true,//監(jiān)視多級(jí)結(jié)構(gòu)中所有屬性的變化handler(){console.log("numbers改變了")}}}})
</script>
</html>watch對(duì)比computed
watch對(duì)比computed.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>計(jì)算屬性和watch</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body> <!-- computed和watch之間的區(qū)別:1.computed能完成的功能，watch都可以完成。2.watch能完成的功能，computed不一定能完成，例如: watch可以進(jìn)行異步操作。兩個(gè)重要的小原則;1.所被Vue管理的函數(shù)，最好寫(xiě)成普通函數(shù)，這樣this的指向才是vm或組件實(shí)例對(duì)象。2.所有不被Vue所管理的函數(shù)（定時(shí)器的回調(diào)函數(shù)、ajax的回調(diào)函數(shù)等)，最好寫(xiě)成箭頭函數(shù)，這樣thi的指向才是vm或組件實(shí)例對(duì)象。 -->
<div id="root">姓：<input type="text" v-model="firstName"><br/><br/>名：<input type="text" v-model="lastName"><br/><br/>全名：<span>{{ fullName }}</span><br/>
</div><script type="text/javascript">const vm = new Vue({el:"#root",data:{firstName:"張",lastName:"三",fullName:"張-三"},computed:{ /*fullName(){return this.firstName+"-"+this.lastName}*/},watch:{firstName(newValue){//相比計(jì)算屬性賦值，watch中方法還可以使用函數(shù)，如計(jì)時(shí)器。而計(jì)算屬性中由于依賴(lài)返回值，不能開(kāi)啟異步任務(wù)維護(hù)數(shù)據(jù)，不能使用計(jì)時(shí)器setTimeout(() => {//因?yàn)槎〞r(shí)器的回調(diào)不受vue控制，js引擎調(diào)的，所以可以且必須寫(xiě)成箭頭函數(shù)//因?yàn)椴皇躹ue管理，this就往外找，找到了firstName中的this，時(shí)vue管理的，所以下面的this.fullName又受vue管理了。倘若不寫(xiě)箭頭函數(shù)而寫(xiě)普通函數(shù)，那this由于不受vue管理，而受window管理，就變成了window.fullName了this.fullName=newValue+"-"+this.lastName}, 1000);},lastName(val){this.fullName=this.firstName+"-"+val}}})</script>
</body>
</html>綁定class樣式
f12元素中可直接編輯，失去焦點(diǎn)就會(huì)運(yùn)用
綁定樣式.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>綁定樣式</title><script type="text/javascript" src="../js/vue.js"></script><style>.basic{width: 200px;height: 200px;border-style: solid;border-color: blue;}.happy{background-color: rgb(233, 236, 30)}.sad{background-color: rgb(30, 236, 191)}.normal{background-color: rgb(128, 211, 19)}.style1{background-color: rgb(211, 153, 19)}.style2{font-size: 50px;}.style3{border-radius: 20%;}</style>
</head>
<body><!-- 綁定樣式:1.class樣式寫(xiě)法:class="xxx"xxx可以是字符串、對(duì)象、數(shù)組。字符串寫(xiě)法適用于:類(lèi)名不確定,要?jiǎng)討B(tài)獲取。對(duì)象寫(xiě)法適用于:要綁定多個(gè)樣式,個(gè)數(shù)不確定,名字也不確定。數(shù)組寫(xiě)法適用于:要綁定多個(gè)樣式，個(gè)數(shù)確定，名字也確定，但不確定用不用.2. style樣式:style="{fontsize: xxx}"其中xxx是動(dòng)態(tài)值。: style="[a,b]"其中a、b是樣式對(duì)象。 --><div id="root"><!-- <div class="basic normal" id="demo" @click="changeMod">{{name}}</div> --><!-- 綁定class樣式--字符串寫(xiě)法,適用于:樣式的類(lèi)名不確定，需要?jiǎng)討B(tài)指定 --><div class="basic" :class="mod" @click="changeMod">{{name}}</div><br/><br/><!-- 綁定class樣式--數(shù)組寫(xiě)法，適用于:要綁定的樣式個(gè)數(shù)不確定、名字也不確定 --><div class="basic" :class="arr" >{{name}}</div><br/><br/><!-- 綁定class樣式--對(duì)象寫(xiě)法，適用于:要綁定的樣式個(gè)數(shù)確定、名字也確定，但要?jiǎng)討B(tài)決定用不用 --><div class="basic" :class="classObj" >{{name}}</div><br/><br/><!-- css的烤肉串變成駝峰命名 --><div class="basic" :style="{fontSize: fsize+'px'}" >{{name}}</div><br/><br/><!-- 綁定style樣式--對(duì)象寫(xiě)法 --><div class="basic" :style="styleObj" >{{name}}</div><br/><br/><!-- 綁定style樣式--數(shù)組寫(xiě)法 --><div class="basic" :style="[styleObj,styleObj2]" >{{name}}</div><br/><br/><div class="basic" :style="styleArr" >{{name}}</div><br/><br/></div><script type="text/javascript">const vm = new Vue({el:"#root",data:{name:"張三",mod:"normal",arr:["style1","style2","style3"],/*可在f12控制臺(tái)中：vm.arr.shift()'style1'vm.arr.shift()'style2'vm.arr.shift()'style3'vm.arr.push("style1")1vm.arr.push("style2")2vm.arr.push("style3")*/classObj:{style1:false,style2:false},fsize:30,styleObj:{fontSize: '30px' //css的烤肉串變成駝峰命名},styleObj2:{backgroundColor: "orange" //css的烤肉串變成駝峰命名},styleArr:[{fontSize: '30px' //css的烤肉串變成駝峰命名},{backgroundColor: "orange" //css的烤肉串變成駝峰命名}]},methods: {changeMod(){//document.getElementById("demo").className='basic happy'//傳統(tǒng)的js切換class//this.mod="happy"const arr=["happy","sad","normal"]const index = Math.floor(Math.random()*3) //0-1,乘以3，向下取整this.mod=arr[index]}},})</script>
</body>
</html>條件渲染
條件渲染.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>條件渲染</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 條件渲染:1.v-if寫(xiě)法:(1).v-if="表達(dá)式"(2).v-else-if="表達(dá)式"(3).v-else="表達(dá)式"適用于:切換頻率較低的場(chǎng)景。特點(diǎn):不展示的DOM元素直接被移除。注意:v-if可以和:v-else-if、v-else一起使用，但要求結(jié)構(gòu)不能被"“打斷”。2.v-show寫(xiě)法:v-show="表達(dá)式"適用于:切換頻率較高的場(chǎng)景。特點(diǎn):不展示的DOM元素未被移除,僅僅是使用樣式隱藏掉3.備注:使用v-if的時(shí)，元素可能無(wú)法獲取到，而使用v-show一定可以獲取到。 --><div id="root"><!-- 使用v-show做條件渲染，如果為false,就為display:none掉 切換頻率高推薦使用v-show--><h2 v-show="a">歡迎你:{{name}} </h2><h2 v-show="1==1">歡迎你:{{name}} </h2><!-- 使用v-if做條件渲染，如果為false，v-if標(biāo)記的整個(gè)組件都不存在了 切換頻率低的推薦使用v-if--><h2 v-if="a">歡迎你:{{name}} </h2><h2 v-if="1==1">歡迎你:{{name}} </h2><h2>當(dāng)前的n值為：{{n}}</h2><button @click="n++">點(diǎn)我n+1</button><div v-show="n==1">Angular</div><div v-show="n==2">React</div><div v-show="n==3">Vue</div><!-- if成立的話(huà)，else-if就不執(zhí)行了，效率更高一些 --><div v-if="n==1">Angular</div><div v-else-if="n==2">React</div><div v-else-if="n==3">Vue</div><div v-else="n==4">哈哈</div><!-- v-else不需要寫(xiě)條件，如果寫(xiě)條件了也不生效 --><!-- v-if、v-else-if、v-else，v-if為最開(kāi)始的，且結(jié)構(gòu)體不可被打斷，打斷后面的代碼不生效了 --><!-- <template>只能配合v-if，不影響結(jié)構(gòu) --><template v-if="n==1"><h2>你好</h2><h2>happy</h2><h2>hello</h2></template></div><script type="text/javascript">new Vue({el:"#root",data:{name:"張三",a:false,n:0}})</script>
</body>
</html>