Vue基礎(chǔ)&&進(jìn)階

來自拉鉤教育-就業(yè)集訓(xùn)營

1.1Vue.js

1.2 Vue.js 基礎(chǔ)

1.3 axios

1.4 computed 計(jì)算屬性

1.5 filter 過濾器

1.6 watch 偵聽器

1.7 Component 組件

1.8 Vue生命周期

1.9 Vue Router 路由

___________________________________

1.1 Vue.js 介紹

1.1.1 Vue.js是什么?

Vue (讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架救恨。與其它大型框架不同的是钢颂，Vue 被設(shè)計(jì) 為可以自底向上逐層應(yīng)用.
Vue 的核心庫只關(guān)注視圖層颂暇，不僅易于上手华烟，還便于與第三方庫或既有項(xiàng)目整合坑鱼。另一 方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時(shí)蛾茉，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供驅(qū)動(dòng)讼呢。
自底向上逐層應(yīng)用：作為漸進(jìn)式框架要實(shí)現(xiàn)的目標(biāo)就是方便項(xiàng)目增量開發(fā)(即插即用)。

官方網(wǎng)站: https://cn.vuejs.org/v2/guide/ 作者 尤雨溪是中國人.

1.1.2 為甚么使用Vue?

  1. 聲明式渲染: 前后端分離是未來趨勢(shì)
  2. 漸進(jìn)式框架: 適用于各種業(yè)務(wù)需求
  3. 簡單易學(xué): 國人開發(fā),中文文檔,不存在語言障礙,易于理解和學(xué)習(xí)

1.2 Vue.js 基礎(chǔ)

1.2.1 Vue.js的使用

  1. 在html頁面使用script引入vue.js的庫即可使用谦炬。
遠(yuǎn)程CDN
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
本地
<script src="vue.min.js"></script>
  1. Vue-CLI腳手架:使用vue.js官方提供的CLI腳本架很方便去創(chuàng)建vue.js工程雛形

1.2.2 入門程序

創(chuàng)建一個(gè)vuetest目錄, 并且在目錄下創(chuàng)建 01_vue入門程序.html 文件.
代碼編寫步驟：
1.定義html,引入vue.js
2.定義app div,此區(qū)域?yàn)関ue接管的區(qū)域
3.定義Vue實(shí)例,接管app區(qū)域
4.定義model(數(shù)據(jù)對(duì)象)
5.在app中展示數(shù)據(jù)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue入門</title>
  <!-- 1.創(chuàng)建HTML文件悦屏， 引入vue.js 有兩種方式-->
  <!-- 第一種 引入 vue.js的CDN地址 -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js">
  </script> -->
  <!-- 第二種 本地導(dǎo)入 -->
<script src="vue.min.js"></script>
</head>
<body>
<!-- 2. 定義app div，此區(qū)域作為vue的接管區(qū)域 -->
  <div id="app">
    <!-- {{}} 雙括號(hào)是VUE中的差值表達(dá)式,將表達(dá)式的值輸出到HTML頁面 -->
    {{name}}
  </div>
</body>
<script>
//3. 創(chuàng)建vue實(shí)例
  var VM = new Vue({
  //定義 Vue實(shí)例掛載的元素節(jié)點(diǎn),表示vue接管該div
  el:'#app',
  //4.定義model模型數(shù)據(jù)對(duì)象
  data:{
  name:"哈拉少"
  }
});
</script>
</html>

1. {{}}: 插值表達(dá)式

  1. 插值表達(dá)式的作用?
    通常用來獲取Vue實(shí)例中定義的數(shù)據(jù)(data)
    屬性節(jié)點(diǎn)中 不能夠使用插值表達(dá)式

2. el: 掛載點(diǎn)

  1. el的作用 ?
    定義 Vue實(shí)例掛載的元素節(jié)點(diǎn),表示vue接管該區(qū)域

  2. Vue的作用范圍是什么 ?
    Vue會(huì)管理el選項(xiàng)命中的元素,及其內(nèi)部元素

  3. el選擇掛載點(diǎn)時(shí),是否可以使用其他選擇器 ?
    可以,但是建議使用 ID選擇器

  4. 是否可以設(shè)置其他的DOM元素進(jìn)行關(guān)聯(lián) ?
    可以但是建議選擇DIV, 不能使用HTML和Body標(biāo)簽

3. data: 數(shù)據(jù)對(duì)象

  1. Vue中用到的數(shù)據(jù)定義在data中

  2. data中可以寫復(fù)雜類型

  3. 渲染復(fù)雜類型數(shù)據(jù)的時(shí)候,遵守js語法

<body>
<!-- 此區(qū)域作為vue的接管區(qū)域 -->
<div id="app">
{{name}} <br>
{{school.name}} {{school.mobile}}<br>
<ul>
<li>{{names[0]}}</li>
<li>{{names[1]}}</li>
<li>{{names[2]}}</li>
</ul>
</div>
</body>
<script>
//創(chuàng)建vue實(shí)例
var VM = new Vue({
el:'#app',
data:{
name:"雷霆八嘎",
//對(duì)象類型數(shù)據(jù)
school:{
name:"拉鉤教育",
mobile:"1001001"
},
//數(shù)組類型
names:["小斌","張百萬","劉能"]
}
});
</script>

1.2.3 聲明式渲染的好處

Vue中的聲明式渲染,簡單理解就是我們聲明數(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>
</head>
<body>
<div id="app">
<h2>{{name}}</h2>
</div>

</body>
<!--
jQuery中键思，如果 DOM 發(fā)生變化, js代碼也需要做相應(yīng)的改變础爬，高耦合 .
<script src="./js/jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function () {
$("#app").append("<h2>Hello Word! !</h2>");
});
</script> -->
<!-- 在用 Vue中，只需要定義好展示數(shù)據(jù)吼鳞，并把它放在 DOM 合適的位置就可以. -->
<script src="js/vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app", //掛載點(diǎn)
data: {
name: "Hello Word! !",
},
});
</script>
</html>

