(一)爲什麼要使用Vue?
1-Vue.js 是一套構建用戶界面的前端框架技術。
2-Vue只關注視圖(頁面)層的開發,文檔非常豐富、易於上手,流行度高,擁抱經典的web技術、早起靈感來源於angular。
3-vue.js兼具angular.js和react.js的優點,並剔除了它們的缺點。
4-與Vue有關聯的話題 漸進式、組件、路由、webpack、loader、babel、vue-cli、響應式、VirtualDOM(虛擬DOM)、NPM、SPA、ES6、單文件組件、雙向數據綁定等。
5-vue是前端的主流框架之一,和Angular、React 一起,併成爲前端三大主流框架!
(二)獲得Vue
網站:
https://cn.vuejs.org 官方地址(服務器在外國,訪問速度慢)
https://vue.docschina.org/ 官方地址鏡像(服務器在中國,訪問速度快)
1) 直接下載
2)直接在html文件中來引入vue.js文件。
(三)簡單使用
步驟:
1.引入vue
<script src="./vue-2.6.10.js"></script>
2.創建vue渲染容器
<div id="app">
<h2>{{ msg }}</h2>
</div>
3.創建vue實例對象
<script>
let vm = new Vue({
el: '#app',
data: {
msg: '我叫404路西法-肖米'
}
})
</script>
(四)MVVM
M:model 數據操作部分 (vue的data部分)
v:view 視圖展示部分 (div容器部分)
vm: view & model 視圖和數據的關聯部分 (el和data通過實例化new Vue關聯)
---下一篇講解Vue指令的使用---
指令 (Directives) 是帶有 v- 前綴的html標籤的特殊屬性。
指令屬性值應該是一個單獨的javascript表達式(V-for除外)。
指令的工作是在其表達式的值發生變化時,將其產生的連帶影響,響應式地作用於 DOM。