vue.js 學習筆記

時間 2019-11-06

原文原文鏈接

vue.js 學習筆記

前言

好！html

MVVM 和 MVC 架構

MVVM：M 是模型（數據），V是視圖（界面），VM是V和M的雙向協調者。
MVC：M 是模型，V是視圖，C是控制器（業務）

vue使用了MVVM架構來設計框架。架構是說邏輯分層，框架是指具體的實現。很明顯VM的實現是這個框架的核心，也是最複雜的地方。從更大範圍上看，vue專一界面的實現，也就是MVC中的V層。所以，vue只是一個局部框架，傳統MVC中的模型和業務不是vue的範疇，須要自行設計。前端

Vue 對象

vm層：
el: 控制的區域
methods:{} 可用方法
watch:{} 監聽數據改變
router: 監聽路徑，實現頁面內路由
computed: 計算屬性。它監聽相關數據並求值
render: 渲染替換區域vue

Model層：
data:{} 數據
props:[] 標籤屬性。用於獲取標籤屬性值（只讀）node

view層：webpack

{{ }} 插值表達式，不提倡直接操控DOM
v-html 插html
v-text 插純文本
v-cloak 防閃爍
v-bind: 綁定屬性，縮寫:
v-model 表單雙向數據綁定
v-on: 綁定事件,縮寫@
- .stop 中止事件冒泡
- .prevent 禁止默認行爲
- .capture 捕獲內層事件
- .self 只觸發自身事件
- .once 只觸發一次事件
v-for 循環渲染，如v-for="item in xxx"
- 需用:key保序，保證項對應關係
v-if 控制是否顯示（建立或移除html實體）
v-show 用樣式控制顯示

## 樣式ios

html class 樣式，能夠經過{typeClassName:bool,...}的對象來引用對應名稱的樣式表進行綁定。web

html style 內聯樣式經過{styleName:value,...}綁定。vue-router

過濾器

過濾器提供了文本格式化的功能，可用在插值表達式和v-bind：表達式內。vuex

vm層：

//全局過濾器
Vue.filter("filterName",function (msg){})//filterName是過濾器的名字，msg是默認傳過來的字符串，也可添加其餘參數。

//局部過濾器，定義在new Vue對象內
filters:{
    filterName：function(msg){}
}

View層：
{{ str | filterName}} 過濾器filterName對str進行處理。

鍵值修飾符

用於擴展鍵盤事件，可經過Vue.config.keyCodes自定義。

.enter 回車
.tab 製表符
.delete 刪除
.esc esc鍵
.sapce 空格
.up 上
.down 下
.left 左
.right 右

自定義指令

自定義指令對象包含如下鉤子函數（可選）：

bind: 初始化
- el 綁定函數的第一個參數，表示綁定的元素
- binding 對象包含如下屬性：
  - name 指令名
  - value 綁定的值
  - oldValue 前一個值
  - expression 字符串值
  - arg 指令參數，如direct:arg的arg
  - modifiers 修飾符，如direct.mm.gg的mm和gg
- vnode 虛擬節點
- oldVnode 上一個虛擬節點
inserted: 插入父節點時（插入DOM中）
update: VNode更新時
componentUpdated: VNode和子節點全體更新時
unbind: 解綁時

//全局自定義指令directName
Vue.directive('directName',{
    bind:function(el){},
    inserted:function(el){},
    update:function(el){}
    })

//局部自定義指令,在new Vue對象內定義
driectives:{
    bind:function(el,binding,vnode,oldVnode){}
}

組件

定義UI模塊。

全局組件

寫法一

var comp= Vue.extend({template:`<h3>標題組件</h3>`})//定義html結構

Vue.component('myComp', comp)//註冊組件my-comp

寫法二

這種書寫方式能夠有編輯器提供的語法提示。

Vue.component('myComp2',{template:'#tmp1'})

<template id="tmp1">
    <h3>標題組件2</h3>
</template>

局部組件

定義在Vue實例內:

components:{
    comp3:{
        template:'#temp2'
    }
}