1.2.4 Vue常用指令

根據(jù)官網(wǎng)的介紹看蚜，指令 是帶有 v- 前綴的特殊屬性。通過指令來操作DOM元素

1. v-text 指令
作用: 獲取data數(shù)據(jù), 設(shè)置標(biāo)簽的內(nèi)容.
注意: 默認(rèn)寫法會(huì)替換全部內(nèi)容,使用插值表達(dá)式{{}}可以替換指定內(nèi)容.

代碼示例

<body>
<div id="app">
<!-- v-text 獲取data數(shù)據(jù),設(shè)置標(biāo)簽內(nèi)容,會(huì)覆蓋之前的內(nèi)容體-->
<h2 v-text="message">百度</h2>
<!-- 使用插值表達(dá)式,不會(huì)覆蓋 -->
<h2>{{message}}百度</h2>
<!-- 拼接字符串 -->
<h2 v-text="message+1"></h2>
<h2 v-text="message+'abc'"></h2>
</div>
<script>
var VM = new Vue({
el:"#app",
data:{
message:"Java程序員"
}
})
</script>
</body>
</html>

2. v-html 指令
作用: 設(shè)置元素的 innerHTML (可以向元素中寫入新的標(biāo)簽)

代碼示例

<body>
<div id="app">
<!-- 獲取普通文本 -->
{{message}}
<h2 v-text="message"></h2>
<h2 v-html="message"></h2>
<!-- 設(shè)置元素的innerHTML -->
<h2 v-html="url"></h2>
<h2 v-text="url"></h2>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app",
data: {
message: "Java程序員",
url: "<a ,
},
});
</script>

3. v-on 指令
作用: 為元素綁定事件, 比如: v-on:click,可以簡寫為 @click="方法"
綁定的方法定義在 VUE實(shí)例的, method屬性中

語法格式

<div id="app">
<!-- 使用v-on 綁定click 點(diǎn)擊事件 -->
<input type="button" value="點(diǎn)擊按鈕" v-on:click="方法名">
<!-- 使用 @符號(hào)也可以綁定-->
<input type="button" value="點(diǎn)擊按鈕" @click="方法名">
</div>
var VM = new Vue({
el:"#app",
//通過methods ,專門存放Vue中的方法
methods:{
方法名:function(){
alert("123!")
}
}
})

代碼示例

<body>
<div id="app">
<!-- 使用v-on 綁定click 點(diǎn)擊事件 -->
<input type="button" value="點(diǎn)擊按鈕" v-on:click="show">
<!-- 簡寫 @方式 -->
<input type="button" value="點(diǎn)擊按鈕" @click="show">
<!-- 雙擊事件 -->
<input type="button" value="雙擊擊按鈕" @dblclick="show">
<!-- 綁定點(diǎn)擊事件 -->
<h2 @click="changeFood">{{food}}</h2>
</div>
</body>
<script src="vue.min.js"></script>
<script>
var VM = new Vue({
el:"#app",
data:{
food:"麻辣小龍蝦"
},
//通過methods ,專門存放Vue中的方法
methods:{
show:function(){
alert("程序員!")
},
changeFood:function(){
//使用this獲取
console.log(this.food);
//在VUE中不需要考慮如何更改DOM元素, 重點(diǎn)放在更改數(shù)據(jù),數(shù)據(jù)更新之后,使用數(shù)據(jù)的那個(gè)元素會(huì)同步更新
this.food+="真好吃!";
}
}
})
</script>

4. v-show指令
作用: v-show指令, 根據(jù)真假值,切換元素的顯示狀態(tài)

頁面準(zhǔn)備

<body>
<div>
  <img src = "./img/car.gif"/>
</div>
</body>
<script src="vue.min.js"></script>
<script>
var VM = new Vue({
el:"#app"
})
</script>

代碼示例

<body>
<div id="app">
<input type="button" value="切換狀態(tài)" @click="changeShow"> 
<img v-show="isShow" src="./img/car.gif/>
<img v-show="age > 18" src="./img/car.gif/>
</div>
</body>

<script src="js/vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app",
data: {
isShow: true,
age: 19,
},
methods: {
changeShow: function () {
//觸發(fā)方法, 對(duì)isShow進(jìn)行取反
this.isShow = !this.isShow;
},
},
});
</script>

v-show 指令總結(jié)

  • 原理是修改元素的display,實(shí)現(xiàn)顯示或者隱藏
  • 指令后面的內(nèi)容,最終會(huì)解析為 布爾值
  • 值為true 顯示, 為false 則隱藏
  • 數(shù)據(jù)改變之后,顯示的狀態(tài)會(huì)同步更新

6. v-if 指令
作用: 根據(jù)表達(dá)值的真假,切換元素的顯示和隱藏( 操縱dom 元素 )

代碼示例

<body>
<div>
  <img src = "./img/car.gif"/>
</div>
</body>
<script src="vue.min.js"></script>
<script>
var VM = new Vue({
el:"#app"
})
</script>

代碼示例

<body>
<div id="app">
<input type="button" value="切換狀態(tài)" @click="changeShow"> 
<img v-if="isShow" src="./img/car.gif/>
</div>
</body>

<script src="js/vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app",
data: {
isShow: true
},
methods: {
changeShow: function () {
//觸發(fā)方法, 對(duì)isShow進(jìn)行取反
this.isShow = !this.isShow;
},
},
});
</script>

