Vue-簡單使用(起步)

(一)爲什麼要使用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。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章