一、初始Vue
1. 初始Vue
第一步：給Vue準(zhǔn)備一個(gè)容器：
<divid="app"><!-- 在頁(yè)面中，通過插值表達(dá)式可以直接使用Vue管理的數(shù)據(jù)。
注意：Vue管理的數(shù)據(jù)是響應(yīng)式的，所謂響應(yīng)式，指的是，當(dāng)前數(shù)據(jù)發(fā)生改變是，會(huì)重新渲染頁(yè)面。 --><h2>{{name}}</h2><h2>{{age}}</h2></div>
第二步：創(chuàng)建Vue實(shí)例：
// 不允許 vue-devtools 檢查代碼Vue.config.devtools=false// vue 在啟動(dòng)時(shí)不顯示生產(chǎn)提示Vue.config.productionTip=false// 初始化一個(gè)Vue實(shí)例，在創(chuàng)建Vue實(shí)例時(shí)，需要給Vue傳遞一個(gè)配置選項(xiàng)，該配置選項(xiàng)是一個(gè)對(duì)象letvm=newVue({// el選項(xiàng)，指定當(dāng)前Vue實(shí)例，操作的容器el:'#app',// data選項(xiàng)，用于存儲(chǔ)當(dāng)前Vue實(shí)例管理的數(shù)據(jù)// data選項(xiàng)里面管理的數(shù)據(jù)，會(huì)被添加到Vue實(shí)例身上，這里就是vm身上。// data選項(xiàng)里面管理的數(shù)據(jù)，其實(shí)會(huì)被Vue實(shí)例身上的_data進(jìn)行代理；并將代理過后的數(shù)據(jù)再添加到Vue實(shí)例身上，方便直接調(diào)用。data:{name:'王瑞',age:20}})
2. Vue的響應(yīng)式原理
// 代理對(duì)象的基本理解：/* let data = {
? ? name:'兵哥',
? ? age:18
}
// 因?yàn)閷?duì)象是引用類型，在傳遞時(shí)，傳的是地址
let _data = data;
// 操作_data，真正改變的是data，此時(shí)就可以將_data當(dāng)做是data的代理對(duì)象。
_data.name = '王瑞'
_data.age = 30
console.log(data); */console.log('-------------------------------');// 如何給對(duì)象添加成員letobj={}// 方式1：對(duì)象名.屬性的方式，給對(duì)象添加成員obj.name='吳亦凡'// 方式2：對(duì)象名['屬性名']的方式，給對(duì)象添加成員obj['age']=30// 方式3：通過Object對(duì)象的defineProperty方法，給指定的對(duì)象添加指定的屬性// 這種方式，給對(duì)象添加成員，盡管繁瑣，但是可以配置更多的功能。// 默認(rèn)添加的屬性是不允許刪除的，如果要允許刪除，就需要添加configurable配置。// 默認(rèn)添加的屬性是不允許枚舉的，所謂枚舉指的就是遍歷。Object.defineProperty(obj,'sex',{// 屬性值value:'男',// 屬性允許被刪除configurable:true,// 屬性允許被枚舉enumerable:true})// 遍歷出對(duì)象的所有屬性名稱for(letkeyinobj){console.log(key);}// delete關(guān)鍵字，用于刪除對(duì)象身上的指定成員deleteobj.namedeleteobj.sexconsole.log(obj);console.log('-------------------------------');// 那么Vue的響應(yīng)式原理，就用到了Object.defineProperty,給代理對(duì)象添加屬性。// 01.我們先定義一份原始數(shù)據(jù)，也就是被代理對(duì)象。letdata={name:'兵哥',age:18}// 02.再定義一個(gè)空的代理對(duì)象let_data={}// 03.使用Object.defineProperty給代理對(duì)象添加屬性O(shè)bject.defineProperty(_data,'name',{// get方法，用于返回屬性的值，當(dāng)使用到_data對(duì)象里面的name屬性獲取值時(shí)，就會(huì)執(zhí)行g(shù)et方法get(){returndata.name},// set方法，用于設(shè)置屬性的值，當(dāng)使用到_data對(duì)象里面的name屬性并給它賦值時(shí)，就會(huì)調(diào)用set方法set(val){data.name=val// 當(dāng)監(jiān)聽到數(shù)據(jù)發(fā)生變化時(shí)，重新渲染DOMreaderDOM()}})Object.defineProperty(_data,'age',{get(){returndata.age},set(val){data.age=valreaderDOM()}})// 渲染DOM更新的方法functionreaderDOM(){document.getElementById("name").innerHTML=data.namedocument.getElementById("age").innerHTML=data.age}readerDOM()
3. Vue的常用指令
<divid="app"><!-- 在頁(yè)面中直接顯示data里面的數(shù)據(jù)，可以通過插值表達(dá)式 --><h2>{{name}}</h2><!-- 如何讓html元素的屬性綁定Vue實(shí)例管理的數(shù)據(jù)，通過v-bind:指令。 --><!-- 如何讓html元素的事件綁定Vue實(shí)例管理的方法，通過v-on:指令。 --><!-- 注意：這里在調(diào)用方法時(shí)，不能加上()，此時(shí)它才會(huì)將事件對(duì)象作為方法的第一個(gè)參數(shù)，傳給該方法。 --><inputtype="text"v-bind:value="name"v-on:input="setName"><hr><h2>{{address}}</h2><!-- v-bind:的簡(jiǎn)寫是: --><!-- v-on:的簡(jiǎn)寫是@ --><!-- 注意：如果方法的邏輯處理比較簡(jiǎn)單，可以直接將代碼寫在行內(nèi)；這里的$event返回的就是事件對(duì)象。 --><inputtype="text":value="address"@input="address=$event.target.value"><hr><h2>{{hobby}}</h2><!-- v-model指令，用于實(shí)現(xiàn)對(duì)數(shù)據(jù)的雙向綁定，所謂雙向綁定，
指的是：數(shù)據(jù)發(fā)生變化重新渲染頁(yè)面，頁(yè)面數(shù)據(jù)發(fā)生變化更新回?cái)?shù)據(jù)。 --><inputtype="text"v-model="hobby"></div>
// 實(shí)例化一個(gè)Vue對(duì)象letvm=newVue({el:'#app',// data選項(xiàng)，可以是一個(gè)對(duì)象，也可以是一個(gè)方法，由方法返回一對(duì)象。data(){return{name:'兵哥',address:'南京',hobby:'敲代碼'}},// methods選項(xiàng)，里面定義的是Vue管理的方法methods:{// 該方法更新name屬性值// 注意：在調(diào)用方式時(shí)，如果沒有傳遞參數(shù)，那么事件方法會(huì)默認(rèn)傳一個(gè)事件對(duì)象參數(shù)。setName(e){this.name=e.target.value},},})
4. 條件渲染和列表渲染
<divid="app"><!-- 按鈕注冊(cè)點(diǎn)擊事件，因?yàn)樘幚淼倪壿嫳容^簡(jiǎn)單，直接將代碼寫在行內(nèi) --><buttonv-on:click="isShow=!isShow">顯示/隱藏</button><!-- v-if指令用于條件渲染，表達(dá)式返回true，顯示元素；否則不顯示元素。 --><divclass="box"v-if="isShow">v-if</div><!-- v-show指令也是用于條件渲染，表達(dá)式返回true，顯示元素；否則不顯示元素。 --><divclass="box"v-show="isShow">v-show</div><!-- 注意：v-if的表達(dá)式返回false，會(huì)生成對(duì)應(yīng)的元素。
v-show的表達(dá)式返回true，元素正常生成，通過display樣式去控制顯示和隱藏。
所以，如果元素需要反復(fù)切換顯示和隱藏使用v-show；如果只是頁(yè)面加載是判斷是否顯示使用v-if。 --><hr><!-- v-if，v-else-if，v-else可以組成多重判斷結(jié)構(gòu)。注意：中間不能有斷層。 --><h2v-if="score>=90">優(yōu)秀</h2><h2v-else-if="score>=80">良好</h2><h2v-else-if="score>=70">中等</h2><h2v-else-if="score>=60">合格</h2><h2v-else>差</h2><hr><ul><!-- v-for指令，用于循環(huán)列表。
語法：v-for="(每一項(xiàng),索引) in 數(shù)組"，渲染列表時(shí)，為了提高渲染性能，
通常都要綁定一個(gè)key。key一定要是唯一值。 --><liv-for="(item,index) in goodses"v-bind:key="index">{{item.id}}---{{item.name}}---{{item.price}}<buttonv-on:click="delGoods(index)">刪除</button></li></ul></div>
newVue({el:'#app',data:{// 該屬性，用于表示是否顯示isShow:true,// 定義一個(gè)成績(jī)score:88,// 定義一個(gè)數(shù)組goodses:[{id:1001,name:'樂事薯片',price:'8元'},{id:1002,name:'百事可樂',price:'3元'},{id:1003,name:'元祖月餅',price:'10元'},{id:1004,name:'德芙巧克力',price:'29元'}]},methods:{// 刪除商品的方法，將商品的下標(biāo)通過方法傳進(jìn)來delGoods(index){if(confirm('是否確定刪除')){// 再根據(jù)數(shù)組的下標(biāo)刪除對(duì)應(yīng)的數(shù)據(jù)this.goodses.splice(index,1)}}},})
二、生命周期
1. 小練習(xí)
<divid="app"><button@click="showEdit=true">添加學(xué)生</button><!-- 展示學(xué)生信息的表格 --><table><thead><tr><th>學(xué)號(hào)</th><th>姓名</th><th>年齡</th><th>性別</th><th>操作</th></tr></thead><tbody><trv-for="(item,index) in students":key="index"><td>{{item.no}}</td><td>{{item.name}}</td><td>{{item.age}}</td><td>{{item.sex}}</td><td><button@click="getOne(index)">修改</button><button@click="del(index)">刪除</button></td></tr></tbody></table><!-- 編輯學(xué)生信息的窗口 --><divclass="edit"v-show="showEdit"><!-- 關(guān)閉按鈕 --><divclass="close"@click="close">X</div><divclass="item"><label>學(xué)號(hào)：</label><inputtype="text"v-model="no"></div><divclass="item"><label>姓名：</label><inputtype="text"v-model="name"></div><divclass="item"><label>年齡：</label><inputtype="text"v-model="age"></div><divclass="item"><label>性別：</label><inputtype="text"v-model="sex"></div><divclass="item"><button@click="add"v-if="updateIndex===-1">添加</button><button@click="update"v-else>修改</button><button@click="clear">取消</button></div></div></div>
newVue({// 指定該Vue實(shí)例工作的容器el:'#app',// 定義當(dāng)前Vue實(shí)例管理的數(shù)據(jù)data:{// 定義一個(gè)學(xué)生數(shù)組students:[{no:'1001',name:'張三',age:20,sex:'男'},{no:'1002',name:'李四',age:22,sex:'女'},{no:'1003',name:'王五',age:24,sex:'男'},{no:'1004',name:'趙六',age:18,sex:'女'}],// 是否顯示編輯窗口showEdit:false,// 定義一個(gè)學(xué)生對(duì)象的四個(gè)屬性no:'',name:'',age:'',sex:'',// 定義一個(gè)下標(biāo)，用于表示修改的學(xué)生在數(shù)組中的位置updateIndex:-1},// 定義當(dāng)前Vue實(shí)例管理的方法methods:{// 添加方法add(){// 創(chuàng)建一個(gè)學(xué)生對(duì)象letstu={no:this.no,name:this.name,age:this.age,sex:this.sex}// 將學(xué)生對(duì)象添加到學(xué)生數(shù)組中this.students.push(stu)// 調(diào)用清空數(shù)據(jù)的方法this.clear()},// 清空表單數(shù)據(jù)的方法clear(){this.no=''this.name=''this.age=''this.sex=''},// 關(guān)閉編輯窗口的方法close(){// 隱藏編輯窗口this.showEdit=false// 編輯窗口關(guān)閉時(shí)，重新將修改索引改成-1this.updateIndex=-1// 清空表單數(shù)據(jù)this.clear()},// 刪除方法del(index){if(confirm('確定刪除嗎？')){this.students.splice(index,1)}},// 根據(jù)下標(biāo)從數(shù)組中獲取對(duì)應(yīng)的學(xué)生信息getOne(index){// 獲取學(xué)生對(duì)象在數(shù)組中對(duì)應(yīng)的下標(biāo)this.updateIndex=index// 顯示編輯窗口this.showEdit=true// 獲取學(xué)生letstu=this.students[index]// 在編輯窗口中顯示該學(xué)生信息this.no=stu.nothis.name=stu.namethis.age=stu.agethis.sex=stu.sex},// 修改方法update(){// 修改數(shù)組中，指定位置學(xué)生的信息letstu=this.students[this.updateIndex]stu.no=this.nostu.name=this.namestu.age=this.agestu.sex=this.sex}},})
2. Vue的生命周期
<divid="app"><button@click="name+='*';age+=1">修改數(shù)據(jù)</button><button@click="over">銷毀Vue實(shí)例</button><h2>{{name}}</h2><h2>{{age}}</h2></div>
letvm=newVue({// el選項(xiàng)可以通過$mount代替// el:'#app',// 如果有template選項(xiàng)，Vue會(huì)將template作為模板進(jìn)行渲染，并將渲染之后的內(nèi)容掛載到指定的容器中// 如果沒有template選項(xiàng)，Vue就會(huì)將el里面的所有內(nèi)容當(dāng)做模板來渲染，并將渲染之后的內(nèi)容掛載到指定的容器中/* template:`
? ? <div>
? ? ? ? <p>{{name}}</p>
? ? ? ? ? ? <p>{{age}}</p>
? ? ? ? </div>`, */data:{name:'張三',age:20},methods:{over(){// $destroy()方法，用于銷毀當(dāng)前Vue實(shí)例// 注意：銷毀當(dāng)前Vue實(shí)例，不是刪除這個(gè)對(duì)象，而且這個(gè)對(duì)象再也不具備響應(yīng)式頁(yè)面的能力了。this.$destroy()}},// 數(shù)據(jù)初始化之前beforeCreate(){console.log('beforeCreate:',this.name,this.age);},// 數(shù)據(jù)初始化完成created(){console.log('created:',this.name,this.age);},// 頁(yè)面掛載之前，此時(shí)頁(yè)面是模板beforeMount(){// 通過$el返回Vue實(shí)例使用的根 DOM 元素console.log(this.$el);console.log('beforeMount');},// 頁(yè)面掛載完成，此時(shí)頁(yè)面已經(jīng)渲染完成mounted(){console.log(this.$el);console.log('mounted');},// 數(shù)據(jù)更新之前beforeUpdate(){// 在這個(gè)階段，數(shù)據(jù)已經(jīng)發(fā)生了變化，但是頁(yè)面還沒有重新渲染console.log('beforeUpdate',this.name,this.age);},// 數(shù)據(jù)更新完成updated(){// 在這個(gè)階段，頁(yè)面會(huì)重新渲染console.log('updated',this.name,this.age);},// 銷毀之前beforeDestroy(){// 我們通常會(huì)在這個(gè)生命周期函數(shù)中做一些收尾的工作// 比如：停掉開啟的定時(shí)器，初始化一些數(shù)據(jù)等等。console.log('beforeDestroy');},// 銷毀完成destroyed(){console.log('destroyed');console.log(this);},})setTimeout(()=>{// 通過$mount方法，給vm指定一個(gè)容器// 這種寫法的好處是，可以控制何時(shí)掛載頁(yè)面vm.$mount('#app')},1000);
3. 輪播圖
<divid="app"><!-- <button @click="destroy">銷毀Vue</button> --><img:src="imgs[index]"><ul><liv-for="(item,i) in imgs":class="i===index?'active':''"></li></ul></div>
newVue({el:'#app',data:{// 定義輪播圖圖片數(shù)組imgs:["http://p1.music.126.net/lrd-pX9Azcv2mP8-YnQ3JA==/109951166362109457.jpg?imageView&quality=89","http://p1.music.126.net/RXFG298sUeqJlpIGoZvB0Q==/109951166362198241.jpg?imageView&quality=89","http://p1.music.126.net/GHcB-WR3T3UhEO5msHXOXg==/109951166362228128.jpg?imageView&quality=89","http://p1.music.126.net/Wd08w_8bojR4DWyK7EEkeQ==/109951166362223634.jpg?imageView&quality=89","http://p1.music.126.net/y3OQm6kP7nPqRcCBkPRSdQ==/109951166362444141.jpg?imageView&quality=89"],// 定義索引index:0,// 定義一個(gè)定時(shí)器變量timer:null},methods:{// 銷毀Vue實(shí)例的方法destroy(){// 當(dāng)前Vue實(shí)例一旦銷毀，就不再具體響應(yīng)頁(yè)面的能力了this.$destroy()}},// 在這個(gè)階段，頁(yè)面已經(jīng)好了mounted(){// 開啟一個(gè)定時(shí)器this.timer=setInterval(()=>{if(++this.index>=this.imgs.length)this.index=0},3000);},// 在這個(gè)階段，Vue的實(shí)例即將銷毀beforeDestroy(){// 清除定時(shí)器clearInterval(this.timer)},})
三、計(jì)算屬性&偵聽器&過濾器
1. 綁定樣式
<divid="app"><button@click="bg_b=true">顯示藍(lán)色背景</button><button@click="c_w=true">顯示白色字體</button><!-- :class可以綁定一個(gè)對(duì)象，對(duì)象的屬性名是類選擇器的名稱，屬性值返回true，表示添加該選擇器。 --><div:class="{bg_b:bg_b,c_w:c_w}">好好學(xué)習(xí)Vue</div><button@click="arr.push('bg_p')">顯示粉色背景</button><button@click="arr.push('c_g')">顯示綠色字體</button><!-- :class可以綁定字符串一個(gè)數(shù)組，數(shù)組中的每一個(gè)元素就是一個(gè)選擇器 --><div:class="arr">好好學(xué)習(xí)Vue</div><!-- :class可以直接綁定一個(gè)表示 --><div:class="bg_b?'bg_b':''">好好學(xué)習(xí)Vue</div><!-- :class也可以通過數(shù)組綁定多個(gè)表達(dá)式 --><div:class="[bg_b?'bg_b':'',c_w?'c_w':'']">好好學(xué)習(xí)Vue</div><hr><p>背景色：<inputtype="text"v-model="bgc"></p><p>字體色：<inputtype="text"v-model="c"></p><!-- :class是綁定類選擇器，:style是綁定內(nèi)聯(lián)樣式。
:style通常也是綁定一個(gè)對(duì)象，對(duì)象的屬性名是原生CSS的屬性名，但是要采用小駝峰命名規(guī)范。 --><div:style="{backgroundColor:bgc,color:c}">好好學(xué)習(xí)Vue</div><br><!-- 小練習(xí)：實(shí)現(xiàn)點(diǎn)誰，誰高亮 --><ul><li@click="activeIndex=index"v-for="(item,index) in list":key="index":class="{active:activeIndex===index}">{{item}}</li></ul></div>
newVue({el:'#app',data(){return{// 是否顯示藍(lán)色背景bg_b:false,// 是否顯示白色字體c_w:false,// 該數(shù)組中，用于存儲(chǔ)類選擇器的名稱arr:[],// 定義背景色bgc:'orange',// 定義字體顏色c:'red',list:['保時(shí)捷','瑪莎拉蒂','雷克薩斯','吉利'],// 定義一個(gè)高亮索引activeIndex:0}},})
2. 計(jì)算屬性
<divid="app"><p>姓：<inputtype="text"v-model="firstName"></p><p>名：<inputtype="text"v-model="lastName"></p><!-- 通常情況下，我們喜歡插值表達(dá)式里面，不要寫過多的邏輯代碼，而是直接展示結(jié)果 --><p>姓名：{{firstName+'.'+lastName}}</p><!-- 插值表達(dá)式中可以調(diào)用方法，并顯示方法的返回結(jié)果 --><p>姓名：{{getName()}}</p><!-- 這里調(diào)用的是計(jì)算屬性，計(jì)算屬性本質(zhì)上是方法，在模板中當(dāng)前屬性去使用。 --><p>姓名：{{fullName}}</p><p>姓名：<inputtype="text"v-model="fullName2"></p><hr><ul><liv-for="(item,index) in students":key="index">{{item.name}}--{{item.sex}}--{{item.age}}</li><li>平均年齡是：{{avgAge}}</li></ul></div>
newVue({el:'#app',data(){return{firstName:'王',lastName:'瑞',students:[{name:'張三',sex:'男',age:12},{name:'李四',sex:'女',age:13},{name:'王五',sex:'男',age:15}]}},methods:{// 定義一個(gè)方法，返回姓名getName(){returnthis.firstName+'.'+this.lastName}},// 計(jì)算屬性，計(jì)算屬性本質(zhì)上其實(shí)是方法computed:{// 在這里，我們定義的是方法，只不過這方法在模板中，可以當(dāng)做屬性來使用fullName(){returnthis.firstName+'.'+this.lastName},// 計(jì)算屬性的簡(jiǎn)單寫法，就是定義一個(gè)方法，由該方法返回出去一份結(jié)果，所有它是只讀的。// 如果要修改計(jì)算屬性的值，就要使用完整的寫法fullName2:{// get方法，返回計(jì)算屬性的結(jié)果get(){returnthis.firstName+'.'+this.lastName},// set方法，修改計(jì)算屬性的結(jié)果，該方法接收一個(gè)參數(shù)是最新的值set(val){if(val.indexOf('.')!==0){letarr=val.split('.')this.firstName=arr[0]this.lastName=arr[1]}}},// 計(jì)算學(xué)生的平均年齡avgAge(){return(this.students.reduce((c,s)=>{returnc+s.age},0)/this.students.length).toFixed(2)}}})
3. 數(shù)據(jù)偵聽器
<divid="app"><p>姓名：<inputtype="text"v-model="name"></p><p>年齡：<inputtype="text"v-model="age"></p><hr><p>員工姓名：<inputtype="text"v-model="emp.name"></p><p>員工年齡：<inputtype="text"v-model="emp.age"></p><p>員工汽車名稱：<inputtype="text"v-model="emp.car.name"></p><p>員工汽車價(jià)格：<inputtype="text"v-model="emp.car.price"></p></div>
newVue({el:'#app',data(){return{name:'王瑞',age:20,// 定義一個(gè)對(duì)象emp:{name:'張勇杰',age:20,// 員工的汽車對(duì)象car:{name:'奔馳',price:'50W'}}}},// 偵聽器watch:{// 要偵聽哪個(gè)屬性，就以那個(gè)屬性的名稱為方法名，定義一個(gè)方法,// 當(dāng)屬性的值發(fā)生變化時(shí)，該方法就會(huì)執(zhí)行。// 該方法，有兩個(gè)參數(shù)，第一個(gè)參數(shù)是新值，第二參數(shù)是舊值name(nval,oval){console.log('name屬性值發(fā)生變化了',nval,oval);},// 偵聽emp對(duì)象是否發(fā)生了變化// 如果要實(shí)現(xiàn)深度偵聽對(duì)象的變化，就需要使用完整的寫法，定義一個(gè)對(duì)象// 在對(duì)象中，通過deep屬性設(shè)置深度監(jiān)視emp:{// 深度監(jiān)視deep:true,// 設(shè)置監(jiān)視器，默認(rèn)執(zhí)行一次immediate:true,// 通過handler定義監(jiān)視器的方法handler(nval,oval){console.log('員工信息發(fā)生變化了',nval,oval);}}}})
4. 過濾器
<!-- 第一個(gè)容器 --><divid="app"><h2>{{goods1.name}}</h2><h4>價(jià)格：{{rmb_price}}</h4><h4>價(jià)格：{{us_price}}</h4><h4>價(jià)格：{{goods1.price | toRMB}}</h4><h4>價(jià)格：{{goods1.price | toUS}}</h4><hr><h2>{{goods2.name}}</h2><!-- 過濾器只能在插值表達(dá)式 和? v-bind表達(dá)式中使用。通過“管道符” | 指定使用具體的過濾器。
原理就是將“管道符”左邊的值傳給“管道符”右邊的方法去處理，并返回處理過后的結(jié)果。 --><h4>價(jià)格：{{goods2.price | toRMB}}<inputtype="text":value="goods2.price | toRMB"></h4><h4>價(jià)格：{{goods2.price | toUS}}<inputtype="text":value="goods2.price | toUS"></h4></div><div>=================================================</div><!-- 第二個(gè)容器 --><divid="app2"><h2>{{goods1.name}}</h2><h4>價(jià)格：{{goods1.price | toRMB}}</h4><h4>價(jià)格：{{goods1.price | toUS}}</h4><h2>{{message}}</h2><h2>{{message | strReverse}}</h2></div>
// 定義過濾器有兩種方式：局部過濾器，全局過濾器// 局部過濾器，只是當(dāng)前Vue實(shí)例可以訪問// 全局過濾器，所有的Vue實(shí)例都可以訪問Vue.filter('toRMB',function(val){return'￥'+val.toFixed(2)})Vue.filter('toUS',function(val){return'$'+(val/6.4634).toFixed(2)})Vue.filter('strReverse',function(val){returnval.split('').reverse().join('')})// 該Vue實(shí)例操作第一個(gè)容器newVue({el:'#app',data(){return{// 商品一goods1:{name:'蘋果手機(jī)',price:8666,},// 商品二goods2:{name:'小米電視',price:8848}}},computed:{// 定義一個(gè)計(jì)算屬性，返回人民幣價(jià)格// 計(jì)算屬性一般用于針對(duì)性的計(jì)算，假設(shè)我們有很多數(shù)據(jù)要計(jì)算，就不太方便了。rmb_price(){return'￥'+this.goods1.price.toFixed(2)},// 定義一個(gè)計(jì)算屬性，返回美金價(jià)格us_price(){return'$'+(this.goods1.price/6.4634).toFixed(2)}},// 定義過濾器 (局部過濾器，里面定義的過濾器只是當(dāng)前Vue實(shí)例可以訪問)/* filters:{
? ? ? // 每個(gè)過濾器其實(shí)，也是一個(gè)方法，該方法接收一個(gè)參數(shù)。
? ? ? ? // 對(duì)參數(shù)進(jìn)行過濾，然后重新返回。
? ? ? ? toRMB(val){
? ? ? ? ? return '￥'+val.toFixed(2)
? ? ? ? },
? ? ? ? toUS(val){
? ? ? ? ? ? return '$'+(val/6.4634).toFixed(2)
? ? ? ? }
? ? } */})// 該Vue實(shí)例操作第二個(gè)容器newVue({el:'#app2',data(){return{// 商品一goods1:{name:'娃哈哈奶茶',price:25},message:'歡迎光臨本店，所有商品一律8折'}},})
