當(dāng)前位置：首頁 >

VUE框架（一）

發(fā)布時(shí)間：2024/1/1 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 VUE框架（一）小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

一、VUE環(huán)境搭建

1.1、下載開發(fā)版本的Vue

開發(fā)版本：https://cn.vuejs.org/js/vue.js

生產(chǎn)版本：https://cn.vuejs.org/js/vue.min.js

1、下載完畢后引入

<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="../js/vue.js"></script> </head>

1.2、安裝開發(fā)者工具

谷歌應(yīng)用商店直接下載：Vue.js devtools

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

安裝完畢后查看：

?1.3、關(guān)閉vue在啟動(dòng)時(shí)生成的生產(chǎn)環(huán)境提示

在瀏覽器上檢查

二、寫一個(gè) hello world

<body> <div id="root"><h1>hello: {{name}},{{age}}</h1> </div><script type="text/javascript"> // 阻止vue在啟動(dòng)時(shí)生成的生產(chǎn)環(huán)境提示 Vue.config.productionTip = false// 創(chuàng)建Vue實(shí)例 const x = new Vue({el: "#root", // 綁定id="root"的容器，值通常為css選擇器字符串 (CSS里面的ID選擇器)data:{ // data里面存儲(chǔ)的數(shù)據(jù)，給'el'指定的容器使用name: "wdl",age:18} }) </script></body># 執(zhí)行結(jié)果：hello: wdl,18

2.1、總結(jié)下這個(gè)簡(jiǎn)單的代碼
????1、想讓Vue工作，就必須創(chuàng)建一個(gè)vue實(shí)例，并且傳入一個(gè)配置對(duì)象(el和data)
????2、root容器的代碼依然符合html規(guī)范，只不過混入了一些特殊的Vue語法
????3、root容器里的代碼被稱為(Vue模板)

? ? ?

三、延伸一下

3.1、在div容器內(nèi){{}}里面除了寫vue的data里面的，還可以寫js表達(dá)式

<body> <div id="root"><h1>1，{{name}},{{addr.toUpperCase()}},{{1 + 1}}</h1> </div><script type="text/javascript"> Vue.config.productionTip = false // 阻止vue在啟動(dòng)時(shí)生成的生產(chǎn)環(huán)境提示// 創(chuàng)建Vue實(shí)例 new Vue({el: '#root', // el 指定當(dāng)前實(shí)例為哪個(gè)容器服務(wù)，值通常為CSS里面的選擇器data: { // 用于存儲(chǔ)數(shù)據(jù)，給el指定的容器'#root'使用。name: 'sudada',addr: 'shanghai',}, })</script></body># 執(zhí)行結(jié)果：1，sudada,SHANGHAI,2

3.2、總結(jié)下

? ? 1、Vue實(shí)例和容器是一一對(duì)應(yīng)的。
? ? 2、真是開發(fā)中只有一個(gè)Vue實(shí)例，并且會(huì)配合著組件一起使用。
? ? 3、一旦data中的數(shù)據(jù)發(fā)生改變，那么模板中用到改數(shù)據(jù)的地方也會(huì)自動(dòng)更新。
? ? 4、{{xxx}}中的xxx要寫js表達(dá)式，且xxx可以自動(dòng)讀取到data中的所有屬性

四、模板語法

4.1、插值語法和指令語法(v-xxx)

<body><div id="root"><h1>插值語法</h1><h3>hello,{{name}}</h3><h1>指令語法</h1><h1>奧術(shù){{name}}大師</h1><a :href="url">百度</a><a :href="school.url">點(diǎn)我去學(xué)校{{school.name}}學(xué)習(xí)</a></div></body><script type="text/javascript">Vue.config.productionTip = falsenew Vue ({el:'#root',data:{name:'jack',url:'http://www.baidu.com',school:{name:"sudada",url:'http://www.sougou.com'}}}) </script>

4.2、總結(jié)插值語法和指令語法

??1、插值語法：一般用于解析"標(biāo)簽體"內(nèi)容（<h1>xxx</h1>，這個(gè)標(biāo)簽了里面的"xxx"就是標(biāo)簽體）
????寫法：{{xxxx}}，xxxx是js表達(dá)式，且可以直接讀取到data中的所有屬性
??2、指令語法：格式為?"v-xxx"?一般用于解析"標(biāo)簽"?(包含標(biāo)簽屬性，標(biāo)簽內(nèi)容，綁定事件等)（<a?:href="school.url"?x="hello">，這里面的":href"和x="hello"就是標(biāo)簽屬性?）
????寫法：v-bind:href="xxx"?簡(jiǎn)寫為?:href="xxx"，"xxx"會(huì)被當(dāng)做js表達(dá)式執(zhí)行，可以直接讀取到data中的所有屬性。

五、數(shù)據(jù)綁定

5.1、單向、雙向數(shù)據(jù)綁定

<body><div id="root"><h1>{{name}}</h1>單向數(shù)據(jù)綁定: <input type="text" :value="name"><br>雙向數(shù)據(jù)綁定: <input type="text" v-model="name"><br><h2 v-model:x="name">hello</h2></div> </body><script type="text/javascript">Vue.config.productionTip = falsenew Vue({el:"#root",data:{name:"wdl",input_value:"xxx"}}) </script>

5.2、單向、雙向數(shù)據(jù)綁定總結(jié)

??單向數(shù)據(jù)綁定(只針對(duì)表單input輸入類,input輸入的值就是value)：v-bind:value="name"，里面的'value'會(huì)去讀"name"的值，當(dāng)修改'value'的值時(shí)，"name"的值不會(huì)改變。只能讀不能改
??雙向數(shù)據(jù)綁定(只針對(duì)表單input輸入類,input輸入的值就是value)：v-model:value="name"，里面的'value'會(huì)去讀"name"的值，當(dāng)修改'value'的值時(shí)，"name"的值也會(huì)跟著改變。可讀可改寫。
????v-model:value?可以簡(jiǎn)寫為：v-model，因?yàn)関-model默認(rèn)收集的就是value值。
??數(shù)據(jù)綁定簡(jiǎn)寫：
??????單向數(shù)據(jù)綁定:?<input?type="text"?:value="name"><br>
??????雙向數(shù)據(jù)綁定:?<input?type="text"?v-model="name"><br>

六、el和data的兩種寫法

<body><div id="root"><h1>hello,{{name}}</h1> </div><script type="text/javascript">// 一、el 的2種寫法（2種方式皆可正常使用）// el 方法：把vue實(shí)例對(duì)象綁定(掛載)到容器（定義時(shí)就指定綁定哪個(gè)容器）new Vue({el:"#root",data:{name:"111",}})// $mount 方法：把vue實(shí)例對(duì)象，綁定(掛載)到容器（最后在指定綁定哪個(gè)容器）const v = new Vue({data:{name:"222",}})console.log(v)v.$mount("#root")// 二、data 的2種寫法new Vue({el: "#root",// data的第一種寫法：對(duì)象式data: {name: "sudada",},// data的第二種寫法：函數(shù)式（不能寫成"=>"函數(shù)。data函數(shù)必須要返回一個(gè)數(shù)據(jù)，這個(gè)返回的數(shù)據(jù)，就是容器內(nèi)用到的數(shù)據(jù)。比如容器內(nèi)用的是name，那么這里就要return一個(gè)name）data(){ // 普通函數(shù)，原生寫法：data:functionconsole.log(this) // 此處的this是vue實(shí)例對(duì)象（這里的this就等于"const v = new Vue"的v）return{name: "szq"}}}) </script>

七、MVVM模型

7.1、MVVM模型圖解

MVVM模型：
??1、M：模型(Model)：data中的數(shù)據(jù)
??2、V:?視圖(View)：頁面模板（DOM）
??3、VM：視圖模型(ViewModel)：Vue實(shí)例，簡(jiǎn)稱vm
觀察發(fā)現(xiàn)：
??1、data對(duì)象中的所有屬性(值)，最后都出現(xiàn)在了vm身上。(可以通過vm.xxx拿到data對(duì)象里面xxx的值)
??2、vm身上的所有屬性以及Vue原型上所有屬性，在Vue模板中都可以直接使用。（vm?這個(gè)變量名就表示了Vue實(shí)例對(duì)象）

?7.2、用法說明

<body> <div id="root"><h1>學(xué)校：{{name}}</h1><h1>地址：{{addr}}</h1><h1>1：{{$options}}</h1></div> </body><script type="text/javascript">Vue.config.productionTip = false// ViewModel模型，簡(jiǎn)稱vm（vm 這個(gè)變量名就表示了Vue實(shí)例對(duì)象）const vm = new Vue({el:"#root",// Model 模型data:{name:"sudada",addr:"shanghai",}})console.log(vm)console.log(vm.name) </script>

八、Vue中的數(shù)據(jù)代理

8.1、原理與實(shí)現(xiàn)

