1.認識Vue
Vue (讀音 /vjuː/，類似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。
前端框架三巨頭：Vue.js、React.js、AngularJS，vue.js以期輕量易用著稱，vue.js和React.js發展速度最快，AngularJS還是老大。
參考：https://cn.vuejs.org/v2/guide/
作者
尤雨溪，Vue.js 創作者，Vue Technology創始人，致力於Vue的研究開發。
2.Node和NPM
NPM是Node提供的模塊管理工具，可以非常方便的下載安裝很多前端框架，包括Jquery、AngularJS、VueJs都有。為了后面學習方便，我們先安裝node及NPM工具。
2.1.下載Node.js
下載地址：https://nodejs.org/en/download/
推薦下載LTS版本，LTS是延長支持版本。具體看喜歡。
下載完成之后，直接安裝，你是什么系統，就選擇對應系統版本的node.js軟件即可
安裝完成之后，在CMD命令上打
node -v
如果能看到版本信息，則表示node 安裝成功！
2.2.NPM
安裝完成Node應該自帶了NPM了，在控制台輸入npm -v查看：
npm默認的倉庫地址是在國外網站，速度較慢，建議大家設置到淘寶鏡像。但是切換鏡像是比較麻煩的。推薦一款切換鏡像的工具：nrm
我們首先安裝nrm，這里-g代表全局安裝
npm install nrm -g
問題：
如果過裝不上nrm
就可能是源的問題，就先設置npm的源
npm config set registry https://registry.npm.taobao.org
之后充值安裝npm
npm install npm -g
解決方法：
找到目標所在路徑的js
將
const NRMRC = path.join(process.env.HOME, '.nrmrc');
修改成
const NRMRC = path.join(process.env.USERPROFILE, '.nrmrc');
npm config set registry https://registry.npm.taobao.org 等價於 nrm use taobao
然后通過nrm ls命令查看npm的倉庫列表,帶*的就是當前選中的鏡像倉庫：
通過nrm use taobao來指定要使用的鏡像源：
然后通過nrm test npm 來測試速度：
3.快速入門
使用方式兩種
- 下載好vuejs，然后引入
- 使用npm 初始話，直接生成js，然后引入
也可以直接使用公共的CDN服務：
<!-- 開發環境版本，包含了用幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者：
<!-- 生產環境版本，優化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
初始化方式
CMD進入到項目路徑
npm init -y 進行初始化
初始化，之后會多出一個package.json文件
安裝Vue，輸入命令：npm install vue --save
發現一個node_modules目錄，並且在下面有一個vue目錄。
目錄結構
- dist 編譯之后的文件
- src 源碼
node_modules是通過npm安裝的所有模塊的默認位置。
3.3.vue入門案例
3.3.1.編寫一個HTML 並通過Vue進行渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="vue-test">
<h1>你好，{{name}}</h1> // {{name}}插值表達式 <span v-text="name"></span>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
//生成一個vue實例
var test_vue = new Vue({
el:"#vue-test", //el 表示element縮寫，就是需要渲染的元素id
data:{
name:"caicai"
}
})
</script>
</body>
</html>
-
首先通過 new Vue()來創建Vue實例
-
然后構造函數接收一個對象，對象中有一些屬性：
- el：是element的縮寫，通過id選中要渲染的頁面元素，本例中是一個div
- data：數據，數據是一個對象，里面有很多屬性，都可以渲染到視圖中
- name：這里我們指定了一個name屬性
-
頁面中的
h1元素中，我們通過{{name}}的方式，來渲染剛剛定義的name屬性。 -
當你修改name屬性時，頁面會跟着變化
3.3.2.雙向綁定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="vue-test">
<input type="text" v-model="number"/>
<h1>你好，{{number}}
</h1>
有{{number}} 來過這里，留下足跡！
<hr>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
//生成一個vue實例
var test_vue = new Vue({
el:"#vue-test", //el 表示element縮寫，就是需要渲染的元素id
data:{ //數據
name:"caicai",
number:1,
}
})
</script>
</body>
</html>
-
我們在data添加了新的屬性：
number -
在頁面中有一個
input元素，通過v-model與number進行綁定。 -
同時通過
{{number}}在頁面輸出
可以觀察到，輸入框的變化引起了data中的number的變化，同時頁面輸出也跟着變化。
- input與number綁定，input的value值變化，影響到了data中的number值
- 頁面
{{number}}與數據number綁定，因此number值變化，引起了頁面效果變化。
沒有任何dom操作，這就是雙向綁定的魅力。
3.3.3.事件處理
我們在頁面添加一個按鈕：
<button v-on:click="number++">點我</button> //v-on:click 可以寫成@click簡寫 click內容可以寫js語法
- 這里用
v-on指令綁定點擊事件，而不是普通的onclick，然后直接操作number - 普通click是無法直接操作number的。