2020-03-28 07:23:00 來源: 閱讀:-
Vue (讀音 /vju?/,類似于 view) 是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是,Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層,不僅易于上手,還便于與第三方庫或既有項目整合。另一方面,當與現代化的工具鏈以及各種支持類庫結合使用時,Vue 也完全能夠為復雜的單頁應用提供驅動。
前端框架三巨頭:Vue.js、React.js、AngularJS,vue.js以期輕量易用著稱,vue.js和React.js發展速度最快,AngularJS還是老大。
官網:https://cn.vuejs.org/
參考:https://cn.vuejs.org/v2/guide/
Git地址:https://github.com/vuejs
前面說過,NPM是Node提供的模塊管理工具,可以非常方便的下載安裝很多前端框架,包括Jquery、AngularJS、VueJs都有。為了后面學習方便,我們先安裝node及NPM工具。
2.1.下載Node.js
下載地址:https://nodejs.org/en/download/
推薦下載LTS版本。
課程中采用的是12.0版本。目前最新的是8.11.1。大家自行下載。然后下一步安裝即可。
完成以后,在控制臺輸入:node -v
2.2.NPM
安裝完成Node應該自帶了NPM了,在控制臺輸入npm -v查看:
像的工具:nrm
我們首先安裝nrm,這里-g代表全局安裝
npm install nrm -g
然后通過nrm test npm來測試速度:
通過nrm use taobao來指定要使用的鏡像源:
注意:
接下來,我們快速領略下vue的魅力
3.1.創建工程
創建一個新的工程:
選擇一個空的工程。
然后新建一個module:選中static web,靜態web項目:
3.2.安裝vue
先輸入:npm init -y 進行初始化
安裝Vue,輸入命令:npm install vue --save
創建html 引入vue
3.3.2.vue渲染
然后我們通過Vue進行渲染:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="node_modules/vue/dist/vue.js"></script>
<div id = "app">
<h1>
{{name}} 很帥!
</h1>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
name:"虎哥",
}
})
</script>
</body>
</html>