該篇文章的講解能能夠帶你快速入門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 () {} // 生命週期函式: 表示元件已經完全被銷燬了
})
複製程式碼