組件數據

定義方式：

Vue.component('comp4',{
    template:'<h3>{{msg}}</h3>',
    data:function(){
        return {
            msg:'標題數據'
        }
})

動態展現組件

<!-- 根據:is的值展現對應組件 -->
<component :is="'comp4'"></component>

傳遞數據到組件

props:[] 標籤屬性傳值
$emint() 標籤事件傳值

路由

前端路由經過網址後的#（錨點）來實現，該網址不會從新訪問後端服務器。路由實現跳轉功能。

自動安裝

經過<script>標籤添加vue-router.js引用。

手動安裝

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

路由匹配規則

var router = new VueRouter({
    //路由表
    routers:[
        //path 定義#號後的字符串
        //component 定義跳轉的目標組件
        //redirect 定義跳轉到另外一個路徑
        {path:'/', redirect: '/home'},
        {path:'/home', component: home},
        {path:'/user', component: user}
    ]
})

<!-- 路由匹配的組件展現在下面標籤的佔位上 -->
<router-view></router-view>

<!-- 經過錨點改變路由 -->
<a href="#/home">簡介</a>
<!-- 經過router-link標籤改變路由 -->
<router-link to="/user">客戶</router-link>

傳遞參數

//訪問路由路徑的參數，如#/home?id=3 (/home)
$route.query.id //3

//路由匹配帶參數，如#/home/3 (/home/:id)
$route.params.id //3

子路徑

//定義路由路徑時，增長children定義子路徑
{path:'/home',component:home,
children:[
    {path:'n1', component: n1}
]}

命名視圖

//定義路由路徑時，修改跳轉目標爲命名視圖
{path:'/home',components:{
    default:head,
    left:left,
    right:right
}}

<!-- 指定視圖名稱 -->
<router-view></router-view>
<router-view name="left"></router-view>
<router-view name="right"></router-view>

DOM操做

$refs 在Vue實例中，保存了被ref指令標識的DOM屬性值。

Vue實例的生命週期

初始化階段

new Vue()
初始化 Events、生命週期管理
beforeCreate()
初始化 data、methods
created()
根據el綁定編譯模板
beforeMount()
替換頁面中對應的元素
mounted()

運行階段

數據改變
beforeUpdate()
更新頁面數據
updated()

釋放階段

對象釋放程序執行
beforeDestroy()
釋放事件監聽器等
destroyed()

網絡請求 get、post、jsonp

可用vue-resource包或axios包。

動畫

用<transition></transition>標籤和css實現動畫。

全場動畫

.v-enter-active 進入漸變過程
1. .v-enter 開始進入狀態
2. .v-enter-to 完結進入狀態
v-leave-active 離開漸變過程
1. v-leave 開始離開狀態
2. v-leave-to 完結離開狀態

第三方庫：animate.css

半場動畫

經過事件實現。

@before-enter 進入前
@enter 進入
@after-enter 進入後

組動畫

用<transition-group tag=「ul」> 標籤實現列表動畫。

工具

nrm 鏡像地址選擇工具

npm i nrm -g #安裝nrm到全局包緩存
nrm ls #列出可用地址
nrm use cnpm #使用cnpm鏡像地址

webpack 前端自動化構建工具。
Gulp 基於任務來構建。
mint-ui 移動端界面組件庫。
mui 界面的代碼片斷
bootstrap 界面代碼片斷
vuex 共享組件數據

state:{} 存儲數據 this.$store.state.***
mutations:{} 修改數據的方法this.$store.commit("方法名稱", arg)
getters:{} 獲取包裝後的數據this.$store.getters.***

vscode 插件

Vetur
Vue 2 Snippets

自動構建

webpack-dev-server 監聽項目變化，配置和運行webpack的工具
html-webpack-plugin 內存中生成html的插件
style-loader css加載器
css-loader css加載器
less-loader less加載器
sass-loader scss加載器
url-loader url加載器
file-loader 文件加載器
babel 高級語法轉低級語法
vue-loader .vue文件加載器