v-if 指令總結(jié)

  • v-if 指令的作用: 根據(jù)表達(dá)式的真假切換元素的顯示狀態(tài)
  • 本質(zhì)是通過操作dom元素,來切換顯示狀態(tài)
  • 表達(dá)式為true 元素存在與dom樹,為false從dom樹中移除
  • 頻繁切換使用 v-show ,反之使用v-if

7. v-bind 指令
作用: 設(shè)置元素的屬性 （比如:src,title,class）

語法格式: v-bind:屬性名=表達(dá)式 
<img v-bind:src="imgSrc"/>
var VM = new Vue({
el:"#app",
data:{
imgSrc:"圖片地址"
}
})
v-bind 可以省略赔桌，簡寫為冒號(hào) ：
<img :src="imgSrc"/>

代碼示例

<body>
<div id="app">
<!-- 使用v-bind設(shè)置src屬性值 -->
<img v-bind:src="imgSrc">
<!-- 簡寫 設(shè)置title -->
<img :title="imgTitle">
<!-- 設(shè)置class -->
<div :style="{ fontSize: size + 'px'}">v-bind指令</div>
</div>
</body>
<script src="./vue.min.js"></script>
<script>
var VM = new Vue({
el:"#app",
data:{
imgSrc:"./img/lagou.jpg",
imgTitle:"拉鉤教育",
size:100
}
})
</script>

v-bind指令總結(jié)
v-bind 指令的作用是： 為元素綁定屬性
完整寫法 v-bind:屬性名供炎，可以簡寫為 :屬性名

8. v-for 指令
作用: 根據(jù)數(shù)據(jù)生成列表結(jié)構(gòu)

語法結(jié)構(gòu)

<div id="app">
<ul>
<li v-for="item in arr"></li>
</ul>
</div>
var VM = new Vue({
el:"#app",
data:{
arr:[1,2,3,4,5],
objArr:[
{name:"tom"},
{name:"jack"}
]
}
})

代碼示例

<body>
<div id="app">
<input type="button" value="添加數(shù)據(jù)" @click="add">
<input type="button" value="移除數(shù)據(jù)" @click="remove">
<ul>
<!-- 在li標(biāo)簽中獲取數(shù)組元素 -->
<li v-for="(item,index) in arr">
{{index+1 }}城市: {{item}}
</li>
</ul>
<!-- 使用h2標(biāo)簽顯示
v-for 結(jié)合 v-bind一起使用
-->
<h2 v-for="p in persons" v-bind:title="p.name">
{{p.name}}
</h2>
</div>
</body>
<script src="./vue.min.js"></script>
<script>
var VM = new Vue({
el:"#app",
data:{
//普通數(shù)組
arr:["上海","北京","天津","杭州"],
//對(duì)象數(shù)組
persons:[
{name:"尼古拉斯·趙四"},
{name:"萊安納多·小沈陽"}
]
},
methods: {
add:function(){
//push 添加
this.persons.push({name:"多利安·劉能"})
},
remove:function(){
this.persons.shift();
}
}
})
</script>

v-for指令總結(jié)

  • v-for 指令的作用: 根據(jù)數(shù)據(jù)生成列表結(jié)構(gòu)
  • 數(shù)組經(jīng)常和 v-for結(jié)合使用,數(shù)組有兩個(gè)常用方法:
    1. push() 向數(shù)組末尾添加一個(gè)或多個(gè)元素
    2. shift() 把數(shù)組中的第一個(gè)元素刪除
  • 語法是: (item,index) in 數(shù)據(jù)
  • item和index 可以結(jié)合其他指令一起使用
  • 數(shù)組的長度變化,會(huì)同步更新到頁面上,是響應(yīng)式的

9. v-on 指令補(bǔ)充

  1. 傳遞自定義參數(shù) : 函數(shù)調(diào)用傳參
  2. 事件修飾符: 對(duì)事件觸發(fā)的方式進(jìn)行限制

代碼示例

<body>
<div id="app">
<!-- 函數(shù)傳參 -->
<input
type="button"
value="禮物刷起來"
@click="showTime(666,'愛你老鐵!')"
/>
<!-- 事件修飾符 指定哪些方式可以觸發(fā)事件 -->
<input type="text" @keyup.enter="hi" />
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app",
data: {},
methods: {
showTime: function (p1, p2) {
console.log(p1);
console.log(p2);
},
hi: function () {
alert("你好嗎?");
},
},
});
</script>

總結(jié)

  • 事件綁定方法,可以傳入自定義參數(shù)
  • 定義方法時(shí),需要定義形參,來接收實(shí)際的參數(shù)
  • 事件的后面跟上 .修飾符 可以對(duì)事件進(jìn)行限制
  • .enter 可以限制觸發(fā)的按鍵為回車
  • 事件修飾符有許多 使用時(shí)可以查詢文檔

10. MVVM模式

  • MVVM 是Model-View-ViewModel 的縮寫，它是一種基于前端開發(fā)的架構(gòu)模式.
  • MVVM模式將頁面,分層了 M 疾党、V音诫、和VM ,解釋為：
  1. Model: 負(fù)責(zé)數(shù)據(jù)存儲(chǔ)
  2. View: 負(fù)責(zé)頁面展示
  3. View Model: 負(fù)責(zé)業(yè)務(wù)邏輯處理（比如Ajax請(qǐng)求等），對(duì)數(shù)據(jù)進(jìn)行加工后交給視圖展示
