Vue入門指南-01建立vue實例 (快速上手vue)

該篇文章的講解能可以帶你快速入門vue,儘量多的講解vue中的各個知識點,讓你可以快速上手使用vue發開你的第
一個項目, 固然已經學習使用了vue的同窗能夠查漏補缺,看看那些是本身學習但長時間不用已經忘記的
複製代碼

爲何要學習vue

經過學習Vue提供的指令, 很方便的就能把數據渲染到頁面上, 不在須要手動操做DOM元素, 前端的Vue之類的框架, 不提倡手動操做DOM元素。

什麼是MVVM模式

MVVM 是Model-View-ViewModel 的縮寫，它是一種基於前端開發的架構模式，其核心是提供對View 和 ViewModel 的雙向數據綁定，這使得ViewModel 的狀態改變能夠自動傳遞給 View，即所謂的數據雙向綁定。

其中 M 層 是vue中的data, V層是el綁定的HTML元素, VM是new實例的vue
複製代碼

第一章 - 導入 vue 建立一個VM 實例, 傳入配置對象, 瞭解配置對象中的各個屬性

咱們在頁面中經過script標籤引入咱們須要的vue

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  {{ message }}  // 經過差值表達式的方式將數據渲染到頁面
</div>
var VM = new Vue({
  el: '#app', // 表示當咱們new的這個Vue實例, 要控制頁面上的那個區域
  data: { // data屬性中，存放的是el中要用到的數據,這裏的data就是MVVM中的M專門用來保存每一個頁面的數據
    message: 'Hello Vue!'
  },
  methods : {}, // 這個methods屬性中定義了當前Vue實例全部可用的方法,主要寫業務邏輯
  computed: {}, // 在computed中,能夠定一些屬性, 這些屬性叫作計算屬性,計算屬性的本質就是一個方法,只不過咱們在使用這些計算屬性的時候是吧它們的名稱直接當作屬性來使用的,並不會把計算屬性當作方法去調用
  filters : {}, // 這個filters屬性中定義了當前Vue實例中全部可用的過濾的方法 
  watch: {}, // 使用這個屬性,能夠監聽data中數據的變化,而後觸發這個watch中對應的function處理函數
  router, // 掛載路由對象
  directives：{}, // 這個directives屬性定義了當前Vue實例中全部可用的自定義指令
  beforeCreate () {}, // 生命週期函數: 表示實例徹底被建立以前,會執行這個函數
  created () {}, // 生命週期函數: 表示實例被建立以後
  beforeMounted () {}, // 生命週期函數: 表示模板已經編譯完成,可是尚未把模板渲染到頁面中
  mounted () {}, // 生命週期函數:表示模板已經編譯完成,內存中的模板已經真實的渲染到了頁面中去,已經能夠看到渲染好的頁面了
  beforeUpdate () {}, // 生命週期函數: 表示當前界面尚未被更新,數據確定被更新了
  update () {}, // 生命週期函數: 表示當前頁面和數據保持同步了,都是最新的
  beforeDestroy () {}, // 生命週期函數: 表示Vue實例已經從運行階段進入到銷燬階段
  destroyed () {} // 生命週期函數: 表示組件已經徹底被銷燬了
})
複製代碼

Vue入門指南(快速上手vue)