Vue是一套構建用戶界面的框架，只關注視圖層，它不僅易于上手，還便于與第三方庫或既有項目整合。（Vue有配套的第三方類庫，可以整合起來做大型項目的開發）

MVC 與MVVM的區別

• MVC 是后端的分層開發概念；
• MVVM是前端視圖層的概念，主要關注于 視圖層分離。MVVM把前端的視圖層分為了 三部分 ：Model, View , VM ViewModel

一、Vue基本代碼結構

const vm = new Vue({el:'#app',//所有的掛載元素會被 Vue 生成的 DOM 替換data:{ // this->window },methods:{ // this->vm},//注意，不應該使用箭頭函數來定義 method 函數 ,this將不再指向vm實例props:{} ,// 可以是數組或對象類型，用于接收來自父組件的數據//對象允許配置高級選項，如類型檢測、自定義驗證和設置默認值watch:{ // this->vm},computed:{},render(){},// 聲明周期鉤子函數... })

當一個 Vue 實例被創建時，它將 data 對象中的所有的 property 加入到 Vue 的響應式系統中。當這些 property 的值發生改變時，視圖將會產生“響應”，即匹配更新為新的值。
例外：Vue實例外部新增的屬性改變時不會更新視圖。
Object.freeze()，會阻止修改現有的 property，響應系統無法追蹤其變化。

實例屬性和方法

訪問el屬性：vm.$el , document.getElemnetById(‘app’);

訪問data屬性：vm.$data
以 _ 或 $ 開頭的 property 不會被 Vue 實例代理，因為它們可能和 Vue 內置的 property、API 方法沖突。你可以使用例如 vm.$data._property 的方式訪問這些 property。

訪問data中定義的變量 ： vm.a , vm.$data.a

訪問methods中的方法：vm.方法名()

訪問watch方法：vm.$watch()

不要在選項 property 或回調上使用箭頭函數,this將不會指向Vue實例

比如created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。
因為箭頭函數并沒有 this，this 會作為變量一直向上級詞法作用域查找，直至找到為止，經常導致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之類的錯誤。

二、Vue指令

插入數據：

插值表達式相當于占位符，不會清空元素中的其他內容。直接寫在標簽中。會將html標簽作為文本顯示。

v-text會覆蓋元素中原本的內容。寫在開始標簽中，以屬性的形式存在。會將html標簽作為文本顯示。

v-html （innerHTML）會覆蓋元素中原本的內容，會將數據解析成html標簽。

三、動畫

3.1使用過渡類名實現動畫

過渡類名：

v-enter（剛開始進入的點） v-enter-active v-enter-to (結束點) v-leave v-leave-active v-leave-to

過渡類名只需要設置樣式，不需要使用

將需要設置動畫效果的元素，寫在 標簽中

3.2通過 v-前綴 實現動畫

實現多種類型的動畫: 在transition比標簽中設置name屬性，使用 name值 替換v 來實現

使用 my-enter my-enter-active my-enter-to my-leave my-leave-active my-leave-to 作為類名來設置樣式。

3.3使用第三方animate.css實現動畫

引入animate.css文件

在transition開始標簽中寫類名,animated 寫在transition開始標簽中，或有動畫效果的dom元素上

<transition enter-active-class='bounceIn animated' leave-active-class = 'bounceOut animated' ><h3 v-show='flag' class='animated'>這是一個h3標簽</h3> </transition>

使用 duration 來設置 入場和離場的時間
同時設置 :duration="500" 分別設置 :duration="{enter:400,leave:1000}"

四、Vue生命周期

五、Vue組件

組件配置對象 和 vue實例的區別

• 組件配置對象沒有el，組件模板定義在template中；
• 組件配置對象中data是函數，該函數返回的對象作為數據。

創建組件模板

• 方法一

var com = Vue.extend({//通過template屬性 指定組件要展示的html結構template:'<h3>這是使用Vue.extend搭建的全局組件</h3>' })

• 方法二：使用對象創建模板

{template:'<h3>這是使用Vue.extend搭建的全局組件-com3</h3>' }

• 方法三：使用 template標簽（寫在受控區域外面） 創建模板，通過id建立聯系

<template id="tmpl"> 寫在受控區域外面...... </template> { template:'#tmpl' }

組件中的data是一個函數的原因

• 多次使用該組件，如果修改其中一個中的數據，另一個也會改變。
• 寫成函數的形式，每次調用函數，返回一個新的對象

ref屬性

• 獲取dom元素/組件：標簽上添加ref屬性， this.$refs.ref屬性值 獲取該dom元素/組件。
• this.$refs.ref屬性值 .變量名 獲取組件中的數據
• this.$refs.ref屬性值 .方法名() 獲取組件中的方法

$parent 和 $children 獲取 父/子組件的數據和方法

• this.$parent獲取父組件
• $children 由于子組件的個數不確定 返回的是一個數組 ,不是對象
• this.$children[0] 獲取第一個子組件

作用域插槽：父組件替換插槽的標簽，內容由子組件決定。

編譯的作用域：自身的數據在自身模板template標簽中生效

插槽上添加 屬性綁定 ：data=’子組件中的數據’

父組件通過template 標簽，添加 slot-scope=’slot’ slot-scope屬性接收子組件中的數據（slot.data）

template 標簽中的html結構替換 slot 插槽中的默認html結構。

六、路由 Vue Router

安裝路由： script標簽直接引入 / npm 手動安裝

創建路由對象 ，通過 routers 屬性來定義路由匹配規則

var routerObj = new VueRouter({routes:[ 3. 路由匹配規則 //path-監聽的路由地址； component 中存放的login不是組件名稱,而是組件的模板對象{ path:'/login',component:login }, // component不加s，路由的命名視圖+s ] })

在vm實例上注冊router 屬性（與methods 同級）
router:routerObj

通過路由展示對應的組件。使用 router-link 組件來導航（路由跳轉，聲明式導航），router-view 組件來顯示匹配到的組件。

<router-link to='/login'>登錄</router-link> <router-link to='/register'>注冊</router-link> <!-- 展示哪個組件 --> <router-view></router-view>

router-link默認會被渲染成a標簽，tag屬性會把router-link渲染成其他標簽

redirect重定向：{ path:’/’,redirect:’/login’}, 重定向到login頁面

• this.$router -> VueRouter ; 新建的路由實例對象 this.$route-> Object

• 方法中使用 this.$route data中直接使用$route

• 組件中的this指向VueComponent對象; vm實例中this指向Vue對象

七、Vue-CLI 腳手架-搭建項目開發環境

創建項目

• vue-cli3
  創建項目：vue create 項目名稱
  運行：npm run serve
  項目結構：

node_modules文件件 — 項目依賴文件 public文件夾 — index.html ,logo src文件夾 — 靜態資源 項目源碼assets — 靜態資源文件，需要打包components — 組件，一般是公共組件router — 路由配置store — vuexviews — 展示的頁面app.vue — 項目中最大的組件mian.js — 項目入口文件 static文件夾 — 允許外界訪問的資源文件 不會被打包 .gitignore — git 項目管理時忽略的文件 babel.config.js — js語法轉換的配置文件 package.json — 項目記錄文件，依賴文件 package-lock.json — package.json文件中 版本相關的記錄

• vue-cli2
  拉取 vue2.x 的模板，安裝: cnpm install -g @vue/cli-init
  vue-cli2創建項目：vue init webpack 項目名稱
  運行：npm run dev
  vue-cli2項目結構:

build文件夾 — 與webpack打包相關的配置 config文件夾 — 項目全局配置 node_modules文件件 — 項目依賴文件 public文件夾 — index.html ,logo src文件夾 — 項目源碼assets — 靜態資源文件（css，js…），需要打包components — 組件，一般是公共組件router — 路由views — 展示的頁面和私有組件app.vue — 項目中最大的組件mian.js — 項目入口文件 static文件夾 — 允許外界訪問的資源文件 不需要打包 babelrc — js語法轉換的配置文件 .editorconfig — 編輯相關配置 .gitignore — git 項目管理，打包時忽略的文件 .postcssrc.js — css index.html — 項目中唯一的html文件 package.json — 項目記錄文件，依賴文件 package-lock.json — package.json文件中 版本相關的記錄

使用render渲染組件

render屬性與methods屬性同級

render:function(createElement){ // 處理方法的參數 createElement 是一個方法return createElement(login);//調用createElement(login)將 指定組件模板渲染為html結構 // login-組件的模板對象 ，不是組件名稱//return 返回的結果,會替換el指定的容器 // component 是插入到 id='app'的標簽內 }

八、Vuex

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式

vuex使用：

安裝：npm i vuex -S
引入：import Vuex from ‘vuex’
手動安裝：Vue.use(Vuex)
在 src下新建 store文件夾，在index.js中 創建store對象

基本代碼結構： const store = new Vuex.Store({state：{ 共享的數據 }mutations:{ //只接收同步方法}actions:{ //存放異步方法}getters:{ // 相當于state的計算屬性 }module:{//模塊：每個模塊擁有自己的state、mutations、actions、getters等} })

export default store // 導出store對象
main.js中引入store，在vm實例中注冊store
獲取state中的數據，在頁面中應用 ： {{$store.state.city}} // $store獲取 store對象

Mutation

更改 Vuex 的 store 中的(數據)狀態的唯一方法是提交 mutation.
直接修改state中 的數據，頁面不會重新渲染

this.$store.commit('addstu',stu); 提交給mutation mutations:{ //修改state中的數據事件類型：回調函數addstu(state,stu){ // state 默認參數state.students.push(stu); }

• 對象類型的載荷（參數）

this.$store.commit( 'incrementCount',{count：0 });this.$store.commit({type:'incrementCount',count});

Action

異步方法處理：

this.$store.dispatch('changeInfo'[,實參]); //提交到actions 中(調用actions方法) actions:{ changeInfo(context，形參){ context.commit('aChangeInfo');//提交到mutations 中 } }

context是和store對象具有相同方法和屬性的對象,可以通過context去進行commit相關的操作, 也可以獲取context.state等

在Action中, 我們可以將異步操作放在一個Promise中, 并且在成功或者失敗后, 調用對應的resolve或reject.

Getter

• 獲取getters中的返回值，顯示到頁面中：{{ $store.getters.方法名}}
• getters可以作為參數
• getters傳遞參數：
  getters默認是不能傳遞參數的, 如果希望傳遞參數, 那么只能讓getters本身返回另一個函數.

Vue.js基礎篇到此結束，若發現有誤之處請及時聯系并指出，謝謝！

總結

以上是生活随笔為你收集整理的Vue知识点梳理（思维导图版）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。