整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
說明: 文本數據渲染 用法: v-text="Vue實例中的數據"=> 簡寫 {{Vue實例中的數據}}
相當于JavaScript中的innerText
說明: HTML渲染數據 用法:v-html="Vue實例中的數據" 會解析html結構 渲染至頁面
相當于JavaScript中的innerHTML
注意: 在網站上動態渲染任意的 HTML 是非常危險的!!! 因為容易導致 XSS 攻擊 只在可信內容上使用 v-html 絕對不要用在用戶通過(提交)的內容上使用
說明: 事件綁定(綁定事件監聽器) 用法: v-on:事件名="事件處理函數"=> 簡寫 @事件名="事件處理函數"
$event.target 獲取當前事件觸發的DOM元素 $event.path[0](el.path[0]) 也可以獲取當前事件觸發的DOM元素 path數組中有從觸發事件源的元素的所有上一級元素 直到window 實參不傳遞(沒有任何參數) 默認在形參中第一個就是事件參數
實參傳遞 就必須傳遞$event 來獲取獲取事件參數
面試問及
之前在使用餓了么UI的時候給一個組件添加一個原生的事件 但是一直觸發不了 后面查閱文檔發現這個組件內部并沒有注冊我使用的原生事件 事件修飾符.native就可以直接監聽并觸發組件的原生事件
說明: 屬性綁定(行內屬性) 用法: v-bind:屬性名="Vue實例中的數據"=> 簡寫 :屬性名="Vue實例中的數據" 當Vue實例中的數據改變之后 頁面會同步更新
isRed=true 就有red這個類 isRed=false 就沒有red這個類 isRed 在 Vue 實例data中聲明
class="red" :class="{'yellow' : isYellow}"
說明: 雙向數據綁定 用法: v-model="Vue實例中的數據"
注意: v-model 只能設置給from表單屬性
說明: 循環渲染 用法: v-for="(item,index) in items" :key="index"
items是源數據數組 item是被迭代的數組元素的別名 index是被迭代的數組元素的下標(索引)
push() pop() shift() unshift() splice() sort() reverse() ...
這種修改數組中的元素是無法實現數據改變后頁面會同步改變(只會修改data中的數據 但是頁面不會同步改變)
說明: 條件(表達式或布爾值)判斷渲染 用法: v-if="表達式或布爾值" v-else-if="表達式或布爾值" v-else
v-if 和 v-else-if 后面必須跟表達式或布爾值 v-else-if 和 v-else 不能獨立使用 必須跟在 v-if 后面
說明: 條件渲染 用法: v-show="表達式或布爾值" 根據表達式或布爾值的真假切換元素的display屬性
v-show 不支持 <template>元素 也不支持 v-else
都是用來判斷渲染數據的
1.有較高的切換性能消耗 2.惰性渲染 第一次如果條件為false 則不會渲染到頁面 需要等后面條件切換后才會進行第一次渲染 3.條件切換是切換DOM數中這個元素的移除或添加 4.如果運行時條件很少改變則使用v-if
1.有較高的初始渲染消耗 2.初始渲染 不管條件 第一次加載頁面的時候都會渲染到頁面 3.條件切換只是切換元素的display屬性 4.如果運行時條件會非常頻繁的切換則使用v-show
說明: 這個指令保存在這個元素上 直到關聯實例結束編譯
插值表達式在網絡較滿的情況下可能會出現數據閃爍問題 可以通過給實例(#app)盒子添加一個 v-cloak 指令 通過這個指令的特性(如頁面中還有插值表達式就會存在這個指令 如果頁面的插值表達式都被替換成數據 就會自動移除這個標簽) 配合css [v-cloak]{display:none|opacity:0}來解決數據閃爍的問題
說明: 這個指令添加的元素 內部的胡子語法只會在第一次渲染的時候執行解析一次 后面數據發生改變后也不會觸發更新
某些元素只需要解析一次 后續不需要更新 就可以使用這個指令 提升性能
1.使用get和set函數 需要把計算屬性函數改成計算屬性對象 2.計算屬性默認執行get方法(根據相關的數據計算返回當前屬性的值) 3.當計算數學值自身改變后執行set方法 4.可以用來計算稅前和稅后的互推算
watch:{
XXX:{
deep:true,
handler(newVal,oldVal){
// 處理代碼
}
}
}
watch: {
// watch里面的 $router 這些對象前面不要帶this
"$route.path"(newVal, oldVal) {
if (newVal.indexOf("/login") >=0) {
this.welcom="歡迎登陸";
}
if (newVal.indexOf("/register") >=0) {
this.welcom="歡迎注冊";
}
}
}
watch: {
$route: function(newVal,oldVal) {
console.log(this.$route.path);
}
}
1.偵聽器用來檢測數據的改變 2.當偵聽的那個數據發生改變后就會觸發偵聽器中的對應函數 3.一般我更多的使用是用偵聽路由的變化=> 重新獲取數據(如搜索在對應的router-view中顯示對應的數據) 4.之前碰到過一個坑點 偵聽器默認無法偵聽復雜數據類型 5.后面使用深度偵聽 depp:true 來解決了這個問題 6.或者偵聽精確到對象中的那個值也可
Vue.filter("formatData", (形參=管道符前面的數據,形參=想要傳入的數據...)=> {
處理數據； `返回`處理之后的數據
});
filters:{
formatTime(形參=管道符前面的數據,形參=想要傳入的數據...){
處理數據； `返回`處理之后的數據 }
}
獲取data中的所有數據
用于當前Vue實例的初始化選項 可以獲取自定義選項
new Vue({
customOption: 'foo',
created: function () {
console.log(this.$options.customOption) //=> 'foo'
}
})
組件的出現就是為了拆分Vue實例的代碼量 能夠讓我們以不同的組件來劃分不同的功能模塊 需要什么功能就去調用對應的模塊即可 局部功能界面
Vue.component('組件名',{參數})
組件名請使用小寫 大寫需要駝峰命名法
Vue.component('sayHiBaby',{參數})
頁面中標簽使用 <say-hi-baby></say-hi-baby>
父向子傳參 通過 props 向子組件傳遞數據 可以在組件實例中通過 this.xxx 拿到傳遞過來的值 高級寫法(props驗證)
props:{
xxx:{
// 數據類型
type:"String",
// 必須傳遞
required:"true",
// 默認值
default:"mystring"
....
}
}
props可以傳遞任何數據類型 包括函數
為什么組件的data是一個函數 而Vue實例的data是一個對象?
1.每一個Vue組件都是一個Vue實例 2.都是通過new Vue() 創建出來的 3.如果data是一個對象的話 那么這些組件的引用指向就會相同 4.一個的值修改后 其他的值也會修改(這是JavaScript語法的特性) 5.如果data是一個函數 函數中再返回一個對象 6.那么每個Vue組件都有了自己的作用域 互不干擾
Vue生命周期鉤子 || Vue生命周期函數 Vue提供給開發者一系列的回調函數 讓我們可以在Vue的各個階段添加自定義的邏輯處理
創建期間的生命周期函數(1次)
Vue渲染解析插值表達式 并不是在頁面中直接渲染解析 而是將整個掛載在Vue實例的模版 拿到內存中去解析 等全部解析完成后 再一次性的渲染到頁面(批量) (因為有可能頁面中有很多一樣的data中的值 如果是在頁面中直接渲染解析會很耗性能)
運行期間的生命周期函數(0次-多次)
銷毀期間的生命周期函數(1次)
想要銷毀Vue實例 調用 vm.$destroy() 即可 注意: 這個方法方法并不會銷毀Vue實例的一些如 定時器或計時器等方法 會造成 '內存泄漏' 所以在完全銷毀之前 需要在 beforeDestory 鉤子中清除定時器等...
url地址和組件之間的關系
必須添加 Vue.use(VueRouter)
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
<router-link to="/login" tag="span">登陸</router-link>
<router-link to="/logout" tag="span">注冊</router-link>
<router-view></router-view>
const login={ template: "#tempLogin" };
const logout={ template: "#tempLogout" };
const routes=[
{ path: "/login", component: login },
{ path: "/logout", component: logout }
];
const router=new VueRouter({
routes
});
new Vue({
el:"xxx",
router
})
設置路由匹配成功后 router-link 的樣式屬性
/login=> /login/user
觸發 添加樣式
/login/user=> /login/user
觸發 添加樣式
點了跳轉 沒有任何邏輯 類似于(a標簽設置了href) <router-link to="地址">XXX</router-link>
跳轉的同時執行其他需要執行的邏輯 router.push('地址')
const router=new VueRouter({ ... })
router.beforeEach((to, from, next)=> {
// ...
next()
})
to
去哪個路由 一般通過to來判斷對應路由做對應處理
from
來自哪個路由
next()
必須next()才可以繼續跳轉頁面(像node"express"里面的中間件)
1.判斷登陸狀態 如判斷token... 2.可以在跳轉路由時先判斷這個頁面這個用戶是否有權限訪問... 3.可以每次路由跳轉前都提示用戶跳轉至什么頁面...
{ path: '/user', component: User,
children: [
{
path: 'index',
component: Index
}
]
}
配置錯誤路由規則
Axios是一個基于 promise(實現了鏈式調用) 的 HTTP 庫 可以用在瀏覽器和 Node.js 中 專注于發請求 專注于網絡請求的一個庫`
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
成功回調
失敗回調
// 為給定 ID 的 user 創建請求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 可選地，上面的請求可以這樣做
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
基礎的地址應用 沒有必要每次都寫 可以直接抽離出來
axios.defaults.baseURL='設置的基地址'
Vue.prototype.$axios=axios
axios填寫路徑時后面直接寫對應的路徑即可 前面的公共部分不需在寫(寫了也不會影響)
axios.defaults.withCredentials=true
const xxx=axios.create({
// 即地址
baseURL: 'https://some-domain.com/api/',
// 可以統一設置請求頭
headers: {Authorization: token}
});
xxx.get()
xxx.post()
axios.interceptors.request.use(function (config) {
// 可以在發請求之前在這里設置一些請求頭
`config.headers.Authorization=token`
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
axios.interceptors.response.use(function (response) {
// 可以在獲取響應數據之后設置一些提示 如獲取失敗/成功
`response.data.code==200?`
return response;
}, function (error) {
// Do something with response error
return Promise.reject(error);
});
vue-resource已經不再更新 推薦使用Axios
Vue提供的讓程序員可以在動畫的各個時機 添加 自定義邏輯 的鉤子 也可稱之為 動畫鉤子或動畫函數
// 指定顯示的transition
xxx-enter-active
// 指定隱藏的transition
xxx-leave-active
// 指定隱藏時的樣式
xxx-enter/xxx-leave-to
transition標簽包裹
transition-group標簽包裹
動畫樣式的開始類名
解析為的標簽名
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<!-- ... -->
</transition>
// ...
methods: {
// --------
// 進入中
// --------
beforeEnter: function (el) {
// ...
},
// 當與 CSS 結合使用時
// 回調函數 done 是可選的
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// --------
// 離開時
// --------
beforeLeave: function (el) {
// ...
},
// 當與 CSS 結合使用時
// 回調函數 done 是可選的
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}
npm install vuex --save
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store=new Vuex.Store({
state: {
// 數據
count: 0
},
mutations: {
// 方法
increment (state) {
state.count++
}
}
})
new Vue({
el:xxx,
// 掛載到Vue實例上
store
})
<template>
</template>
<script>
export default {
}
</script>
<style>
</style>
把很多開發中需要用到的功能整合到了一起 讓Vue開發人員專注于邏輯代碼即可 是用webpack配置出來的
vue create 項目名 <=項目名不要有中文!!!不要大些 cd 項目名 npm run serve
npm init webpack "項目名" cd "項目名" npm instal npm run dev
最后一步選 No, I will handle that myself 自己再npm i 下載速度會快一點
|-- build : webpack 相關的配置文件夾(基本不需要修改)
|-- dev-server.js : 通過 express 啟動后臺服務器
|-- config: webpack 相關的配置文件夾(基本不需要修改)
|-- index.js: 指定的后臺服務的端口號和靜態資源文件夾
|-- node_modules
|-- src : 源碼文件夾
|-- components: vue 組件及其相關資源文件夾
|-- App.vue: 應用根主組件
|-- main.js: 應用入口 js
|-- static: 靜態資源文件夾
|-- .babelrc: babel 的配置文件
|-- .eslintignore: eslint 檢查忽略的配置
|-- .eslintrc.js: eslint 檢查的配置
|-- .gitignore: git 版本管制忽略的配置
|-- index.html: 主頁面文件
|-- package.json: 應用包配置文件
|-- README.md: 應用描述說明的 readme 文件
npm install vue-router
import VueRouter from 'vue-router'
`const router=new VueRouter({
routes
})`
`new Vue({
router
})`
為元素添加隨機屬性 樣式中添加屬性選擇器 2者結合 就把css的作用范圍 約束
餓了么前端團隊開發的PC端的基于Vue的組件 內部封裝了很多現成的組件 在VueCLI中使用elementUI npm i element-ui import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) 有些組件并沒有在組件內部使用原生事件 但是有些情況需要一些原生事件 就可以使用.native修飾符來觸發
返回所有匹配成功的值 創建一個新數組, 其包含通過所提供函數實現的測試的所有元素 (數組過濾)
const oldArr=["dajsk", "dkjdklas", "kgjftlk", "ksf", "ds", "mfksjjks"];
let res=oldArr.filter((val, index)=> val.indexOf("d") !=-1); // 返回所有匹配成功的值
console.log(res); // [ 'dajsk', 'dkjdklas', 'ds' ]
返回匹配的第一個值 返回數組中滿足提供的測試函數的第一個元素的值 沒有匹配成功返回undefined
const oldArr=["dajsk", "dkjdklas", "kgjftlk", "ksf", "ds", "mfksjjks"];
let res1=oldArr.find((val, index)=> val.indexOf("d") !=-1); // 返回匹配的第一個值
console.log(res1); // dajsk
將匹配成功的值做對應的計算后再次返回 創建一個新數組 其結果是該數組中的每個元素都調用一個提供的函數后返回的結果
const oldArrMap=[3, 4, 7, 1, 8, 5];
let res2=oldArrMap.map((val, index)=> {
// 將匹配成功的值做對應的計算后再次返回
if (val > 5) {
val=val * 2;
}
return val;
});
console.log(res2); // [ 3, 4, 14, 1, 16, 5 ]
因為這些方法都是返回的新數組 并沒有覆蓋原來的數組所以可以繼續鏈式調用數組的方法繼續過濾
遍歷數組 方法對數組的每個元素執行一次提供的函數
const oldArrForEach=[3, 6, 8, 2, 8, 0];
let num=0;
oldArrForEach.forEach((val, index)=> {
num +=val;
});
console.log(num); // 27
oldArrForEach.forEach((val, index)=> {
if (index==2) return console.log(val); // 8
});
注意 需要在瀏覽器聲明callback去的函數 需要在script請求前聲明 兼容性強 只能發送get請求
網絡請求設計方法時 考慮到數據的操作主要：增刪改查 方法的命名可以體現這個操作 一般常用的就是get和post
每次請求 瀏覽器和服務器交互完畢后 彼此并沒有留下什么 繼續請求 也無法判斷你是誰 如登陸功能 為了能夠保存一些信息 服務器返回響應報文時 會偷偷的帶一個響應頭 作用是在瀏覽器中偷偷保存一些信息set-cookie 瀏覽器接收到這個響應頭后 會在本地保存這個響應頭 第二次請求時 瀏覽器就會自動帶上這個信息去服務器 服務器接收到這個信息 就知道你是誰了 ajax跨域請求 默認不攜帶cookie 需要設置 跨域cookie在瀏覽器中無法看到 需要抓包
Seesion 是將用戶數據存儲在服務器中 通過sessionId來驗證查找服務器中的用戶信息 sessionId一般是存放在瀏覽器的cookie中的
所以Session需要配合瀏覽器的cookie或者瀏覽器的其他存儲技術一起使用
和cookie差不多 也可以記錄登陸狀態 服務器生成的 通過用戶瀏覽器版本、用戶信息...生成的一個密鑰
瀏覽器不會自動保存 可以接口本地存儲來保存token 瀏覽器不會自動攜帶發送 每次請求接口時可以通過headers攜帶存儲的token headers{ Authorization ：token }
可以把數據存儲到本地(瀏覽器) 只要用戶不刪除 則會一直保存 每個域名都是獨立的保存數據 不同域名不能互相訪問 長久保存數據可以存儲到 localStorage 可以存儲5M數據
短暫存儲數據 可以多頁面傳值 相當于localStorage會更安全 瀏覽器關閉后就不會保存了 可以存儲5M數據
若有感興趣的小伙伴，需要VUE學習文檔思維導圖原圖的，關注我，私信回復獲取：VUE學習文檔思維導圖
作者：藍海00
轉載鏈接：https://www.jianshu.com/p/125ce0c89603
、MVVM簡介
如果你是第一次學前端，那么本節知識一定要了解，什么是MVVM。
MVVM是Model-View-ViewModel的簡寫。它本質上就是MVC 的改進版。MVVM 就是將其中的View 的狀態和行為抽象化，讓我們將視圖 UI 和業務邏輯分開。當然這些事 ViewModel 已經幫我們做了，它可以取出 Model 的數據同時幫忙處理 View 中由于需要展示內容而涉及的業務邏輯。MVVM的核心是ViewModel層，負責轉換Model中的數據對象來讓數據變得更容易管理和使用。是一種簡化用戶界面的事件驅動編程方式。
下邊我們來畫張圖來大體了解下MVVM的工作原理圖：
該層向上與視圖層進行雙向數據綁定
向下與Model層通過接口請求進行數據交互
（1）View
View是視圖層， 也就是用戶界面。前端主要由HTH L和csS來構建， 為了更方便地展現vi eu to del或者Hodel層的數據， 已經產生了各種各樣的前后端模板語言， 比如FreeMarker，Thyme leaf等等， 各大MV VM框架如Vue.js.Angular JS， EJS等也都有自己用來構建用戶界面的內置模板語言。
（2）Model
Model是指數據模型， 泛指后端進行的各種業務邏輯處理和數據操控， 主要圍繞數據庫系統展開。這里的難點主要在于需要和前端約定統一的接口規則
（3）ViewModel
ViewModel是由前端開發人員組織生成和維護的視圖數據層。在這一層， 前端開發者對從后端獲取的Model數據進行轉換處理， 做二次封裝， 以生成符合View層使用預期的視圖數據模型。
View Model所封裝出來的數據模型包括視圖的狀態和行為兩部分， 而Model層的數據模型是只包含狀態的
視圖狀態和行為都封裝在了View Model里。這樣的封裝使得View Model可以完整地去描述View層。由于實現了雙向綁定， View Model的內容會實時展現在View層， 這是激動人心的， 因為前端開發者再也不必低效又麻煩地通過操縱DOM去更新視圖。 MVVM框架已經把最臟最累的一塊做好了， 我們開發者只需要處理和維護View Model， 更新數據視圖就會自動得到相應更新，真正實現事件驅動編程。 View層展現的不是Model層的數據， 而是ViewModel的數據， 由ViewModel負責與Model層交互， 這就完全解耦了View層和Model層， 這個解耦是至關重要的， 它是前后端分離方案實施的重要一環。
2、為什么要使用MVVM
MVVM模式和MVC模式一樣，主要目的是分離視圖（View）和模型（Model），有幾大優點
（1） 低耦合。視圖（View）可以獨立于Model變化和修改，一個ViewModel可以綁定到不同的"View"上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。
（2） 可重用性。你可以把一些視圖邏輯放在一個ViewModel里面，讓很多view重用這段視圖邏輯。
（3）獨立開發。開發人員可以專注于業務邏輯和數據的開發（ViewModel），設計人員可以專注于頁面設計，使用Expression Blend可以很容易設計界面并生成xaml代碼。
（4）可測試。界面素來是比較難于測試的，測試可以針對ViewModel來寫
3、VUE概述
（1）什么是vue?
Vue是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合這是官網給出的介紹，可能不是那么容易理解。簡單來說，Vue是一個視圖層框架，幫助我們更好的構建應用。
使用Vue和原生JS一個最顯著的差別就是，Vue不再對DOM直接進行操作，而是通過對數據的操作，來改變頁面。使用Vue構建的頁面，是有一個個的組件組成的，當組件中定義的數據發生變化時，組件的顯示也會跟著變化，且此過程無需刷新頁面。
（2）MVVM模式的實現者
Model：模型層， 在這里表示JavaScript對象 View：視圖層， 在這里表示DOM(HTML操作的元素) ViewModel：連接視圖和數據的中間件， Vue.js就是MVVM中的View Model層的實現者 在MVVM架構中， 是不允許數據和視圖直接通信的， 只能通過ViewModel來通信， 而View Model就是定義了一個Observer觀察者
ViewModel能夠觀察到數據的變化， 并對視圖對應的內容進行更新 ViewModel能夠監聽到視圖的變化， 并能夠通知數據發生改變 至此， 我們就明白了， Vue.js就是一個MV VM的實現者， 他的核心就是實現了DOM監聽與數據綁定
（3）為什么要使用Vue
易用：熟悉HTML、CSS、JavaScript之后，可快速度上手vue。學習曲線平穩。
輕量級：Vue.js壓縮后有只有20多kb，超快虛擬DOM
高效：吸取了Angular(模塊化) 和React(虛擬DOＭ) 的優勢， 并擁有自己獨特的功能
開源：文檔齊全，社區活躍度高
4、VUE之Hello World!
步驟一：創建空文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>步驟二：引入vue.js (本人下載的開發版的vue.js，跟本html文件放在了同一目錄下，所以直接引用)
<script type="text/javascript" src="vue.js"></script>步驟三：創建vue實例
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
msg:'Hello World'
}
});
</script>步驟四：數據與頁面元素綁定
<div id="app">
{{msg}}
</div>完整的html
<!DOCTYPE html>
<html lang="en">
<body>
<div id="app">
{{msg}}
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
msg:'Hello World'
}
});
</script>
</body>
</html>瀏覽器打開：
參數分析：
el : '#app' -- 綁定元素的ID（元素的掛載位置，值可以是CSS選擇器或者是DOM元素）
data : { msg : 'Hello World' } -- 模型數據，屬性名：msg 值：Hello World
{{msg}} : 在綁定的元素中使用{{ }}將Vue創建的名為msg的屬性包起來， 即可實現數據綁定功能，我們在調試狀態下手動修改下msg的值，在不刷新頁面的情況下就會展示我們修改后的值，這就是借助了Vue的數據綁定功能實現的。 MV VM模式中要求View Model層就是使用觀察者模式來實現數據的監聽與綁定， 以做到數據與視圖的快速響應
下一篇：VUE入門教程（二）之模板語法（指令）
者: CHICAGO
轉發連接：https://juejin.im/post/5e475829f265da57444ab10f
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