<body>
<div id="app">
<!-- View 視圖部分 -->
<h2>{{name}}</h2>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
//創(chuàng)建的vue實(shí)例,就是 VM ViewModel
var VM = new Vue({
el: "#app",
//data就是MVVM模式中的 model
data: {
name: "hello",
},
});
</script>
01.jpg

  • 首先雪位，我們將上圖中的DOM Listeners和Data Bindings看作兩個(gè)工具竭钝，它們是實(shí)現(xiàn)雙向綁定的關(guān)鍵。
    1.從View側(cè)看雹洗，ViewModel中的DOM Listeners工具會(huì)幫我們監(jiān)測(cè)頁面上DOM元素的變化香罐，如果有變化，則更改Model中的數(shù)據(jù)时肿；
    2.從Model側(cè)看庇茫，當(dāng)我們更新Model中的數(shù)據(jù)時(shí)，Data Bindings工具會(huì)幫我們更新頁面中的DOM元素螃成。

  • MVVM的思想,主要是為了讓我們的開發(fā)更加的方便,因?yàn)镸VVM提供了數(shù)據(jù)的雙向綁定

11. v-mode 指令
作用: 獲取和設(shè)置表單元素的值(實(shí)現(xiàn)雙向數(shù)據(jù)綁定)

  • 雙向數(shù)據(jù)綁定
    1.單向綁定: 就是把Model綁定到View港令，當(dāng)我們用JavaScript代碼更新Model時(shí)，View就會(huì)自動(dòng)更新锈颗。
    2.雙向綁定: 用戶更新了View顷霹，Model的數(shù)據(jù)也自動(dòng)被更新了，這種情況就是雙向綁定击吱。
  • 什么情況下用戶可以更新View呢淋淀？
    1.填寫表單就是一個(gè)最直接的例子。當(dāng)用戶填寫表單時(shí)覆醇，View的狀態(tài)就被更新了朵纷，如果此時(shí)MVVM框架可以自動(dòng)更新Model的狀態(tài)炭臭，那就相當(dāng)于我們把Model和View做了雙向綁定：
    代碼案例 
<body>
<div id="app">
<input type="button" value="修改message" @click="update" />
<!-- View 視圖 -->
<!-- <input type="text" v-bind:value="message" /> -->
<!-- v-model 實(shí)現(xiàn)雙向數(shù)據(jù)綁定 -->
<input type="text" v-model="message" />
<input type="text" v-model="password" />
<h2>{{message}}</h2>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
//VM 業(yè)務(wù)邏輯控制
var VM = new Vue({
el: "#app",
//Model 數(shù)據(jù)存儲(chǔ)
data: {
message: "拉鉤教育訓(xùn)練營",
password: 123,
},
methods: {
update: function () {
this.message = "拉鉤";
},
},
});
</script>

v-model指令總結(jié)

  • v-model 指令的作用是便捷的設(shè)置和獲取表單元素的值
  • 綁定的數(shù)據(jù)會(huì)和表單元素值相關(guān)聯(lián)
  • 雙向數(shù)據(jù)綁定

1.3 axios

1.3.1 Ajax回顧

1.3.1.1 什么是Ajax?

Ajax 是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的開發(fā)技術(shù)。Ajax = 異步 JavaScript 和 XML袍辞。

1.3.1.2 Ajax的作用

  • Ajax 可以使網(wǎng)頁實(shí)現(xiàn)異步更新鞋仍。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下，對(duì)網(wǎng)頁的某部分進(jìn)行更新（局部更新）搅吁。傳統(tǒng)的網(wǎng)頁如果需要更新內(nèi)容威创，必須重載整個(gè)網(wǎng)頁頁面。
  • 簡單記: Ajax 是一種在無需重新加載整個(gè)網(wǎng)頁的情況下谎懦，能夠更新部分網(wǎng)頁的技術(shù), 維護(hù)用戶體驗(yàn)性, 進(jìn)行網(wǎng)頁的局部刷新.

1.3.1.3 異步與同步

  • 瀏覽器訪問服務(wù)器的方式
    1.同步訪問: 客戶端必須等待服務(wù)器端的響應(yīng),在等待過程中不能進(jìn)行其他操作
    2.異步訪問: 客戶端不需要等待服務(wù)的響應(yīng),在等待期間,瀏覽器可以進(jìn)行其他操作


    12.jpg

1.3.1 axios介紹

VUE中結(jié)合網(wǎng)絡(luò)數(shù)據(jù)進(jìn)行應(yīng)用的開發(fā)
-目前十分流行網(wǎng)絡(luò)請(qǐng)求庫,專門用來發(fā)送請(qǐng)求,其內(nèi)部還是ajax,進(jìn)行封裝之后使用更加方便

  • axios作用: 在瀏覽器中可以幫助我們完成 ajax異步請(qǐng)求的發(fā)送.

Vue2.0之后肚豺，尤雨溪推薦大家用axios替換JQuery ajax

1.3.2 axios入門

使用步驟:

  1. 導(dǎo)包
<!-- 官網(wǎng)提供的 axios 在線地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  1. 請(qǐng)求方式,以GET和POST舉例
    GET 
axios.get(地址?key=value&key2=value2).then(function(response){},function(error)
{});

05.jpg

POST

axios.post(地址,{key:value,key2:value2}).then(function(response)
{},function(error){})

1.3.3 axios總結(jié)

  1. axios 必須導(dǎo)包才能使用
  2. 使用get或者post方法,就可以發(fā)送請(qǐng)求
  3. then方法中的回調(diào)函數(shù),會(huì)在請(qǐng)求成功或者請(qǐng)求失敗的時(shí)候觸發(fā)
  4. 通過回調(diào)函數(shù)的形參可以獲取響應(yīng)的內(nèi)容,或者錯(cuò)誤信息

1.3.4 解決頁面閃爍問題

v-cloak指令
作用: 解決插值表達(dá)式閃爍問題
當(dāng)網(wǎng)絡(luò)較慢，網(wǎng)頁還在加載 Vue.js 界拦，而導(dǎo)致 Vue 來不及渲染吸申，這時(shí)頁面就會(huì)顯示出 Vue 源代碼。我們可以使用 v-cloak 指令來解決這一問題享甸。

  1. 添加樣式