1、Vue中的數(shù)據(jù)代理：是通過vm對(duì)象中屬性的操作（讀/寫）
2、Vue中數(shù)據(jù)代理的好處：更加方便的操作data中的數(shù)據(jù)
3、基本原理：
??通過Object.defineProperty()把data對(duì)象中所有屬性添加到vm上。
??為每一個(gè)添加到vm的屬性，都指定一個(gè)"getter/setter"。
??在"getter/setter"內(nèi)部去操作（讀/寫）data中對(duì)應(yīng)的屬性。
4、實(shí)踐證明:
??console.log(vm.name)：獲取的是data里面name屬性的值，實(shí)際上調(diào)用的是Vue的"get?name"方法實(shí)現(xiàn)的。
??console.log(vm.name="szq")：修改的是data里面name屬性的值，實(shí)際上調(diào)用的是Vue的"set?name"方法實(shí)現(xiàn)的。
5、vm如何獲取data對(duì)應(yīng)的值，使用vm._data，返回的值是是一個(gè)對(duì)象。（vm._data?==?options.data?==?data）

8.2、數(shù)據(jù)代理圖示?

九、事件處理

9.1、綁定事件（鼠標(biāo)點(diǎn)擊/單擊時(shí)觸發(fā)）

????1、綁定事件v-on:click?簡(jiǎn)寫為?@click
????2、綁定事件觸發(fā)的函數(shù)要寫到methods里面，不建議寫到data里面

<body><div id="root"><button @click="showinfo1">點(diǎn)我提示1(不傳參)</button><button @click="showinfo2($event,666)">點(diǎn)我提示2(傳參)</button> </div></body><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el:'#root',data:{name:'xxx',address:'sh',},// 通過methods配置項(xiàng)，把事件的回調(diào)函數(shù)放到這里面。methods:{// showinfo1 函數(shù)可以傳遞對(duì)象，默認(rèn)對(duì)象式event// event：事件對(duì)象(點(diǎn)擊按鈕后,默認(rèn)提供)// 可以通過event.target拿到目標(biāo)("button"按鈕)// 函數(shù)內(nèi)的打印this, 拿到的就是vm(Vue實(shí)例對(duì)象)// 所有被vue管理的函數(shù)最好都寫成普通函數(shù)，盡量不寫箭頭函數(shù)showinfo1(event){console.log(event.target)console.log(this)alert('點(diǎn)我提示1')},showinfo2(event,number){console.log(event.target)console.log(number)alert('點(diǎn)我提示2')},}}) </script>

9.2.1、綁定事件總結(jié)

? 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="showInfo1"?和?@click="showInfo2($event,66)"效果一樣，但是后者可以傳參。

9.2、事件的修飾符

? 事件修飾符可以連著寫：@click.prevent.stop? 先阻止默認(rèn)事件，再阻止事件冒泡

? 1、@click.prevent?阻止默認(rèn)事件(常用)
??2、@click.stop?阻止事件冒泡(常用)
??3、@click.once?事件只觸發(fā)一次(常用)
??4、@click.capture?使用事件的捕捉模式
??5、@click.self?只有event.target是當(dāng)前操作的元素時(shí)才觸發(fā)時(shí)間
??6、@click.passive?事件的默認(rèn)行為立即執(zhí)行，無需等待事件回調(diào)執(zhí)行完畢

9.2.1、事件處理是先捕獲，在冒泡。
??捕獲階段：由外往內(nèi)
??冒泡階段：由內(nèi)往外

9.2.2、代碼示例

