網(wǎng)站建設(shè)維護(hù)面試題營(yíng)銷方式有哪幾種
Vue
- 1、Vue 與其他框架的對(duì)比及特點(diǎn)
- 1.1 Vue.js 是什么
- 1.2 作者
- 1.3 作用
- 1.4 Vue 與其他框架的對(duì)比
- 2、安裝 Vue 的方法
- 2.1 CDN 引入
- 2.2 腳手架工具
- 2.3 vue 開(kāi)發(fā)者工具安裝
- 3、創(chuàng)建第一個(gè)實(shí)例
- 4、理解 Vue 的 MVVM 模式
- 5、數(shù)據(jù)雙向綁定
- 5.1 感受響應(yīng)式
- 實(shí)驗(yàn)總結(jié)
1、Vue 與其他框架的對(duì)比及特點(diǎn)
官網(wǎng)
中文：https://cn.vuejs.org/
英文：https://vuejs.org/
1.1 Vue.js 是什么
Vue (讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫(kù)結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用提供驅(qū)動(dòng)。<信息來(lái)源：Vue 官網(wǎng)>
1.2 作者
尤雨溪畢業(yè)于上海復(fù)旦附中，在美國(guó)完成大學(xué)學(xué)業(yè)，本科畢業(yè)于 Colgate University，后在 Parsons 設(shè)計(jì)學(xué)院獲得 Design & Technology 藝術(shù)碩士學(xué)位，任職于紐約 Google Creative Lab。<信息來(lái)源：百度百科>
1.3 作用
Vue.js 框架的作用主要注重動(dòng)態(tài)的構(gòu)建用戶界面，前端工程化和模塊化開(kāi)發(fā)。
1.4 Vue 與其他框架的對(duì)比
Vue 是一個(gè)推陳出新的前端框架，吸收了很多前端框架的優(yōu)點(diǎn)。例如，Vue 借鑒了 React 的組件化和虛擬 DOM ，借鑒了 Angular 的模塊化和數(shù)據(jù)綁定。因此，我們以 Vue.js 作為入手，以后深入學(xué)習(xí)其他框架，你會(huì)發(fā)現(xiàn)他們的共通之處，更好地高效地學(xué)習(xí)。
選擇 Vue.js 的更多原因是，就框架的 API 而言，對(duì)比之下，Vue 更加輕便簡(jiǎn)潔。Vue 自身?yè)碛虚_(kāi)箱即用的生態(tài)開(kāi)發(fā)包（Vuex、Vue-Router）等，復(fù)雜性低、學(xué)習(xí)成本低，是一門比較好入門的前端框架。
2、安裝 Vue 的方法
2.1 CDN 引入
不用下載到本地，即引即用,推薦 2 個(gè)較穩(wěn)定的 cdn，以下任選其一
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
由于非會(huì)員用戶無(wú)法訪問(wèn)外網(wǎng)，所以統(tǒng)一使用引用鏈接為
https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js。
2.2 腳手架工具
1、vue-cli 是基于 npm 的，所以應(yīng)該先安裝 node 環(huán)境，通過(guò) node 官網(wǎng)：http://nodejs.cn/ 下載系統(tǒng)對(duì)應(yīng)的 node 安裝程序。
注意： NPM 是隨同 Node.js 一起安裝的包管理工具。因此當(dāng)我們安裝好 Node.js 的時(shí)候，也安裝好了 NPM。
2、node 安裝完畢使用，npm 包管理工具安裝 vue-cli。
npm i -g @vue/cli-init
3、命令行輸入 vue，出現(xiàn) Usage 表示安裝成功。
4、使用 vue create 命令來(lái)創(chuàng)建一個(gè) Vue 項(xiàng)目。
vue create first-vue # 這里的 first-vue 項(xiàng)目名
5、完成配置后，使用以下命令將 Vue 項(xiàng)目運(yùn)行起來(lái)。
cd first-vue
npm run serve
6、成功執(zhí)行命令行后，我們打開(kāi)右側(cè)的 Web 服務(wù)，即可訪問(wèn)項(xiàng)目的頁(yè)面。
2.3 vue 開(kāi)發(fā)者工具安裝
注意： 由于線上環(huán)境使用的是 Preview 或 Mini Browser 是一個(gè)輕量級(jí)的瀏覽器，不支持插件安裝，如需安裝，請(qǐng)?jiān)谧约旱碾娔X上對(duì)應(yīng)安裝。
在使用 Vue 時(shí)，推薦在你的瀏覽器上安裝 Vue Devtools。它允許你在一個(gè)更友好的界面中審查和調(diào)試 Vue 應(yīng)用。
1、下載對(duì)應(yīng)瀏覽器的 Vue Devtools。
- Get the Chrome Extension / (beta channel)
- Get the Firefox Addon / (beta channel)
- Get standalone Electron app (works with any environment!)
2、打開(kāi)瀏覽器，打開(kāi)設(shè)置>開(kāi)發(fā)工具>擴(kuò)展程序，將下載好的 Vue Devtools 拖到界面中，即可完成安裝(谷歌瀏覽器為例)。
3、你就可以在瀏覽器中輕松調(diào)試你的 vue 應(yīng)用。
3、創(chuàng)建第一個(gè)實(shí)例
每個(gè) Vue 應(yīng)用都是通過(guò)用 Vue 函數(shù)創(chuàng)建一個(gè)新的 Vue 實(shí)例 開(kāi)始的：
var app = new Vue({// 選項(xiàng)
});
Vue.js 的核心是一個(gè)允許采用簡(jiǎn)潔的模板語(yǔ)法來(lái)聲明式地將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)，我們新建一個(gè) .html 后綴的文件，輸入以下代碼，運(yùn)行（右擊文件 > open with > Preview 或 Mini Browser），你就會(huì)看到 {{msg}} 被渲染成 hello。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>syl-vue-test</title><!--引入 vue.js--><script src="vue.min.js"></script></head><body><div id="app">{{msg}}</div><script>var app = new Vue({el: "#app", // dom 掛載點(diǎn)data: {// 數(shù)據(jù)項(xiàng)msg: "hello syl",},});</script></body>
</html>
說(shuō)明： el 為實(shí)例掛載點(diǎn)，上面表示掛載在 id 為 app 的 dom 元素中。data 選項(xiàng)為數(shù)據(jù)選項(xiàng)，存放綁定數(shù)據(jù)。除了這兩個(gè)之外還有實(shí)例選項(xiàng)，methods（實(shí)例方法）、computed（計(jì)算屬性） 等
4、理解 Vue 的 MVVM 模式
- M：Model 即數(shù)據(jù)邏輯處理。
- V：View 即視圖（用戶界面）。
- VM：ViewModel 即數(shù)據(jù)視圖，用于監(jiān)聽(tīng)更新，View 與 Model 數(shù)據(jù)的雙向綁定。
所以，Vue 一大特點(diǎn)就是數(shù)據(jù)雙向綁定，另一大特點(diǎn)就是響應(yīng)式，接下來(lái)，我們來(lái)看看它的魅力。
5、數(shù)據(jù)雙向綁定
在 Vue 中數(shù)據(jù)雙向綁定隨處可見(jiàn)，最常見(jiàn)的是表單數(shù)據(jù)中的雙向綁定，例如：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>syl-vue</title><!--引入 vue.js--><script src="vue.min.js"></script></head><body><!-- 數(shù)據(jù)雙向綁定 --><div id="app"><input type="text" v-model="msg" /><p>{{msg}}</p></div><script>var app = new Vue({el: "#app", // el: 掛載點(diǎn)data: {// data:數(shù)據(jù)選項(xiàng)msg: "hello",},});</script></body>
</html>
在我們對(duì)文本框輸入值時(shí)，實(shí)例 data 中的 msg 值也隨之變化。運(yùn)行效果：
5.1 感受響應(yīng)式
上面我們了解到 Vue 是一個(gè) MVVM 架構(gòu)的框架，成功創(chuàng)建了一個(gè) Vue 應(yīng)用！看起來(lái)這跟渲染一個(gè)字符串模板非常類似，但是 Vue 在背后做了大量工作。現(xiàn)在數(shù)據(jù)和 DOM 已經(jīng)被建立了關(guān)聯(lián)，所有東西都是 響應(yīng)式的。我們可以看看他是不是響應(yīng)式的，打開(kāi)你的瀏覽器的 JavaScript 控制臺(tái) (就在這個(gè)頁(yè)面打開(kāi))，并修改 app.msg 的值，你將看到上例相應(yīng)地更新，更改數(shù)據(jù)也觸發(fā)視圖的相應(yīng)更新。
實(shí)驗(yàn)總結(jié)
- Vue 與其他框架的對(duì)比及特點(diǎn)
- 安裝 Vue 的方法
- node 的安裝
- vue-cli 的安裝
- Vue 開(kāi)發(fā)者工具的安裝
- Vue 創(chuàng)建實(shí)例
- Vue 數(shù)據(jù)的雙向綁定及響應(yīng)式