<style>
/* 通過屬性選擇器,設(shè)置 添加了v-cloak */
[v-cloak] {
display: none;
}
</style>
  1. 在id為app的div中添加 v-cloak
<div class="wrap" id="app" v-cloak>

1.4 computed 計(jì)算屬性

1.4.1 什么是計(jì)算屬性

在Vue應(yīng)用中截碴，在模板中雙向綁定一些數(shù)據(jù)或者表達(dá)式，但是表達(dá)式如果過長蛉威，或者邏輯更為復(fù)雜時(shí)隐岛，就會(huì)變得臃腫甚至難以維護(hù)和閱讀，比如下面的代碼:

<div>
寫在雙括號(hào)中的表達(dá)式太長了,不利于閱讀
{{text.split(',').reverse().join(',')}}
</div>.
將這段操作text.split(',').reverse().join(',') 放到計(jì)算屬性中,最終返回一個(gè)結(jié)果值就可以

computed 的作用: 減少運(yùn)算次數(shù), 緩存運(yùn)算結(jié)果. 運(yùn)用于重復(fù)相同的計(jì)算

<body>
<div id="app">
<!-- <h1>{{a*b}}</h1>
<h1>{{a*b}}</h1> -->
<!-- <h1>{{res()}}</h1>
<h1>{{res()}}</h1> -->
<h1>{{res2}}</h1>
<h1>{{res2}}</h1>
</div>
</body>
<script src="vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app",
data: {
a: 10,
b: 20,
},
methods: {
res: function () {
console.log("res方法執(zhí)行");
return this.a * this.b;
},
},
//使用計(jì)算屬性進(jìn)行優(yōu)化 減少運(yùn)算次數(shù),用于重復(fù)相同的運(yùn)算
computed: {
res2: function () {
console.log("res2方法執(zhí)行");
return this.a * this.b;
},
},
});
</script>

1.4.2 computed總結(jié)

  1. 定義函數(shù)也可以實(shí)現(xiàn)與 計(jì)算屬性相同的效果,都可以簡化運(yùn)算瓷翻。
  2. 不同的是計(jì)算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的。只在相關(guān)響應(yīng)式依賴發(fā)生改變時(shí)它們才會(huì)重新求值割坠。

1.5 filter 過濾器

1.5.1 什么是過濾器

過濾器是對(duì)即將顯示的數(shù)據(jù)做進(jìn)一步的篩選處理齐帚，然后進(jìn)行顯示，值得注意的是過濾器并沒有改變?cè)瓉淼臄?shù)據(jù)彼哼，只是在原數(shù)據(jù)的基礎(chǔ)上產(chǎn)生新的數(shù)據(jù)对妄。
數(shù)據(jù)加工車間,對(duì)值進(jìn)行篩選加工.

1.5.2 過濾器使用位置

  1. 雙括號(hào)插值內(nèi)
{{ msg | filterA }} msg是需要處理的數(shù)據(jù), filterA是過濾器, | 這個(gè)豎線是管道,通過這個(gè)管道將數(shù)據(jù)傳輸給過濾器進(jìn)行過濾 加工操作
  1. v-bind綁定的值的地方。
<h1 v-bind:id=" msg | filterA"> {{ msg }} </h1>

1.5.3 過濾器

1.局部過濾器
需求: 通過過濾器給電腦價(jià)格前面 添加一個(gè)符號(hào)￥

<body>
<div id="app">
<p>電腦價(jià)格: {{price | addIcon}}</p>
</div>
</body>
<script src="./vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app", //掛載點(diǎn)
data: {
price: 200,
},
methods: {}, //方法
computed: {}, //計(jì)算屬性
//局部過濾器
filters: {
//處理函數(shù),value = price ,是固定參數(shù)
addIcon(value) {
return "￥" + value;
},
},
});
</script>

2.全局過濾器
需求: 將用戶名開頭字母大寫

<body>
<div id="app">
<p>{{user.name | changeName}}</p>
</div>
</body>
<script src="./vue.min.js"></script>
<script>
//在創(chuàng)建Vue實(shí)例之前 創(chuàng)建全局過濾器
Vue.filter("changeName", function (value) {
//將姓名開頭字母大寫,然后再重新拼接
return value.charAt(0).toUpperCase() + value.slice(1);
});
var VM = new Vue({
el: "#app", //掛載點(diǎn)
data: {
user: { name: "tom" },
},
});
</script>

1.5.4 總結(jié)

  1. 過濾器常用來處理文本格式化的操作敢朱。過濾器可以用在兩個(gè)地方：雙花括號(hào)插值和 v-bind 表達(dá)式
  2. 過濾器應(yīng)該被添加在 JavaScript 表達(dá)式的尾部剪菱，由“管道”符號(hào)指示

1.6 watch 偵聽器

1.6.1 什么是偵聽器

Vue.js 提供了一個(gè)方法 watch，它用于觀察Vue實(shí)例上的數(shù)據(jù)變動(dòng)拴签。
作用: 當(dāng)你有一些數(shù)據(jù)需要隨著其它數(shù)據(jù)變動(dòng)而變動(dòng)時(shí)孝常，可以使用偵聽屬性

1.6.2 案例演示

需求: 監(jiān)聽姓名變化,實(shí)時(shí)顯示


image.png
<body>
<div id="app">
<label>名：<input type="text" v-model="firstName" /></label>
<label>姓：<input type="text" v-model="lastName" /></label>
{{fullNameComputed}}
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data: {
firstName: "",
lastName: "",
fullName: "",
},
//監(jiān)聽，程序在運(yùn)行的時(shí)候蚓哩，實(shí)時(shí)監(jiān)聽事件
watch: {
//參數(shù)說明：1构灸、新值，2岸梨、舊值
firstName(newValue, oldValue) {
this.fullName = newValue + " " + this.lastName;
},
lastName(newValue, oldValue) {
this.fullName = this.firstName + " " + newValue;
},
},
computed: {
fullNameComputed() {
return this.firstName + " " + this.lastName;
},
},
});
</script>

