Vue 學習文檔

時間 2019-11-11

標籤 vue 學習文檔简体版

原文原文鏈接

Vue 學習文檔

vue 起步

引包
啓動 new Vue(options)
options:

el 目的地(能夠用類名、標籤名等，也能夠直接用mod元素)
- #elementId
- .elementClass
- div
- document.getElementById('elementId')
template 內容
data 數據

vue 基礎語法

vue 指令

v-if 是否插入元素
v-show 是否隱藏元素
v-bind 給元素屬性賦值，單向數據綁定
- 簡寫：:{屬性名}={屬性值}
v-model 在表單控件或者組件上建立雙向綁定
v-on 綁定事件
- 簡寫: @{事件名}={表達式/方法名}
- 傳參直接在方法名後追加(參數)
- 同時獲取參數和event對象 v-on:click="warn('參數', $event)"

v-for 遍歷

循環數組 (item, index)

循環對象 (val, key, index)javascript

<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>

vue 組件化

使用步驟：
- 編寫子組件
- 聲明子組件
- 使用子組件

父組件向子組件傳遞數據

父組件用v-bind傳遞，子組件必須props裏先聲明
props能夠設置默認值

props能夠指定數據類型(String/Number/Boolean/Array/Object/Date/Symbol/Function)html

const MyHeader = {
    template: `<h1>我是頭部</h1>`
}
const MyBody = {
    template: `<h1>我是中部 {{index}}</h1>`,
    //props: ['index'],
    props: {
    items: {  // 必須提供字段
        type: String, //指定類型
        required: true
    },
    index: {   // 可選字段，有默認值
        type: Number,
        default: 3
    },
    // 帶有默認值的對象
    propE: {
        type: Object,
        // 對象或數組默認值必須從一個工廠函數獲取
        default: function () {
        return { message: 'hello' }
        }
    },
    // 自定義驗證函數
    propF: {
        validator: function (value) {
        // 這個值必須匹配下列字符串中的一個
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
        }
    }
    }
}
let app = new Vue({
    el: '#demo1',
    components: {
        'my-header': MyHeader,
        'my-body': MyBody,
        'my-footer': MyFooter
    },
    template: `
        <div>
            <my-header/>
            <my-body :index="tip"/>
        </div>
    `,
    data: {
        tip: 1
    }
})

註冊全局組件
- Vue.component('組件名',組件對象)
全局組件不帶 's'

過濾器-filter

全局過濾器：前端

Vue.filter('my-filter', function (value) {
// 返回處理後的值
})

組件內的過濾器 filters:{ '過濾器名'，'過濾方式fn' }
- fn中的參數1是傳遞的數據，容許追加額外的參數
- return是返回顯示的內容
- 使用：{{ myText | 過濾器名 }}
- 場景：處理後臺返回數據

監控-watch

watch和v-model的區別：
- v-model僅僅是數據的同步，watch能夠數據和行爲掛鉤

參數：(newVal,oldVal)vue

watch({'myText': function (newVal, oldVal) {
// 作點什麼
}})

沒法監視複雜數據，watch監控的是引用地址

深度監視的方法：java

watch({'myText': {
    deep: true,
    handler: function (newVal, oldVal) {
    // 舊值將與新值相同
    }
}})

計算-computed

凡是函數內部有this.相關屬性，改變都會觸發當前函數

計算屬性默認只有 getterwebpack

computed: {
    // 計算屬性的 getter
    fullName: function () {
    // `this` 指向 vm 實例
    return this.firstName + ' ' + this.lastName
    }
}

也能夠提供一個 setterios

computed: {
    fullName : {
        //this.firstName改變或this.lastName改變觸發get方法
        //this.fullName改變時執行set方法

        get: function () {
            return this.firstName + ' ' + this.lastName
        },
        set: function (newValue) {
            var names = newValue.split(' ');
            this.firstName: names[0];
            this.lastName: names[names.length - 1];
        }
    }
}

具名插槽-slot

插槽可讓組件像原生標籤同樣使用

使用方法：定義的組件中包含 <slot>web

組件：
<a
v-bind:href="url"
class="nav-link"
>
<slot></slot>
</a>
使用：
<navigation-link url="/profile">
Your Profile
</navigation-link>

插槽內能夠包含任何模板代碼，包括 HTML
<slot> 元素有一個特殊的特性：name。這個特性能夠用來定義額外的插槽
能夠在組件模板裏的 <slot> 標籤內部指定默認的內容vue-router

組件生命週期

beforeCreate 組件建立前
created 組件建立後
- 能夠操做data中的數據
- 對應父組件 v-if=true 時觸發
beforeMount 組件裝載前
mounted 組件裝載後
beforeUpdate 組件更新前
- 能夠獲取原dom
updated 組件更新後
- 數據發生改變觸發
- 能夠獲取新dom
beforeDestroy 組件銷燬前
destroyed 組件銷燬後
- 對應父組件 v-if=false 時觸發

注意：使用v-if頻繁觸發組件建立與銷燬不合理，應該使用 <keep-alive> 包裹組件vuex

activated <keep-alive> 包裹的組件激活
deactivated <keep-alive> 包裹的組件停用

獲取DOM元素/組件對象-ref