<body><style>/* 通配符，所有元素之間都有20px的間距*/*{margin-top:20px;}.demo1{width: 115px;height: 110px;float: left;margin: 7px;background-color: red;}.box1{padding: 5px;background-color: aqua;}.box2{padding: 5px;background-color: rosybrown;} </style><div id="root"><a href="https://www.baidu.com" @click.prevent="showinfo">點(diǎn)我跳轉(zhuǎn)</a><div class="demo1" @click="showinfo"><button @click.stop="showinfo">點(diǎn)我提示2</button></div><button @click.once="showinfo">點(diǎn)我提示3</button><div class="box1" @click.capture="showmsg(1)">div1<div class="box2" @click="showmsg(2)">div2</div></div><div class="demo1" @click.self="showinfo"><button @click="showinfo">點(diǎn)我提示4</button></div></div></body><script type="text/javascript">Vue.config.productionTip = falsenew Vue({el:"#root",data:{name:"sudada",addr:"shanghai",},methods:{showinfo(e){// e.preventDefault(); // 阻止默認(rèn)行為，需要在函數(shù)內(nèi)接收參數(shù)"e"// e.stopPropagation(); // 阻止事件冒泡，需要在函數(shù)內(nèi)接收參數(shù)"e"alert("同學(xué)你好")},showmsg(msg){console.log(msg)}}}) </script>

9.3、鍵盤事件

9.3.1、總結(jié)鍵盤事件

????keyup：任意鍵盤"按下去然后松手"就會(huì)觸發(fā)
????keydown：任意鍵盤"按下去"就會(huì)觸發(fā)

1)、Vue常見的按鍵別名：
????????回車鍵：@keyup.enter
????????刪除鍵：@keyup.delete（退格鍵和delete鍵都能觸發(fā)）
????????退出鍵：@keyup.esc
????????空格鍵：@keyup.space
????????換行鍵：@keyup.tab（這個(gè)鍵比較特殊，需要使用：@keydown.tab，使用@keyup.tab會(huì)和"tab鍵"本身的功能有沖突）
????????上鍵：@keyup.up
????????下鍵：@keyup.down
????????左鍵：@keyup.left
????????右鍵：@keyup.right

2)、系統(tǒng)修飾鍵（特殊用法）：@keyup.ctrl，@keyup.alt，@keyup.shift，@keyup.meta
????????配合@keydown使用：正常觸發(fā)
????????配合@keyup使用：按下修飾鍵的同時(shí)，在按下其他鍵，隨后釋放其他鍵，時(shí)間才會(huì)觸發(fā)。

9.3.2、鍵盤事件示例

<body><div id="root"><h1>hello,{{name}}</h1><input type="text" @keydown.tab="showinfo"> </div></body><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el:"#root",data:{name:"szq"},methods:{showinfo(e){// e 就是event，默認(rèn)傳遞的事件對(duì)象// e.target.value 拿到的就是input框內(nèi)輸入的值console.log(e.target.value)}}}) </script>

十、計(jì)算屬性

什么是屬性 Property ？

data(對(duì)象) 里面定義的值，都是屬性，都可以使用?{{?屬性?}} 直接解析到?屬性的值。

data:{firstname:"蘇",lastname:"三", },

什么是方法?method ？

fullname?這個(gè)函數(shù)就是一個(gè)方法，可以使用?{{?fullname()?}}?直接拿到?方法的返回值。

methods:{fullname(){return this.firstname + "-" + this.lastname} }

10.1、什么是計(jì)算屬性？

計(jì)算屬性是單獨(dú)定義的屬性(格式和data一樣)，是一個(gè)全新的配置項(xiàng) "computed"。

計(jì)算屬性總結(jié)：先拿到現(xiàn)有的屬性(a,b)，然后做一次加工(a+b)，最后生成一個(gè)全新的屬性(a+b=c,c這個(gè)屬性就是計(jì)算屬性)
1、定義：要用的屬性c不存在，要通過"已有的屬性a,b"，"計(jì)算a+b=c"得來的。
2、原理：底層借助了Object.defineproperty方法提供getter和setter。
3、get函數(shù)什么時(shí)候執(zhí)行？（計(jì)算屬性什么時(shí)候執(zhí)行？）
??初次讀取時(shí)會(huì)執(zhí)行一次；
??當(dāng)計(jì)算屬性內(nèi)"任何一個(gè)被依賴的數(shù)據(jù)"發(fā)生"改變"時(shí)，計(jì)算屬性會(huì)被再次執(zhí)行。
4、優(yōu)勢(shì)：與methods實(shí)現(xiàn)相比，內(nèi)部有"緩存機(jī)制(可以復(fù)用)"，效率更高，調(diào)試方便。
5、備注：
??計(jì)算屬性最終會(huì)出現(xiàn)在vm上，直接讀取使用即可：this.xxx。
??如果計(jì)算屬性要被修改，那必須寫"set函數(shù)"去響應(yīng)修改，且"set函數(shù)"要對(duì)原屬性a或者b的值做修改，修改的值就是"set函數(shù)"傳入的值。

10.2、代碼示例

<body> <div id="root">姓:<input type="text" v-model="firstname"> <br>名:<input type="text" v-model="lastname"> <br>全名: <span>{{fullname}}</span> </div> </body><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el:"#root",data:{firstname:"su",lastname:"dada",},// 計(jì)算屬性 computedcomputed:{// 把計(jì)算過程配置成一個(gè)對(duì)象fullname:{// 讀fullname時(shí)，執(zhí)行g(shù)et函數(shù)，并返回值// get什么時(shí)候調(diào)用？// 1.初次讀取fullname時(shí)// 2.所依賴的數(shù)據(jù)（this.firstname或者this.lastname）發(fā)生變化時(shí)。get(){console.log('get被調(diào)用')return this.firstname + "-" + this.lastname},// 當(dāng)fullname被修改時(shí)，那么執(zhí)行set函數(shù)// value 就是被修改后收到的值，比如把 fullname="張-三"修改為 fullname="李-四"，那么"value"的值就是"李-四"set(value){console.log('set被調(diào)用', value)// 把收到的value的值，做拆分const arr = value.split('-')// 姓就是數(shù)組的第一個(gè)值this.firstname = arr[0]// 名就是數(shù)組的第二個(gè)值this.lastname = arr[1]}}}}) </script>

10.3、計(jì)算屬性簡(jiǎn)寫（只有在不寫set的情況下才能使用簡(jiǎn)寫方式，如果有set的話，不能簡(jiǎn)寫。）

十一、監(jiān)視屬性

?11.1、監(jiān)視屬性watch總結(jié)
? 1、當(dāng)"被監(jiān)視"的屬性發(fā)生變化時(shí)，"回調(diào)函數(shù)handler"自動(dòng)調(diào)用，進(jìn)行相關(guān)操作
? 2、"被監(jiān)視"的屬性必須存在，才能進(jìn)行監(jiān)視
? 3、監(jiān)視屬性的2種寫法：
? ? 1. new Vue 時(shí)傳入watch配置
? ? 2. 通過 vm.$watch 監(jiān)視

11.2、監(jiān)視屬性，代碼示例

<body> <div id="root"><h2>今天天氣很{{info}}</h2><button @click="changeweather">切換天氣</button> </div> </body><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el:"#root",data:{isHot: true,},computed:{info(){return this.isHot ? "炎熱" : "涼爽"}},methods:{changeweather(){this.isHot = !this.isHot}},// 監(jiān)視方法一(2選1)：watch:{// 使用watch方法，監(jiān)測(cè)一個(gè)數(shù)據(jù)，這里是"isHot"isHot:{// 初始化時(shí)讓handler調(diào)用一下。immediate:true,// 當(dāng) isHot 發(fā)生改變時(shí)，handler被調(diào)用。// oldValue 修改前的值// newValue 修改后的值handler(newValue,oldValue){console.log("isHot被修改了",newValue,oldValue)},}}})// 監(jiān)視方法二(2選1)：// vm.$watch("isHot",{// immediate:true,// handler(newValue,oldValue){// console.log("isHot被修改了",newValue,oldValue)// },// }) </script>

11.3、深度監(jiān)視（舉例說明）
? ? 1.Vue中的watch默認(rèn)不監(jiān)測(cè)"對(duì)象內(nèi)部值"的改變? ?(詳見：11.3.1)

? ? 2.配置的"deep:true"可以監(jiān)測(cè)"對(duì)象內(nèi)部值"改變? ? ?(詳見：11.3.2)

? ? 3.備注：
? ? ? ? 1.Vue自身可以監(jiān)測(cè)對(duì)象內(nèi)部值的改變，但Vue提供的watch默認(rèn)不可以。
? ? ? ? 2.使用watch時(shí)可以根據(jù)數(shù)據(jù)的具體結(jié)構(gòu)，決定是否采用深度監(jiān)視(deep:true)。

11.3.1、Vue中的watch默認(rèn)不監(jiān)測(cè)"對(duì)象內(nèi)部值"的改變

例子1：當(dāng)numbers屬性值是numbers:{a=1,b=2}，numbers.a發(fā)生改變時(shí)，watch是不監(jiān)測(cè)的，handler函數(shù)不會(huì)執(zhí)行。

<body> <div id="root"><h3>a的值是:{{numbers.a}}</h3><button @click=numbers.a++>點(diǎn)我a++</button> </div> </body><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el:"#root",data:{numbers:{a:1}},watch:{// 使用watch方法，監(jiān)測(cè)numbers屬性numbers:{handler(newValue,oldValue){console.log("numbers被修改了",newValue,oldValue)}}}})</script>

例子2：當(dāng)numbers屬性值是numbers:true，此時(shí)當(dāng)numbers的值發(fā)生改變(numbers=false)時(shí)，watch是監(jiān)測(cè)的，handler函數(shù)會(huì)執(zhí)行。

11.3.2、配置"deep:true"時(shí)，watch可以監(jiān)測(cè)"對(duì)象內(nèi)部值"改變

當(dāng)numbers屬性值是numbers:{a=1,b=2}，numbers.a發(fā)生改變時(shí)，watch是監(jiān)測(cè)的，handler函數(shù)會(huì)執(zhí)行。

<body> <div id="root"><h3>a的值是:{{numbers.a}}</h3><button @click=numbers.a++>點(diǎn)我a++</button> </div> </body><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el:"#root",data:{numbers: {a:1,b:2}},watch:{// 使用watch方法，監(jiān)測(cè)numbers屬性numbers:{deep:true,handler(newValue,oldValue){console.log("numbers被修改了",newValue,oldValue)}}}}) </script>

11.3.3、watch監(jiān)視多級(jí)結(jié)構(gòu)中"某個(gè)屬性"的變化

當(dāng)numbers屬性值是numbers:{a=1,b=2}，numbers.a發(fā)生改變時(shí)，或者numbers.b發(fā)生改變時(shí)，watch是能監(jiān)測(cè)到的，handler函數(shù)會(huì)執(zhí)行。

<body> <div id="root"><h3>a的值是:{{numbers.a}}</h3><button @click=numbers.a++>點(diǎn)我a++</button><hr/><h3>b的值是:{{numbers.b}}</h3><button @click=numbers.b++>點(diǎn)我b++</button> </div> </body><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el:"#root",data:{numbers: {a:1,b:2}},watch:{// 監(jiān)視多級(jí)結(jié)構(gòu)中某個(gè)屬性的變化，這里監(jiān)視的是"numbers.a""numbers.a":{handler(newValue,oldValue){console.log("numbers.a被修改了",newValue,oldValue)},},// 監(jiān)視多級(jí)結(jié)構(gòu)中某個(gè)屬性的變化，這里監(jiān)視的是"numbers.b""numbers.b":{handler(newValue,oldValue){console.log("numbers.b被修改了",newValue,oldValue)},},}}) </script>

11.4、監(jiān)視屬性的簡(jiǎn)寫（當(dāng)對(duì)象里面只有 handler 時(shí)，就可以使用簡(jiǎn)寫了。就不能配置 "immediate:true" 和 "deep:true"）

<body> <div id="root"><h3>a的值是:{{numbers}}</h3><button @click=numbers=!numbers>點(diǎn)我修改a</button> </div> </body><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el:"#root",data:{numbers: true},watch:{// 簡(jiǎn)寫：當(dāng)對(duì)象里面只有 handler 時(shí)，就可以使用簡(jiǎn)寫了。就不能配置 "immediate:true" 和 "deep:true"numbers(newValue,oldValue){console.log("numbers被修改了",newValue,oldValue)}}})// 簡(jiǎn)寫：就不能配置 "immediate:true" 和 "deep:true"// vm.$watch("isHot",function (newValue,oldValue){// console.log("isHot被修改了",newValue,oldValue)// }) </script>

11.5、計(jì)算屬性和監(jiān)視屬性的區(qū)分

computed和watch的區(qū)別：
? 1.computed能完成的功能，watch都可以完成，
? 2.watch能完成的功能，computed不一定能完成，比如watch可以進(jìn)行異步操作。
2個(gè)重要的小原則：
? 1.所有被Vue管理的函數(shù)，最好寫成普通函數(shù)，這樣this的指向才是vm 或者實(shí)例對(duì)象
? 2.所有不被Vue管理的函數(shù)(定時(shí)器的回調(diào)函數(shù)，ajax的回調(diào)函數(shù)等)，最好寫成箭頭函數(shù)，這樣this的指向才是vm 或組件實(shí)例對(duì)象。

十二、綁定樣式（不變的樣式寫死，變化的樣式使用":class"動(dòng)態(tài)綁定）

12.1、綁定樣式寫法說明

? 1.class 樣式（常用）
? ? 寫法：:class="xxx"，xxx可以是字符串，對(duì)象，數(shù)組
? ? ? 字符串寫法，適用于：樣式的類名不確定，需要?jiǎng)討B(tài)指定。
? ? ? 數(shù)組寫法，適用于：要綁定的樣式個(gè)數(shù)不確定，名字也不確定。
? ? ? 對(duì)象寫法，適用于：要綁定的樣式個(gè)數(shù)確定，名字也確定，但要?jiǎng)討B(tài)決定是否使用。
? 2.style 樣式（不常用）
? ? :style="{fontSize: xxx}" 其中xxx是動(dòng)態(tài)值。
? ? :style="xxx" ?其中xxx是樣式對(duì)象。

12.2、綁定樣式例子

<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="../js/vue.js"></script><style>.normal{color: red;font-size: 15px;margin-left: 25px;}.happy {color: yellow;font-size: 10px;text-decoration: line-through;margin-left: 10px;}.nohappy{color: green;font-size: 10px;text-decoration: line-through;margin-left: 10px;}</style> </head><body> <div id="root"><div class=normal :class=mood @click=changemood>{{name}}</div> <br/><div class=normal :class=classarr @click=changemood>{{name}}</div> <br/><div class=normal :class=classobj> {{name}} </div> <br/><div class=normal :style=styleobj> {{name}} </div> <br/> </div> </body><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el:"#root",data:{name:"sudada",// 字符串寫法mood:"normal",// 數(shù)組寫法classarr:["nohappy","happy"],// 對(duì)象寫法classobj:{normal:false, // 為false默認(rèn)不使用, 為true時(shí)使用happy:true},// 綁定style樣式，對(duì)象寫法styleobj:{fontSize:"40px", // fontSize 為固定寫法，是font-size的意思(顯示字體大小的格式)color:"yellow", // 字體顏色(單個(gè)字段)}},methods:{// 字符串寫法例子changemood(){this.mood = "happy"},}}) </script>

十三、列表渲染（符合某些條件，做對(duì)應(yīng)的渲染）

13.1、v-show使用

? ? 寫法：v-show="表達(dá)式"
? ? 適用于：切換頻率較高的場(chǎng)景
? ? 特點(diǎn)：不展示的dom元素未被移出，僅僅是是使用樣式隱藏掉。

<body> <div id="root"><div v-show="false">hello,{{name}}</div><h2>當(dāng)前的n值是{{n}}</h2><button @click="n++">點(diǎn)我n+1</button><div v-show="n===1">v-show顯示111</div><div v-show="n===2">v-show顯示222</div><div v-show="n===3">v-show顯示333</div></div> </body>

13.2、v-if使用

? ? 適用于：切換頻率較低的場(chǎng)景
? ? 特點(diǎn)：不展示dom元素，直接刪除
? ? 注意：v-if可以和v-else-if，v-else 一起使用，但要求結(jié)構(gòu)不能被"打斷"

<body> <div id="root"><div v-if="false">hello,{{name}}</div><div v-if="n===1">v-if顯示111</div><div v-else-if="n===2">v-if顯示222</div><div v-else-if="n===3">v-if顯示333</div><div v-else>v-else哈哈哈</div><template v-if="n===1"><h2>111</h2><h2>222</h2><h2>333</h2></template> </div> </body>

十四、列表渲染

14.1、v-for循環(huán)遍歷

<body> <div id="root"><h2>人員列表</h2><ul><li v-for="(p,index) in persons" :key="index">{{p.name}}-{{p.age}}</li></ul><ul><li v-for="(v,k) in car" :key="k">{{v}}--{{k}}</ul><ul><li v-for="(s,index) in str" :key="index">{{s}}--{{index}}</ul> </div> </body><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el:"#root",data:{persons:[{id:'001',name:'zhangsan',age:19},{id:'002',name:'lisi',age:29},{id:'003',name:'wangwu',age:39},],car:{name:"adA8",price:"80W",color:"black",},str:"hello"}}) </script>

14.1.1、v-for循環(huán)遍歷，":key"的作用與原理

1、虛擬DOM中key的作用
? key是虛擬DOM對(duì)象的標(biāo)識(shí)，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，Vue會(huì)根據(jù)"新數(shù)據(jù)"生成"新的虛擬DOM"，隨后Vue進(jìn)行"新的虛擬DOM"與"舊的虛擬DOM"的差異比較，比較規(guī)則如下：
2、對(duì)比規(guī)則
? 1.舊虛擬DOM中找到了與新虛擬DOM相同的key
? ? 若虛擬DOM中內(nèi)容沒變，直接使用之前的真實(shí)DOM。
? ? 若虛擬DOM中內(nèi)容變了，則生成新的真實(shí)DOM，隨后替換掉頁面中之前的真實(shí)DOM。
? 2.舊虛擬DOM中未找到與新虛擬DOM相同的key
? ? 創(chuàng)建新的真實(shí)DOM，隨后渲染到頁面
3、開發(fā)中如何選擇：
? 1.最好使用每行數(shù)據(jù)的"唯一標(biāo)識(shí)"作為key。
? 2.如果不需要對(duì)數(shù)據(jù)做"逆序添加"(this.persons.unshift(p))，"逆序刪除"等"破壞順序"的操作時(shí)，使用index作為Key沒有問題。

<body> <div id="root"><h2>人員列表</h2><ul><li v-for="p in persons">{{p.name}}-{{p.age}}<input type="text"></li><li v-for="(p,index) in persons" :key="index">{{p.name}}-{{p.age}}<input type="text"></li><li v-for="p in persons" :key="p.id">{{p.name}}-{{p.age}}<input type="text"></li></ul><button @click.once="add">點(diǎn)擊添加一個(gè)人員</button> </div> </body><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el:"#root",data:{persons:[{id:"001",name:"張三",age:18},{id:"002",name:"李四",age:28},{id:"003",name:"王五",age:38},],},methods:{add(){const p = {id:'004',name:'老劉',age:49}this.persons.unshift(p)}}}) </script>

14.2、input框內(nèi)的模糊搜索

14.2.1、計(jì)算屬性實(shí)現(xiàn)

<body> <div id="root"><h2>人員列表</h2><input type="text" placeholder="請(qǐng)輸入名字" v-model="keword"><ul><li v-for="(p,index) in filpersons" :key="index">{{p.name}}--{{p.age}}--{{p.sex}}</li></ul> </div> </body><script type="text/javascript"> Vue.config.productionTip = false const vm = new Vue({el:"#root",data: {keword:"",persons: [{id: "001", name: "馬冬梅", age: 18, sex: "女"},{id: "002", name: "周冬雨", age: 28, sex: "女"},{id: "003", name: "周杰倫", age: 38, sex: "男"},{id: "004", name: "溫兆倫", age: 48, sex: "男"},],},// 計(jì)算屬性實(shí)現(xiàn)computed:{filpersons(){return this.persons.filter((p)=>{// indexOf(val) == -1 說明沒匹配到，等于其他"0,1,2,xxx"表示匹配數(shù)據(jù)的索引值。// 這里依賴的數(shù)據(jù)是："this.keword"，也就是當(dāng)"this.keword"發(fā)生改變，計(jì)算屬性就會(huì)被執(zhí)行。return p.name.indexOf(this.keword) !== -1})},} }) </script>

14.2.2、監(jiān)視屬性實(shí)現(xiàn)

<body> <div id="root"><h2>人員列表</h2><input type="text" placeholder="請(qǐng)輸入名字" v-model="keword"><ul><li v-for="(p,index) in filpersons" :key="index">{{p.name}}--{{p.age}}--{{p.sex}}</li></ul> </div> </body><script type="text/javascript"> Vue.config.productionTip = false// 監(jiān)視屬性實(shí)現(xiàn) const vm = new Vue({el:"#root",data: {keword:"",persons: [{id: "001", name: "馬冬梅", age: 18, sex: "女"},{id: "002", name: "周冬雨", age: 28, sex: "女"},{id: "003", name: "周杰倫", age: 38, sex: "男"},{id: "004", name: "溫兆倫", age: 48, sex: "男"},],// 存放過濾后的數(shù)據(jù)filpersons:[]},watch:{// val 接收input框內(nèi)輸入的值keword:{// 初始化時(shí)讓handler調(diào)用一下。immediate:true,handler(val){// filter方法："p"就是"persons"里面的一行行數(shù)據(jù)。// 如果"val"的值為'空'時(shí)，使用"filter方法"就能拿到的就是"persons"里面所有的數(shù)據(jù)。this.filpersons = this.persons.filter((p)=>{// indexOf(val) == -1 說明沒匹配到，等于其他"0,1,2,xxx"表示匹配數(shù)據(jù)的索引值。return p.name.indexOf(val) !== -1})}},} }) </script>

14.3、input框內(nèi)數(shù)據(jù)排序（升降序）

<body> <div id="root"><ul><h2>人員搜索</h2><input type="text" placeholder="輸入名稱" v-model="keyWord"><button @click="sortType=2">年齡升序</button><button @click="sortType=1">年齡降序</button><button @click="sortType=0">原順序</button> <br/><li v-for="(p,index) in filepersons" :key="index">{{p.name}}-{{p.age}}-{{p.sex}}-{{p.status}}</li></ul> </div> </body><script type="text/javascript">Vue.config.productionTip = falsenew Vue({el: "#root",data: {keyWord: "",// 0原順序，1降序，2升序sortType:0,persons: [{id:"001",name:"馬冬梅",age:48,sex:"女"},{id:"002",name:"周冬雨",age:38,sex:"女"},{id:"003",name:"周杰倫",age:18,sex:"男"},{id:"004",name:"溫兆倫",age:58,sex:"男"},]},computed:{filepersons(){// 先過濾（拿到過濾后的數(shù)據(jù)arry）const arry = this.persons.filter((p) => {return p.name.indexOf(this.keyWord) !== -1})// 然后對(duì)arry做判斷是否需要排序（后排序）if (this.sortType){// this.sortType = 1 或者 2 時(shí)，按年齡排序（升序或者降序）arry.sort((a,b)=>{return this.sortType === 1 ? b.age-a.age : a.age-b.age})}// 如果this.sortType=0，就返回原值或者過濾后的值（無排序）// 如果this.sortType=1或者2，就返回原值或者過濾后的值（外加排序）return arry}}}) </script>

14.4、Vue監(jiān)測(cè)數(shù)據(jù)的原理（通過Vue.set或者vm.$set）

14.4.1、例子，Vue.set：可以在"對(duì)象{}"內(nèi)新增一個(gè)屬性(這個(gè)屬性之前是未定義的)

Vue.set：不能直接給data直接添加屬性，只能給data里面的某一個(gè)對(duì)象，比如data.xxx添加屬性。

<body> <div id="root"><h2>姓名{{student.name}}</h2><h2>年齡{{student.age}}</h2><h2 v-if="student.sex">性別{{student.sex}}</h2><button @click="addsex">點(diǎn)我添加性別屬性</button><ul><h2>愛好</h2><li v-for="(h,index) in student.hoppy" :key="index">{{h}}</li><h2>朋友們</h2><li v-for="(f,index) in student.friends" :key="index">{{f.name}}--{{f.age}}---{{f.sex}}</li></ul> </div> </body><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el:"#root",data:{name:"zzz",addr:"shanghai",student:{name:"sudada",age:18,hoppy:["抽煙","喝酒","燙頭"],}},methods:{addsex(){// Vue.set：不能直接給data直接添加屬性，只能給data里面的某一個(gè)對(duì)象，比如data.xxx添加屬性。// 給data內(nèi)的某一個(gè)對(duì)象添加一個(gè)"屬性"，添加完畢后這個(gè)"屬性"就可以被調(diào)用了。以下兩種方法 2選一// Vue.set(this.student,"sex","男") // 方法一 (給"student"對(duì)象添加一個(gè)"sex"屬性,屬性值是"男")// Vue.set(this.student.hoppy,1,"打游戲") // 方法一 (給"student"對(duì)象添加一個(gè)"hoppy"屬性,屬性值是"打游戲")vm.$set(this.student,"sex","男") // 方法二 (給"student"對(duì)象添加一個(gè)"sex"屬性,屬性值是"男")}}}) </script>

14.4.2、直接對(duì)數(shù)組內(nèi)的某個(gè)索引做"賦值替換"，Vue是不生效的，例子如下：

直接對(duì)數(shù)組內(nèi)的某個(gè)索引做"賦值替換"，Vue是不生效的：

如果要修改數(shù)組內(nèi)的某個(gè)索引對(duì)應(yīng)的值(對(duì)象)的屬性，Vue是生效的：

如果使用官方推薦的，數(shù)組的7種修改方法：（push末尾行追加，pop末尾行刪除，unshift首行追加，shift首行刪除，splice數(shù)組內(nèi)某個(gè)元素替換，sort排序，reverse反轉(zhuǎn)數(shù)組）修改，Vue是生效的。

<body> <div id="root"><h2>姓名：{{name}}</h2><h2>朋友</h2><button @click="addfriend">添加一個(gè)朋友</button><ul><li v-for="(f,index) in friends" :key="index">{{f}}</li></ul> </div> </body><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el:"#root",data:{name:"szq",friends:[{name:"szq",age:28,sex:"男"},]},methods:{addfriend(){// 直接對(duì)數(shù)組內(nèi)的某個(gè)索引做"賦值替換",Vue是不生效的// this.friends[0]={name:"sudada",age:18,sex:"女"}// 如果要修改數(shù)組內(nèi)的某個(gè)索引對(duì)應(yīng)的值(對(duì)象)的屬性，則可以生效// this.friends[0].name="sudada"// 如果使用官方推薦的7種方法（push末尾行追加，pop末尾行刪除，unshift首行追加，shift首行刪除，splice數(shù)組內(nèi)某個(gè)元素替換，sort排序，reverse反轉(zhuǎn)數(shù)組）修改，Vue是生效的this.friends.unshift({name:"wss",age:18,sex:"女"})}}}) </script>

14.4.3、總結(jié)Vue監(jiān)視數(shù)據(jù)的原理
? 1、vue會(huì)監(jiān)視data中所有層次的數(shù)據(jù)

? 2、如何監(jiān)測(cè)對(duì)象中的數(shù)據(jù)？
? ? 通過setter實(shí)現(xiàn)監(jiān)視，且要在new Vue時(shí)就傳入要監(jiān)測(cè)的數(shù)據(jù)。
? ? ? 1.對(duì)象中后追加的屬性，Vue默認(rèn)不做響應(yīng)式處理
? ? ? 2.如需給后添加的屬性做響應(yīng)式，請(qǐng)使用如下API（2選1）
? ? ? ? Vue.set(target, propertyName, value)
? ? ? ? vm.$set(target, propertyName, value)

? 3、如何監(jiān)測(cè)數(shù)組中的數(shù)據(jù)？
? ? 通過包裹數(shù)組更新元素的方式實(shí)現(xiàn)，本質(zhì)就是做了兩件事
? ? ? 1.調(diào)用原生對(duì)應(yīng)的方法對(duì)數(shù)組進(jìn)行更新
? ? ? 2.重新解析模板，進(jìn)而更新頁面

? 4、在Vue修改"數(shù)組"中的某個(gè)元素的辦法
? ? 1.使用：push末尾行追加，pop末尾行刪除，unshift首行追加，shift首行刪除，splice數(shù)組內(nèi)某個(gè)元素替換，sort排序，reverse反轉(zhuǎn)數(shù)組
? ? 2.Vue.set 或者 vm.$set

? 5、特別注意：
? ? Vue.set 和 vm.$set 不能給vm或者vm的"根數(shù)據(jù)對(duì)象"(也就是data) 添加屬性。

? 6、代碼示例

<body> <div id="root"><h1>學(xué)生信息</h1><button @click="student.age++">點(diǎn)我年齡加一</button> <br><button @click="addsex">添加一個(gè)性別</button> <br><button @click="student.sex='未知'">修改性別</button> <br><button @click="addfriend">添加朋友</button> <br><button @click="updatefirstfriendname">修改第一個(gè)朋友的名字</button> <br><button @click="addhoppy">添加一個(gè)愛好</button> <br><button @click="changehoppy">修改第一個(gè)愛好，開車</button> <br><button @click="nosmoke">過濾掉抽煙的愛好</button> <br><h2>姓名：{{student.name}}</h2><h2>年齡：{{student.age}}</h2><h2 v-if="student.sex">性別：{{student.sex}}</h2><h2>愛好</h2><ul><li v-for="(h,index) in student.hoppy" :key="index">{{h}}</li><h3>朋友們</h3><li v-for="(f,index) in student.friends">{{f.name}}--{{f.age}}---{{f.sex}}</li></ul> </div> </body><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el:"#root",data:{student:{name:"sudada",age:18,hoppy:["抽煙","喝酒","燙頭"],friends:[{name:"yyy",age:18,sex:"女"},]}},methods:{addsex(){vm.$set(this.student,'sex','男')},addfriend(){this.student.friends.unshift({name:"szq",age:28,sex:"男"})},updatefirstfriendname(){this.student.friends[0].name="張三"},addhoppy(){this.student.hoppy.push("打游戲")},changehoppy(){// 方法1：hoppy.splice(0,1,'開車') 把數(shù)組hoppy的第0個(gè)索引刪掉，然后插入1個(gè)新的索引，值為"開車"。// this.student.hoppy.splice(0,1,'開車')// 方法2：把數(shù)組hoppy的第0個(gè)索引值改為'開車'Vue.set(this.student.hoppy,0,'開車')},nosmoke(){this.student.hoppy = this.student.hoppy.filter((h)=>{return h !== '抽煙'})}}}) </script>

十五、收集form表單中的數(shù)據(jù)

15.1、例子

<body><div id="root"><form @submit.prevent="demo">賬號(hào)：<input type="text" v-model.trim="account"> <br>密碼：<input type="password" v-model="password"><br>年齡：<input type="number" v-model.number="age"><br>性別<br>男：<input type="radio" name="sex" v-model="sex" value="male">女：<input type="radio" name="sex" v-model="sex" value="female"><br>愛好<br>抽煙：<input type="checkbox" v-model="hobby" value="chouyan" >喝酒：<input type="checkbox" v-model="hobby" value="hejiu">燙頭：<input type="checkbox" v-model="hobby" value="tangtou"><br>所屬校區(qū)：<select v-model="city"><option value="">請(qǐng)選擇校區(qū)</option><option value="beijing">北京</option><option value="shanghai">上海</option><option value="shenzhen">深圳</option><option value="wuhan">武漢</option></select><br>其他信息：<textarea v-model.lazy="other"></textarea><br><input type="checkbox" v-model="agree"> 閱讀并接受用戶協(xié)議：<a href="http://www.baidu.com">《用戶協(xié)議》</a><br><button>提交</button></form></div> </body><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el:"#root",data:{account:'',password:'',age:'',sex:'male',hobby:[],city:'shanghai',other:'',agree:false,},methods:{demo(){console.log(this._data)}}}) </script>

15.2、收集form表單數(shù)據(jù)總結(jié)：

如果：input type="text/password/number" 則v-model收集的是value的值，用戶輸入的就是value的值。
如果：input type="radio" 則v-model收集的是value的值，且要給標(biāo)簽配置value值。
如果：input type="checkbox"
? ? 1.沒有配置input的value屬性，那么收集的就是checked （勾選就是true 或未勾選是false，是布爾值）
? ? 2.配置input的value屬性：
? ? ? ? 2.1.v-model的初始值是非數(shù)組類型，那么收集的就是checked （勾選就是true 或未勾選是false，是布爾值）
? ? ? ? 2.2.v-model的初始值是數(shù)組類型，那么收集的就是value組成的數(shù)組（是一個(gè)數(shù)組）

v-model的三個(gè)修飾符
? ? 1.v-model.lazy：失去焦點(diǎn)后在收集數(shù)據(jù)（不是事實(shí)采集數(shù)據(jù)，是輸入完畢后，點(diǎn)擊下一行時(shí)，在采集）
? ? 2.v-model.number：輸入字符串轉(zhuǎn)為有效地?cái)?shù)字
? ? 3.v-model.trim：輸入的字符串，首尾空格過濾（中間的空格不過濾）

十六、過濾器

16.1、過濾器的定義：對(duì)要顯示的數(shù)據(jù)進(jìn)行特定格式化后在顯示（適用于一些簡(jiǎn)單邏輯的處理）

16.2、過濾器語法：
? ? ? ? 1.注冊(cè)過濾器：Vue.filter(name,callback) 或者 new Vue(filters:{})
? ? ? ? 2.使用過濾器：{{xxx | 過濾器名}} 或 v-bind:屬性 = "xxx | 過濾器名"

16.3、過濾器使用備注：
? ? ? ? 1.過濾器也可以接收額外參數(shù)，多個(gè)過濾器也可以串聯(lián)
? ? ? ? 2.并沒有改變?cè)镜臄?shù)據(jù)，是產(chǎn)生新的對(duì)應(yīng)的數(shù)據(jù)。

16.4、例子

<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="../js/vue.js"></script><script type="text/javascript" src="../js/dayjs.min.js"></script> </head><body> <div id="root"><h2>格式化后的時(shí)間</h2><h3>現(xiàn)在是{{fmtTime}}</h3><h3>現(xiàn)在是{{getfmtTime()}}</h3><h3>現(xiàn)在是{{time | timeFormater}}</h3><h3>現(xiàn)在是{{time | timeFormater('YYYY_MM_DD')}}</h3><h3>現(xiàn)在是{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3> </div> </body><script type="text/javascript">Vue.config.productionTip = false// 全局過濾器，這里的mySlice可以參考下面的局部過濾器寫法對(duì)比即可。// Vue.filter('mySlice',function (value){// return value.slice(0,4)// })new Vue({el:"#root",data:{time:1621561377603,},computed:{fmtTime(){return dayjs(this.time).format("YYYY年-MM月-DD日 HH:mm:ss")}},methods:{getfmtTime(){return dayjs(this.time).format("YYYY年-MM月-DD日 HH:mm:ss")}},// 局部過濾器，關(guān)鍵字 "filters"filters:{// 函數(shù)接受的參數(shù)value，其實(shí)就是time。// 參數(shù)str就是傳遞過來的'YYYY_MM_DD'// str='YYYY年-MM月-DD日 HH:mm:ss'，參數(shù)str的默認(rèn)值timeFormater(value,str='YYYY年-MM月-DD日 HH:mm:ss'){return dayjs(value).format(str)},mySlice(value){console.log(value)// value = 2021_05_21，取前4位return value.slice(0,4)},}}) </script>

十七、內(nèi)置指令

17.1、v-test 指令使用

v-bind：單向綁定解析表達(dá)式，可簡(jiǎn)寫為 :xxx
? ? 例子：age="29"拿到的就是字符串類型"29"，:age="29"拿到的就是經(jīng)過js解析后的值，是一個(gè)整數(shù)類型29
v-model：雙向數(shù)據(jù)綁定
v-for：便利數(shù)組/對(duì)象/字符串
v-on：綁定事件監(jiān)聽，可以簡(jiǎn)寫為 @
v-if：條件渲染（動(dòng)態(tài)控制節(jié)點(diǎn)是否存在）
v-else：條件渲染（動(dòng)態(tài)控制節(jié)點(diǎn)是否存在）
v-show：條件渲染（動(dòng)態(tài)控制節(jié)點(diǎn)是否展示）

v-test：
??1.作用：向其所在的節(jié)點(diǎn)中"渲染"文本內(nèi)容
??2.與插值語法的區(qū)別，v-text會(huì)替換掉標(biāo)簽中的內(nèi)容，{{xx}}插值語法則不會(huì)。
? 3.v-test例子

<body> <div id="root"><div>名稱，{{name}}</div><div>地址，{{name}}</div><div v-text="name">名稱，</div><div v-text="addr">地址，</div> </div> </body><script type="text/javascript">Vue.config.productionTip = falsenew Vue({el:"#root",data:{name:"sudada",addr:"shanghai",}}) </script>

17.2、v-html 指令使用

? ? 1.作用：向指定節(jié)點(diǎn)中渲染包含 "html結(jié)構(gòu)" 的內(nèi)容
? ? 2.與插值語法的區(qū)別
? ? ? ? 1.v-html會(huì)替換掉標(biāo)簽中所有的內(nèi)容，{{xx}}插值語法則不會(huì)
? ? ? ? 2.v-html可以識(shí)別html結(jié)構(gòu)。
? ? 3.嚴(yán)重注意：v-html有安全性問題！
? ? ? ? 1.在網(wǎng)站上動(dòng)態(tài)渲染任意html是非常危險(xiǎn)的，容易導(dǎo)致XSS攻擊、
? ? ? ? 2.一定要在可信任的內(nèi)容上使用v-html，永遠(yuǎn)不要再用戶提交的內(nèi)容上。

<body> <div id="root"><h1>hello,{{name}}</h1><h1 v-html="str">王大陸</h1> </div> </body><script type="text/javascript">Vue.config.productionTip = falsenew Vue({el: "#root",data: {name: "sudada",str: '<h3>你好</h3>',}}) </script>

17.3、v-cloak?指令使用

1.本質(zhì)是一個(gè)特殊屬性，Vue實(shí)例創(chuàng)建完畢并接管容器后，會(huì)刪掉v-cloak屬性
2.使用css配合v-cloak 可以解決網(wǎng)速慢時(shí)，頁面展示出{{xxx}}的問題。

17.4、v-once?指令使用

1.v-once所在節(jié)點(diǎn)在初次動(dòng)態(tài)渲染之后，就為靜態(tài)內(nèi)容了
2.之后數(shù)據(jù)的改變不會(huì)引起v-once所在結(jié)構(gòu)的更新，可以用于優(yōu)化性能。

<body> <div id="root"><h1 v-once>初始化的N值是{{n}}</h1><h2>當(dāng)前的n值是{{n}}</h2><button @click="n++">點(diǎn)我N+1</button> </div> </body><script type="text/javascript">Vue.config.productionTip = falsenew Vue({el:"#root",data:{name:"sudada",n:1,}}) </script>

17.5、v-pre?指令使用

1.加上v-pre指令之后，該行就變成"所見即所得"，也就是vue不解析該行代碼了。
2.跳過其所在節(jié)點(diǎn)的編譯過程
3.可利用它跳過：沒有使用指令語法，沒有使用插值語法的節(jié)點(diǎn)，會(huì)加快編譯。

<body> <div id="root"><h1 v-pre>v-pre指令的使用</h1><h2 v-pre>當(dāng)前的n值是{{n}}</h2><button v-pre @click="n++">點(diǎn)我N+1</button> </div> </body><script type="text/javascript">Vue.config.productionTip = falsenew Vue({el:"#root",data:{name:"sudada",n:1,}}) </script>

十八、自定義指令

18.1、函數(shù)式（例子：定義個(gè)v-big指令，和v-text指令類似，但會(huì)把綁定的數(shù)值放大10倍）

<body> <div id="root"><h1>hello, {{name}}</h1><h2>當(dāng)前的值是：<span v-text="n"></span></h2><h2>放大10倍后的n值是 <span v-big="n"></span> </h2><button @click="n++">點(diǎn)我N+1</button> </div> </body><script type="text/javascript">Vue.config.productionTip = falsenew Vue({el:"#root",data:{name:"sudada",n:1},// 定義一個(gè)自定義指令（局部指令），這個(gè)指令本質(zhì)就是一個(gè)函數(shù)，但是不能寫返回值，也就是不寫returndirectives:{// big函數(shù)何時(shí)會(huì)被調(diào)用？// 1.指令與元素成功綁定時(shí)。// 2.指令所在的模板被重新解析時(shí)。big(element,binding){console.log(element) // "element"是真實(shí)的DOM元素（div里面v-big是是放在span里面的，那么這里的DOM就是span）console.log(binding) // "binding"是一個(gè)對(duì)象，里面有個(gè)value，這個(gè)value就是v-big="n"里面"n"的值// element.innerText：原生dom結(jié)構(gòu)，元素內(nèi)的文本內(nèi)容。element.innerText = binding.value * 10}}}) </script>

18.2、對(duì)象式（例子：定義個(gè)v-fbind指令，和v-bind指令類似，但可以讓其所綁定的input元素默認(rèn)獲取焦點(diǎn)）

<body> <div id="root"><h1>hello, {{name}}</h1><h2>當(dāng)前的值是：<span v-text="n"></span></h2><h2>放大10倍后的n值是 <span v-big="n"></span> </h2><button @click="n++">點(diǎn)我N+1</button><br><input type="text" v-fbind:value="n"> </div> </body><script type="text/javascript">Vue.config.productionTip = falsenew Vue({el:"#root",data:{name:"sudada",n:1},// 局部指令directives:{// big函數(shù)式// 1.指令與元素成功綁定時(shí)。// 2.指令所在的模板被重新解析時(shí)。big(element,binding){element.innerText = binding.value * 10},// fbind對(duì)象式// 和上面big函數(shù)式的區(qū)別："big函數(shù)式"只執(zhí)行了"bind函數(shù)"和"update函數(shù)"，沒有執(zhí)行"inserted函數(shù)"。fbind:{// 指令與元素成功綁定時(shí)，執(zhí)行bind函數(shù)bind(element,binding){console.log("bind")element.value=binding.value},// 指令所在元素被插入頁面時(shí)，執(zhí)行inserted函數(shù)inserted(element,binding){console.log("inserted")element.focus()},// 指令所在的模板被重新解析時(shí)，執(zhí)行update函數(shù)update(element,binding){console.log("update")element.value=binding.value},}}}) </script>

18.3、自定義指令總結(jié)

18.3.1、定義語法
? ? 1.1、局部指令
? ? ? ? new Vue({
? ? ? ? ? ? directives:{指令名:配置對(duì)象}
? ? ? ? }) 或者
? ? ? ? new Vue({
? ? ? ? ? ? directives(){指令名:回調(diào)函數(shù)}
? ? ? ? })
? ? 1.2、全局指令
? ? ? ? Vue.directive(指令名:配置對(duì)象) 或者 Vue.directive(指令名:回調(diào)函數(shù))
18.3.2、配置對(duì)象中常用的3個(gè)回調(diào)：
? ? 1.bind：指令與元素成功綁定時(shí)調(diào)用。
? ? 2.inserted：指令所在元素被插入頁面時(shí)調(diào)用。
? ? 3.update：指令所在模版結(jié)構(gòu)被重新解析時(shí)調(diào)用。
18.3.3、
? ? 1.指令定時(shí)不加"v-"，但是使用時(shí)要加"v-"。
? ? 2.指令名如果是多個(gè)單詞，要是有kebab-case命名方式，不能使用camelCase(駝峰體)。

十九、Vue生命周期函數(shù)

19.1、什么是周期回調(diào)函數(shù)

? ? 1.又名：生命周期回調(diào)函數(shù)，生命周期函數(shù)，生命周期鉤子
? ? 2.是什么：vue在關(guān)鍵時(shí)刻幫我們調(diào)用的一些特殊名稱的函數(shù)
? ? 3.生命周期函數(shù)的名字不可更改，但函數(shù)的具體內(nèi)容是程序員根據(jù)需求編寫的
? ? 4.生命周期函數(shù)中的this指向的是 vm 或 vue組件實(shí)例對(duì)象。

19.2、總結(jié)生命周期

19.2.1、常用的生命周期鉤子：
? ? 1.mounted：常用來發(fā)送ajax請(qǐng)求，啟動(dòng)定時(shí)器，綁定自定義事件，訂閱消息等（初始化操作）
? ? 2.beforeDestroy：常用來清除定時(shí)器，解綁自定義事件，取消訂閱消息等（收尾工作）
19.2.2、關(guān)于銷毀vue實(shí)例
? ? 1.銷毀后借助vue開發(fā)工具看不到任何信息。
? ? 2.銷毀后自定義事件會(huì)失效，但原生DOM事件依然有效。

19.3、生命周期圖示

二十、組件的使用

20.1、什么是組件？

????????組件是實(shí)現(xiàn)應(yīng)用中"局部"功能"代碼(html,css,js)"和"資源(各種文件)"的"集合"。

組件式編程的方式，如下圖：

什么是模塊？

????????模塊一般就是一個(gè)js文件

為什么使用組件？

????????復(fù)用編碼，簡(jiǎn)化項(xiàng)目編碼，提高運(yùn)行效率。

20.2、非單文件組件（一個(gè)文件中有多個(gè)組件）缺點(diǎn)：樣式CSS不能跟著組件走

20.2.1、組件的基本使用方法（三大步驟）

1、定義組件

? ? 使用Vue.extend(options)創(chuàng)建，其中options和new Vue(options)時(shí)傳入的那個(gè)options幾乎一樣，但區(qū)別如下：
? ? 1.el不寫，原因：最終所有的組件都要經(jīng)過一個(gè)vm管理，由vm中的el決定服務(wù)哪個(gè)容器
? ? 2.data必須寫成函數(shù)，原因：避免組件被復(fù)用時(shí)，數(shù)據(jù)存在引用關(guān)系
? ? 備注：使用template可以配置組件結(jié)構(gòu)

2、注冊(cè)組件（分局部注冊(cè)和全局注冊(cè)）

? ? 1.局部注冊(cè)：在vm里面?zhèn)魅隿omponents選項(xiàng)
? ? 2.全局注冊(cè)：使用Vue.component("組件名",組件值)

3、使用組件（寫"組件"標(biāo)簽即可實(shí)現(xiàn)組件的使用與復(fù)用）

? ? <組件名></組件名>

4、案例

<body> <div id="root"><h2>{{msg}}</h2><school></school><school></school><hr><student></student><student></student><hr><hello></hello> </div> </body><script type="text/javascript">Vue.config.productionTip = false// 第一步：創(chuàng)建school組件：Vue.extend// 組件定義式不需要寫"el"配置項(xiàng)// data必須要寫函數(shù)式，這樣每次拿到的值都是一樣的，如果寫成對(duì)象式的話，會(huì)在內(nèi)存里面有引用關(guān)系，會(huì)修改對(duì)象內(nèi)的值。const school = Vue.extend({// 非單文件組件使用"template"這種方式template:`<div><h2>學(xué)校名稱:{{schoolname}}</h2><h2>學(xué)校地址:{{address}}</h2></div>`,data(){return {schoolname:"學(xué)校",address:"上海",}}})// 第一步：創(chuàng)建student組件const student = Vue.extend({// 非單文件組件使用"template"這種方式template:`<div><h2>學(xué)生地址:{{name}}</h2><h2>學(xué)生名稱:{{age}}</h2></div>`,data(){return {name:"王大陸",age:18}}})// 第1步：創(chuàng)建hello組件(這個(gè)組件用來注冊(cè)全局組件)const hello = Vue.extend({// 非單文件組件使用"template"這種方式template:`<div><h2>你好啊~{{name}}</h2></div>`,data(){return {name:"牛牛牛",}}})// 第2步：注冊(cè)全局組件Vue.component('hello',hello)const vm = new Vue({el:"#root",data:{msg:"hello"},// 第二步：注冊(cè)組件（局部注冊(cè)）// 使用關(guān)鍵字：components，對(duì)象格式，里面的"key"就是使用時(shí)的"組件名"components:{school:school,student:student}}) </script>

20.2.2、組件的注意點(diǎn)

? ? 1.關(guān)于組件名稱：
? ? 一個(gè)單詞組成的"組件名"：
? ? ? ? 寫法1：school（首字母小寫）
? ? ? ? 寫法2：School（首字母大寫）
? ? 多個(gè)單詞組成的"組件名"：
? ? ? ? 寫法1：'my-school'（必須要有引號(hào)）
? ? ? ? 寫法2：MySchool (需要腳手架支持，否則報(bào)錯(cuò))
? ? 備注：
? ? ? ? 組件名不能和HTML已有的元素名稱重復(fù)，比如：h2，H2都不行
? ? ? ? 可以使用name配置項(xiàng)，指定組件在瀏覽器Vue開發(fā)者工具中呈現(xiàn)的名稱。
? ? 2.關(guān)于組件標(biāo)簽
? ? ? ? 寫法1：<school></school> ?常用
? ? ? ? 寫法2：<school/> ?不用腳手架時(shí)，<school/>會(huì)導(dǎo)致后續(xù)組件不能渲染。
? ? 3.組件的簡(jiǎn)寫方式：
? ? ? ? const school = Vue.extend({options}) 可簡(jiǎn)寫為：const school = {options}

4.案例（包含上述1,2,3）

<body> <div id="root"><h1>hello,{{name}}</h1><school></school>  </div> </body><script type="text/javascript">Vue.config.productionTip = false// 組件定義簡(jiǎn)寫：不需要 Vue.extend()const school = {// name：定義組件時(shí)，給組件起的別名（這個(gè)別名也就是瀏覽器Vue開發(fā)者工具拿到的組件名）// 具體在代碼里面使用時(shí)還是要寫'components'注冊(cè)的組件名name:'sudada',template:`<div><h2>學(xué)校名稱:{{schoolName}}</h2><h2>學(xué)校地址:{{address}}</h2></div>`,data(){return {"schoolName": "上海大學(xué)","address":"shanghai",}}}const vm = new Vue({el:"#root",data:{name:"szq",addr:"shanghai",},components:{school:school}}) </script>

5.還有個(gè)特殊的點(diǎn)（可以使用name配置項(xiàng)，指定組件在瀏覽器Vue開發(fā)者工具中呈現(xiàn)的名稱。）

在定義組件時(shí)，定義一個(gè)name屬性，那么這個(gè)屬性就能被開發(fā)者工具識(shí)別到。

20.2.3、組建的嵌套

簡(jiǎn)單理解組件的嵌套：外面的就是父組件，里面的就是子組件。

組件嵌套的例子：

<body> <div id="root"><app></app> </div> </body><script type="text/javascript">Vue.config.productionTip = false// 組件定義：student組件(子組件)const student = Vue.extend({template:`<div><h2>學(xué)生名稱:{{studentName}}</h2><h2>學(xué)生年齡:{{age}}</h2></div>`,data(){return {"studentName": "蘇兆強(qiáng)","age":18,}}})// 組件定義：school組件(父組件)const school = Vue.extend({template:`<div><h2>學(xué)校名稱:{{schoolName}}</h2><h2>學(xué)校地址:{{address}}</h2><student></student></div>`,data(){return {"schoolName": "上海大學(xué)","address":"shanghai",}},// school組件內(nèi)，注冊(cè)子組件student(局部注冊(cè))components:{student:student,}})// 組件定義：hello組件const hello = Vue.extend({template:`<div><h2>hello:{{name}}</h2></div>`,data(){return {"name": "sudada",}}})// 組件定義：app組件（主組件）const app = Vue.extend({template:`<div><hello></hello><school></school></div>`,// app組件內(nèi)，注冊(cè)子組件school和hello(局部注冊(cè))components:{school:school,hello:hello,}})// 注冊(cè)組件(局部)const vm = new Vue({el:"#root",components:{app:app,}}) </script>

20.2.4、VueComponent分析

VueComponent說明：
? ? 前言：vc 是源碼vue.extend里面的VueComponent函數(shù)執(zhí)行后返回的對(duì)象：
? ? ? ? Vue.extend = function (extendOptions) {
? ? ? ? ? var Sub = function VueComponent (options) {
? ? ? ? ? this._init(options);
? ? ? ? ? };
? ? ? ? ? return Sub
? ? 1.school 組件本質(zhì)是一個(gè)名為VueComponent"構(gòu)造函數(shù)"，且不是程序員定義的，是Vue.extend生成的。
? ? 2.我們只需要寫<school></school>，vue解析時(shí)會(huì)幫我們創(chuàng)建school組件的實(shí)例對(duì)象，即Vue幫我們執(zhí)行的：new VueComponent(options)。
? ? 3.特別注意：每次調(diào)用vue.extend，返回的都是一個(gè)全新的VueComponent。
? ? 4.關(guān)于this指向：
? ? ? ? 1.在"組件"配置中：
? ? ? ? ? ? data函數(shù)、methods函數(shù)、watch函數(shù)、computed函數(shù) 他們的this均是【VueComponent實(shí)例對(duì)象，簡(jiǎn)稱vc，也就是組件實(shí)例對(duì)象】
? ? ? ? 2.在New Vue({options}) 配置中：
? ? ? ? ? ? data函數(shù)、methods函數(shù)、watch函數(shù)、computed函數(shù) 他們的this均是【Vue實(shí)例對(duì)象，簡(jiǎn)稱vm】
? ? ? ? 3.vm下的$children可以看到對(duì)應(yīng)的vc，也就可以理解為vm管理vc。如果vc內(nèi)部還有子組件的話，那就去vc下的$children可以看到對(duì)應(yīng)的子vc。
? ? 5.vm 和 vc 的區(qū)別
? ? ? ? vm有el屬性，vc沒有，同時(shí)vc也沒法定義el。其他的屬性都一樣。

? ? 6.children 例子：vm里面注冊(cè)了school組件（school組件里面注冊(cè)了student組件）

<body> <div id="root"><school></school> </div> </body><script type="text/javascript">Vue.config.productionTip = falseconst student = Vue.extend({template:`<div><h2>學(xué)生名稱:{{studentName}}</h2><h2>學(xué)生年齡:{{age}}</h2></div>`,data(){return {"studentName": "王大陸","age":18,}}})const school = Vue.extend({template:`<div><h2>學(xué)校名稱:{{schoolName}}</h2><h2>學(xué)校地址:{{address}}</h2><student></student></div>`,data(){return {"schoolName": "上海大學(xué)","address":"shanghai",}},components:{student:student}})const vm = new Vue({el:"#root",data:{name:"szq"},components:{school:school}}) </script>

? children 例子展示：

20.2.5、一個(gè)重要的內(nèi)置關(guān)系（VueComponent.prototype.__proto__ = Vue.prototype）

為什么要有這個(gè)關(guān)系：讓(組件實(shí)例對(duì)象vc)可以訪問到"Vue原型"上的屬性和方法。

?舉例說明：

<body> <div id="root"><school></school> </div> </body><script type="text/javascript">Vue.config.productionTip = false// // 定義一個(gè)構(gòu)造函數(shù)// function demo(){// this.a=10// this.b=20// }// // 創(chuàng)建一個(gè)d實(shí)例對(duì)象// const d = new demo()//// console.log(demo.prototype) //顯示原型屬性(函數(shù)才有這個(gè)屬性)// console.log(d.__proto__) //隱式原型屬性(對(duì)象才有這個(gè)屬性)// 定義Vue的原型屬性，在里面新增一個(gè)：x=99Vue.prototype.x = 99// 組件定義 (組件實(shí)例對(duì)象vc)const school = Vue.extend({template:`<div><h2>學(xué)校名稱:{{schoolName}}</h2><h2>學(xué)校地址:{{address}}</h2><button @click="showX">點(diǎn)我查看x</button></div>`,data(){return {"schoolName": "上海大學(xué)","address":"shanghai",}},methods:{showX(){// 在這里通過(組件實(shí)例對(duì)象vc)獲取Vue的原型屬性: x=99// 這里的this就是(組件實(shí)例對(duì)象vc)console.log(this.x)}}})const vm = new Vue({el:"#root",data:{name:"sudada",addr:"shanghai",},components:{school:school},}) </script>

20.3、單文件組件.vue（一個(gè)文件中只有一個(gè)組件）

"非單文件組件" 格式

"單文件組件" 默認(rèn)暴露的簡(jiǎn)寫方式

<template> <div class="demo"><h2>學(xué)校名稱：{{name}}</h2><h2>學(xué)校地址：{{address}}</h2><button @click="showName">點(diǎn)我顯示學(xué)校名稱</button> </div> </template> <script>// 單文件組件的簡(jiǎn)寫方式：暴露方式3("默認(rèn)暴露")，簡(jiǎn)寫方式export default {name: "School", // name配置項(xiàng)，指定組件在瀏覽器Vue開發(fā)者工具中呈現(xiàn)的名稱data(){return {"name": "上海大學(xué)","address":"shanghai",}},methods:{showName(){alert(this.schoolName)}}} </script> <style>.demo{background-color: orange;} </style>

"單文件組件"的其他暴露方式

X、函數(shù)調(diào)用表達(dá)式

<div id="root">addr.toUpperCase() 字符串大寫addr.toLowerCase() 字符串小寫 </div># if 判斷 if(e.target.value !== 13) return# 定時(shí)器，延時(shí)1000毫秒后執(zhí)行 setTimeout(()=>{console.log("xxx") },1000)# 三元表達(dá)式(如果a=3。返回100，否則返回200) a === 3 ? 100 : 200# 在數(shù)組的開頭添加一個(gè)值 persons=[] const p = {id:'004',name:'laoliu',age:49} persons.unshift(p) this.persons.push(p) #在數(shù)組的末尾添加一個(gè)值#filter方法(過濾數(shù)組內(nèi)某個(gè)值) persons: [{id: "001", name: "馬冬梅", age: 18, sex: "女"},{id: "002", name: "周冬雨", age: 28, sex: "女"},{id: "003", name: "周杰倫", age: 38, sex: "男"},{id: "004", name: "溫兆倫", age: 48, sex: "男"}, ], this.persons.filter((p)=>{ // indexOf(value) == -1 說明沒匹配到，indexOf(value)等于其他"0,1,2,xxx"表示匹配數(shù)據(jù)的索引值(也就是匹配到了)。 return p.name.indexOf(value) !== -1# sort排序 let arr = [1,3,6,2,5,4] arr.sort((a,b)=>{return a-b }) console.log(arr) // return a-b：升序 [1, 2, 3, 4, 5, 6] // return a-b：降序 [6, 5, 4, 3, 2, 1]

總結(jié)

以上是生活随笔為你收集整理的VUE框架（一）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

Vue
框架

上一篇： Mac电脑上最好用的3个azw/azw3
下一篇： JQuery动态显示和隐藏div

日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

VUE框架（一）

總結(jié)