1.7 Component 組件

1.7.1 組件介紹

1.組件（Component）是自定義封裝的功能喜颁。在前端開發(fā)過程中稠氮，經(jīng)常出現(xiàn)多個(gè)網(wǎng)頁的功能是重復(fù)的，而且很多不同的頁面之間半开，也存在同樣的功能隔披。

2.我們將相同的功能進(jìn)行抽取,封裝為組件,這樣，前端人員就可以在組件化開發(fā)時(shí)寂拆，只需要書寫一次代碼奢米，隨處引入即可使用。

3.組件系統(tǒng)讓我們可以用獨(dú)立可復(fù)用的小組件來構(gòu)建大型應(yīng)用漓库，幾乎任意類型的應(yīng)用的界面都可以抽象為一個(gè)組件樹


image.png

vue的組件有兩種: 全局組件 和 局部組件

1.7.2 全局組件

語法格式:

Vue.component("組件名稱", {
template: "html代碼", // 組件的HTML結(jié)構(gòu)代碼
data(){ //組件數(shù)據(jù)
return {}
},
methods: { // 組件的相關(guān)的js方法
方法名(){
// 邏輯代碼
}
}
})

注意:

  1. 組件名以小寫開頭恃慧，采用短橫線分割命名: 例如 hello-Word
  2. 組件中的data 必須是一個(gè)函數(shù),注意與Vue實(shí)例中的data區(qū)分
  3. 在template模板中, 只能有一個(gè)根元素
<body>
<div id="app">
<!-- 使用組件,可以使用多次 -->
<lagou-header></lagou-header>
<lagou-header></lagou-header>
<lagou-header></lagou-header>
</div>
</body>
<script src="./vue.min.js"></script>
<script>
//全局組件
Vue.component("lagou-header", {
//組件的命名一般使用短橫線方式,組件中的模板只能有一個(gè)根元素
template: "<div>頭部組件的HTML代碼<h1 @click='hello'>{{msg}}</h1><div>",
data() {
//組件中的data是一個(gè)函數(shù)
return {
msg: "hello這里是組件中的data數(shù)據(jù)",
};
},
methods: {
hello() {
alert("嗨 你好!");
},
},
});
var VM = new Vue({
el: "#app",
data: {},
methods: {},
});
</script>

1.7.3 局部組件

相比起全局組件，局部組件只能在同一個(gè)實(shí)例內(nèi)才能被調(diào)用渺蒿。局部組件的寫法和全局組件差不多痢士。 唯一不同就是：局部組件要寫在Vue實(shí)例里面。

new Vue({
el: "#app",
components: {
組件名: {
// 組件結(jié)構(gòu)
template: "HTML代碼",
// data數(shù)據(jù)
data() { return { msg:"xxxx" };},
},
},
});

注意:
創(chuàng)建局部組件茂装，注意 components怠蹂，注意末尾有 ‘s’，而全局組件是不用+ ‘s’ 的少态。這意味著城侧，components 里可以創(chuàng)建多個(gè)組件。

<body>
<div id="app">
<web-msg></web-msg>
</div>
</body>
<script src="./vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app",
components: {
//組件名稱
"web-msg": {
//組件內(nèi)容
template: "<div><h1>{{msg1}}</h1><h1>{{msg2}}</h1></div>",
data() {
return {
msg1: "開發(fā)ing...",
msg2: "開發(fā)完成!",
};
},
},
},
});
</script>

1.7.4 組件與模板分離

由于把html語言寫在組件里面很不方便彼妻，也不太好看所以將它們分開寫嫌佑。

<body>
<div id="app">
<web-msg></web-msg>
</div>
<!-- 將模板寫在HTML中, 給模板指定一個(gè)ID -->
<template id="tmp1">
<div>
<button @click="show">{{msg}}</button>
</div>
</template>
</body>
<script src="./vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app",
components: {
"web-msg": {
template: "#tmp1",
data() {
return {
msg: "點(diǎn)擊查詢",
};
},
methods: {
show() {
alert("正在查詢,請(qǐng)稍等...");
},
},
},
"web-msg2": {},
},
});
</script>

總結(jié):

  1. 上面這種寫法，瀏覽器會(huì)把 html 里的 template 標(biāo)簽過濾掉侨歉。所以 template 標(biāo)簽的內(nèi)容是不會(huì)在頁面中展示的屋摇。直到它被 JS 中的 Vue 調(diào)用。
  2. 在 html 中幽邓，template 標(biāo)簽一定要有一個(gè) id炮温，因?yàn)橥ㄟ^ id 是最直接被選中的。 data 和 methods等 參數(shù)牵舵，全部都要放到 Vue 實(shí)例里面寫

1.8 Vue生命周期

1.8.1 生命周期圖示

每個(gè)Vue實(shí)例在被創(chuàng)建之前都要經(jīng)過一系列的初始化過程,這個(gè)過程就是vue的生命周期
了解生命周期的好處:

  1. 找錯(cuò)誤
  2. 解決需求
    下圖展示了實(shí)例的生命周期柒啤。你不需要立馬弄明白所有的東西，不過隨著你的不斷學(xué)習(xí)和使用畸颅，它的參考價(jià)值會(huì)越來越高担巩。
08.jpg

1.8.2 鉤子函數(shù)介紹