在組建的DOM部分，任意的標籤中寫上 ref="{自定義元素名}"
經過組件對象 this.$refs.{自定義元素名}獲取到元素
能夠在mounted中操做DOM數據
在子組件標籤中寫入 ref="{自定義組件名}"，獲取到的就是組件對象
Vue中DOM更新是異步的,異步致使DOM未渲染，沒法操做DOM元素的解決辦法
```
this.$nextTick(function(){
  //執行
})
```

vue 插件

vue-router的使用

路由原理：
- 添加hashChange事件，經過location.hash控制innerHTML

vue-router使用步驟：

引入vue-router.js
安裝插件
建立一個路由對象
配置路由對象
將配置好的路由對象關聯到vue實例中
制定路由改變局部的位置

Vue.use(VueRouter);
var router = new VueRouter({
    routes: [
        { name:'login', path: '/login',component: Login },
        { name:'register', path: '/register',component: Register }
    ]
})
//也能夠router.addRoutes([{},{}])
var app = {
    template:`<div>
        <router-link to="/login">登陸</router-link>
        <router-link :to="{name:'register'}">註冊</router-link>
        <router-view></router-view>
    </div>`
};
new Vue({
    el: "#app",
    router:router,
    components:{
        app:App
    },
    template: '<app/>'
})

url傳參數
- 查詢字符串
  1. 配置：在router-link標籤中註冊參數內容 <router-link :to="{name:'register',query:{id:1}}">註冊</router-link>
  2. 規則：{ name:'register', path: '/register',component: Register }
  3. 生成：<a href="/register?id=1">
  4. 獲取：子組件中使用this.$route.query獲取參數對象
- path方式
  1. 配置：:to="{name:'register',params:{id:1}}"
  2. 規則： { name:'register', path: '/register/:id',component: Register }
  3. 生成： <a href="/register/1">
  4. 獲取： this.$route.params
$router Vs. $route
- $router VueRouter路由對象
- $route 路由信息對象

嵌套路由

router-view套router-view，路由children路由

const Login = {
    template: `<div>
        我是登陸頁
        <router-link :to="{name:'login.woman'}">女性登陸頁</router-link>
        <router-view></router-view>
    </div>`,
};

var router = new VueRouter({
    routes: [{
        name: 'login',
        path: '/login',
        component: Login,
        children: [{
            name: 'login.woman',
            path: 'woman',
            component: Woman
        }]},
        {name: 'register', path: '/register', component: MyHeader}
    ]
})

權限控制
- router.beforeEach((to,from,next) => {})
  - 每次路由匹配後，渲染組件前
  - to 跳轉後路由信息對象
  - from 跳轉前路由信息對象
  - next 放行 next()
  - next 取消用戶導航next(false)
  - next方法裏添加參數能夠重定向next( { name:'login' } )
- 路由meta元數據 > 對於路由規則是否須要驗證權限的配置
  - 路由對象中和name屬性同級 {meta:{isChecked:true}}
路由懶加載
- 優化流量，按需請求

axios

axios掛載到vue對象上：
- Vue.prototype.$axios = axios;

合併請求

axios.all([getUerAccount(),getUserPermissions()])
    .then(axios.spread(function(acc,pers){
        //兩個請求如今都完成
    }));

取消請求

const CancelToken = axios.CancelToken;
const source = CancelToken.source(); // 建立標識請求的源對象

this.source = source; // 講對象存儲到組件
cancelToken: source.token, // 請求的options屬性
this.source.cancel(); // 取消到以前的那個請求

//前端的斷電續傳，及時獲取當前上傳的文件大小，儲存起來
var file = <input type="file"/> .files[0].slice(文件開始部分，文件結尾部分)
new FormData().append('file',file);

// 後臺就是接受屢次文件，都往上傳文件上追加

攔截器

請求攔截器：在發起請求以前，作的事

響應攔截器：在響應回來之後，作的事

axios.interceptors.request.use(function(config){
    //在請求發送以前作一些事
    return config;
},function(error){
    //當出現請求錯誤是作一些事
    return Promise.reject(error);
});

axios.interceptors.response.use(function(response){
    //對返回的數據進行一些處理
    return response;
},function(error){
    //對返回的錯誤進行一些處理
    return Promise.reject(error);
});

post發送數據爲"name='jack'"時，數據類型爲formData形式
參數
- this.$axios.defaults 修改公共配置
- transformRequest 加工請求體數據
- transformResponse 加工返回數據
- withCredentials:false 跨域請求默認不帶cookie
- 攜帶token
  - xsrfCookieName:'XSRF-TOKEN',//默認值
  - xrsfHeadername:'X-XSRF-TOKEN'，//默認值

webpack

源碼分析
1. 把全部模塊的代碼放入到函數中，用一個數組保存起來
2. 根據require時傳入的數組索引，能知道須要哪一段代碼
3. 從數組中，根據索引去除包含咱們代碼的函數
4. 執行該函數，傳入一個對象module.exports
5. 咱們的代碼，按照約定，正好是用module.exports='xxx'進行賦值
6. 調用函數結束後，module.exports從原來的空對象就有值了
7. 最終return module.exports所爲require函數的返回值

Vuex

使用步驟
1. 引入並安裝vuex插件
2. 建立store對象const store = new Vuex.Store()
3. 配置store中的數據/存/取
4. 將vuex關聯到vue實例中
數據獲取
數據修改
- this.$store.commit()
- 禁止使用this.$store.state.xxx=直接修改