生命周期中的鉤子函數(shù)
鉤子函數(shù)：鉤子函數(shù)是在一個(gè)事件觸發(fā)的時(shí)候，在系統(tǒng)級(jí)捕獲到了他没炒，然后做一些操作

函數(shù) 說明
beforeCreate() 在創(chuàng)建Vue實(shí)例之前,可以執(zhí)行這個(gè)方法. 例如 加載動(dòng)畫操作
created() 實(shí)例創(chuàng)建完成,屬性綁定好了,但是DOM還沒有生成.
beforeMount() 模板已經(jīng)在內(nèi)存中編輯完成了兵睛，尚未被渲染到頁面中.
mounted() 內(nèi)存中的模板已經(jīng)渲染到頁面，用戶已經(jīng)可以看見內(nèi)容.
beforeUpdate() 數(shù)據(jù)更新的前一刻 , 組件在發(fā)生更新之前,調(diào)用的函數(shù)
updated() updated執(zhí)行時(shí)，內(nèi)存中的數(shù)據(jù)已更新祖很，并且頁面已經(jīng)被渲染
beforeDestroy () 鉤子函數(shù)在實(shí)例銷毀之前調(diào)用
destroyed () 鉤子函數(shù)在Vue 實(shí)例銷毀后調(diào)用

1.9 Vue Router 路由

1.9.1 什么是路由?

在Web開發(fā)中笛丙，路由是指根據(jù)URL分配到對(duì)應(yīng)的處理程序。 路由允許我們通過不同的 URL 訪問不同的內(nèi)容假颇。
通過 Vue.js 可以實(shí)現(xiàn)多視圖單頁面web應(yīng)用（single page web application胚鸯，SPA）

09.jpg

1.9.2 什么是SPA ?
百度百科

單頁面Web應(yīng)用（single page web application，SPA）笨鸡，就是只有一張Web頁面的應(yīng)用姜钳，是加載單個(gè)HTML 頁面并在用戶與應(yīng)用程序交互時(shí)動(dòng)態(tài)更新該頁面的Web應(yīng)用程序。

單頁應(yīng)用不存在頁面跳轉(zhuǎn)形耗，它本身只有一個(gè)HTML頁面哥桥。我們傳統(tǒng)意義上的頁面跳轉(zhuǎn)在單頁應(yīng)用的概念下轉(zhuǎn)變?yōu)榱?body 內(nèi)某些元素的替換和更新，舉個(gè)例子:

10.jpg

整個(gè)body的內(nèi)容從登錄組件變成了歡迎頁組件, 從視覺上感受頁面已經(jīng)進(jìn)行了跳轉(zhuǎn)激涤。但實(shí)際上拟糕，頁面只是隨著用戶操作，實(shí)現(xiàn)了局部內(nèi)容更新,依然還是在index.html 頁面中倦踢。
單頁面應(yīng)用的好處:

  1. 用戶操作體驗(yàn)好送滞，用戶不用刷新頁面，整個(gè)交互過程都是通過Ajax來操作辱挥。
  2. 適合前后端分離開發(fā)犁嗅，服務(wù)端提供http接口，前端請(qǐng)求http接口獲取數(shù)據(jù)晤碘，使用JS進(jìn)行客戶端渲染褂微。

1.9.3 路由相關(guān)的概念

router :
是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成园爷，讓構(gòu)建單頁面應(yīng)用（SPA）變得易
如反掌 ,router 就相當(dāng)于一個(gè)管理者宠蚂，它來管理路由。
route:
ruter相當(dāng)于路由器, route就相當(dāng)于一條路由.比如: Home按鈕 => home內(nèi)容腮介， 這是一條route,
news按鈕 => news內(nèi)容， 這是另一條路由端衰。
routes :
是一組路由叠洗，把上面的每一條路由組合起來，形成一個(gè)數(shù)組旅东。[{home 按鈕 =>home內(nèi)容 }灭抑， {
about按鈕 => about 內(nèi)容}]
router-link組件:
router-link 是一個(gè)組件，是對(duì)標(biāo)簽的一個(gè)封裝. 該組件用于設(shè)置一個(gè)導(dǎo)航鏈接抵代，切換不同 HTML
內(nèi)容腾节。 to 屬性為目標(biāo)地址， 即要顯示的內(nèi)容
router-view 組件:
路由導(dǎo)航到指定組件后,進(jìn)行渲染顯示頁面.

1.9.4 使用路由

(一 ) Vue.js 路由需要載入 vue-router 庫

//方式1: 本地導(dǎo)入
<script src="vue-router.min.js"></script>
//方式2: CDN
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

(二) 使用步驟

  1. 定義路由所需的組件
  2. 定義路由 每個(gè)路由都由兩部分 path (路徑) 和component (組件)
  3. 創(chuàng)建router路由器實(shí)例 ,管理路由
  4. 創(chuàng)建Vue實(shí)例, 注入路由對(duì)象, 使用$mount() 指定掛載點(diǎn)

Vue 的mount()為手動(dòng)掛載，在項(xiàng)目中可用于延時(shí)掛載（例如在掛載之前要進(jìn)行一些其他操作案腺、判斷等）庆冕， 之后要手動(dòng)掛載上。new Vue時(shí)劈榨，el和mount并沒有本質(zhì)上的不同访递。

(三) HTML代碼

<body>
<div id="app">
<h1>渣浪.com</h1>
<p>
<!-- 使用 router-link 組件來導(dǎo)航,to屬性指定鏈接 -->
<router-link to="/home">go to home</router-link>
<router-link to="/news">go to news</router-link>
</p>
<!-- 路由的出口, 路由匹配到的組件(頁面)將渲染在這里 -->
<router-view></router-view>
</div>
</body>

(四)JS代碼

<script src="./vue.min.js"></script>
<script src="./vue-router.min.js"></script>
<script>
//1.定義路由所需的組件
const home = { template: "<div>首頁</div>" };
const news = { template: "<div>新聞</div>" };
//2.定義路由 每個(gè)路由都有兩部分 path和component
const routes = [
{ path: "/home", component: home },
{ path: "/news", component: news },
];
//3.創(chuàng)建router路由器實(shí)例,對(duì)路由對(duì)象routes進(jìn)行管理.
const router = new VueRouter({
routes: routes,
});
//4.創(chuàng)建Vue實(shí)例, 調(diào)用掛載mount函數(shù),讓整個(gè)應(yīng)用都有路由功能
const VM = new Vue({
router,
}).$mount("#app"); //$mount是手動(dòng)掛載代替el
</script>

1.9.5 路由總結(jié)

  1. router是Vue中的路由管理器對(duì)象,用來管理路由.
  2. route是路由對(duì)象,一個(gè)路由就對(duì)應(yīng)了一條訪問路徑,一組路由用routes表示
  3. 每個(gè)路由對(duì)象都有兩部分 path(路徑)和component (組件)
  4. router-link 是對(duì)a標(biāo)簽的封裝,通過to屬性指定連接
  5. router-view 路由訪問到指定組件后,進(jìn)行頁面展示
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市同辣，隨后出現(xiàn)的幾起案子拷姿，更是在濱河造成了極大的恐慌，老刑警劉巖旱函，帶你破解...
    沈念sama閱讀 211,561評(píng)論 6贊 492
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件响巢，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡棒妨，警方通過查閱死者的電腦和手機(jī)踪古，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,218評(píng)論 3贊 385
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來靶衍，“玉大人灾炭，你說我怎么就攤上這事÷簦” “怎么了蜈出？”我有些...
    開封第一講書人閱讀 157,162評(píng)論 0贊 348
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長涛酗。 經(jīng)常有香客問我铡原，道長，這世上最難降的妖魔是什么商叹？ 我笑而不...
    開封第一講書人閱讀 56,470評(píng)論 1贊 283
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任燕刻，我火速辦了婚禮，結(jié)果婚禮上剖笙，老公的妹妹穿的比我還像新娘卵洗。我一直安慰自己，他們只是感情好弥咪，可當(dāng)我...
    茶點(diǎn)故事閱讀 65,550評(píng)論 6贊 385
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布过蹂。 她就那樣靜靜地躺著，像睡著了一般聚至。 火紅的嫁衣襯著肌膚如雪酷勺。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 49,806評(píng)論 1贊 290
  • 城市分裂傳說
    那天扳躬，我揣著相機(jī)與錄音脆诉，去河邊找鬼甚亭。 笑死，一個(gè)胖子當(dāng)著我的面吹牛击胜，可吹牛的內(nèi)容都是我干的亏狰。 我是一名探鬼主播，決...
    沈念sama閱讀 38,951評(píng)論 3贊 407
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼潜的，長吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼骚揍！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起啰挪，我...
    開封第一講書人閱讀 37,712評(píng)論 0贊 266
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對(duì)情侶失蹤信不，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后亡呵，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體抽活，經(jīng)...
    沈念sama閱讀 44,166評(píng)論 1贊 303
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,510評(píng)論 2贊 327
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年锰什，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了下硕。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,643評(píng)論 1贊 340
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡汁胆，死狀恐怖梭姓，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情嫩码，我是刑警寧澤誉尖，帶...
    沈念sama閱讀 34,306評(píng)論 4贊 330
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站铸题，受9級(jí)特大地震影響铡恕，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜丢间，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,930評(píng)論 3贊 313
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一探熔、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧烘挫，春花似錦诀艰、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,745評(píng)論 0贊 21
  • 一樁弒父案其垄，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至喜滨，卻和暖如春捉捅，著一層夾襖步出監(jiān)牢的瞬間撤防，已是汗流浹背虽风。 一陣腳步聲響...
    開封第一講書人閱讀 31,983評(píng)論 1贊 266
  • 情欲美人皮
    我被黑心中介騙來泰國打工棒口， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人辜膝。 一個(gè)月前我還...
    沈念sama閱讀 46,351評(píng)論 2贊 360
  • 代替公主和親
    正文 我出身青樓无牵，卻偏偏與公主長得像，于是被迫代替她去往敵國和親厂抖。 傳聞我的和親對(duì)象是個(gè)殘疾皇子茎毁，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,509評(píng)論 2贊 348

推薦閱讀更多精彩內(nèi)容

  • ### 什么是Vue.js + Vue.js 是目前最火的一個(gè)前端框架，React是最流行的一個(gè)前端框架（Reac...
    JLong閱讀 1,053評(píng)論 0贊 0
  • 相關(guān)概念 混合開發(fā)和前后端分離 混合開發(fā)(服務(wù)器端渲染) 前后端分離后端提供接口忱辅，前端開發(fā)界面效果(專注于用戶的交...
    他愛在黑暗中漫游閱讀 2,777評(píng)論 4贊 45
  • 一七蜘、對(duì)于MVVM的理解？ MVVM 是 Model-View-ViewModel 的縮寫墙懂。Model代表數(shù)據(jù)模型橡卤，...
    lucky婧閱讀 418評(píng)論 0贊 2
  • 前言 本文以前端面試官的角度出發(fā)，對(duì) Vue 框架中一些重要的特性损搬、框架的原理以問題的形式進(jìn)行整理匯總碧库，意在幫助作...
    lessonSam閱讀 377評(píng)論 0贊 0
  • 一嵌灰、模版指令 通過模版指令(寫在html中的)，即是html和vue對(duì)象的粘合劑颅悉。 數(shù)據(jù)渲染 v-text沽瞭、v-h...
    EndEvent閱讀 2,399評(píng)論 3贊 56