Vue框架具體詳解

時間 2021-04-13

標籤 html 前端 vue node webpack ios web ajax 數據庫 npm 欄目 HTML 简体版

原文原文鏈接

title: Vue框架介紹與ES6ES7語法html

分類

categories: Vue前端

時間

date: 2018-05-22 12:10:18node

前端框架Vuewebpack

框架與庫的區別ios

小而巧爲庫，大而全爲框架web

庫ajax
- 提供小功能, 項目入侵小(上了以後能夠改)，上了船能夠再下船
框架數據庫
- 提供比較全的功能, 項目入侵大(上了以後不可改)，上了賊船了很難再下船了

介紹MVVM與MVCnpm

MVC 是後端開發思想，分爲三個部分
- Model：（數據層）負責數據庫操做
- View：（視圖層）全部前端頁面
- Controller：（業務邏輯層）處理對應業務邏輯
MVVM 前端頁面的分層開發思想，把一個完整的頁面分紅了三部分
- Model（頁面中須要的數據），這裏所指的是：data部分
  - 經過ajax取數據，未來渲染到View中
- View（頁面中的HTML結果），這裏所指的是：容器
- ViewModel（中間的調度者）。這裏所指的是：vm

基本代碼詳情

/**
*    容器就是 MVVM 中的 View
*
*    實例對象就是 MVVM 中的 VM, 被稱爲調度者
*
*    data就是 MVVM 中的 Model
*/

1. 導入Vue包
<script src = "vue-2.5.15.js"></script>

2. 添加一個容器, 未來被Vue控制
<div id = "box">{{msg}}</div>

3. 建立Vue的實例對象
const vm = new Vue({
    // 3.1 el傳入的是選擇器, 頁面要控制的元素
    el: "#box",
    data: {
    // 3.2 用data渲染數據
        msg: "Hello Vue",
        flag: true
    },
    // 能夠綁定事件處理函數
    methods: {
        
    },
})

/**
*    VM的實例對象, 會監聽data中每一項的數據變化, 只要一變化, VM就會從新把el指定區域全部的指
*    令從新解析一遍
*    data中的數據, 在每一個methods方法中都共享
*
*/

Vue指令

表達式就是指令，若是想讓指令生效必須放到el的容器裏，他有控制HTML的能力，v-系列插入屬性節點，插值表達式插入內容區域

插值表達式

插入表達式
能夠寫字符串屬性，也能夠進行字符串拼接，能夠寫簡單的代碼三元表達式，不要過度就行
只能寫在內容區域
<p>{{msg}}</p>

v-cloak

解決插件表達式閃爍
在網絡慢的狀況下會使用
在外層的元素添加 v-cloak ，並且須要在style樣式表中添加一個屬性

<style>
```
[v-cloak] {
    display: none;
}
```
<style>
<div id="box" v-cloak></div>

v-text

與插值表達式同樣均可以向元素插入數據
會把以前的內容清空並覆蓋
能夠進行字符串拼接與三元表達式
它沒有閃爍問題
不能渲染標籤
<h1 v-text = "msg"></h1>
<h1 v-text = "msg + '拼接字符串'"></h1>

v-html

渲染標籤

<div v-html = "msg"></div>
data: {
```
msg: "<h1>文本</h1>"
```
}

v-bind

屬性綁定
能夠進行字符串拼接，三元表達式
能夠單向數據綁定 model => view


<img v-bind:src = "images"/>

<img :src = "images"/>
data: {
```
images: "./img/01.png"
```
}

v-on

綁定事件
定義事件名時能夠進行傳參操做，添加()便可


<button v-on:事件名稱 = "btn"></button>

<button v-on:click = "btn(111)"></button>

<button v-on:click = "btn"></button>

<button @:click = "btn"></button>
methods: {
```
// 原始版
btn: function(str){
    console.log(str);
},
// 簡化版
btn(str){
    console.log(str);
}
```
}

v-model

雙向數據綁定
輸入框輸入值，msg會自動同步
只能與表單元素進行使用，才能實現數據綁定（input，select，textarea...），只要能和用戶交互就能夠實現數據綁定
data <----> 頁面

<input type = "type" v-model = "msg"/>

data: {
```
msg: "雙向數據綁定"
```
}

v-for與:key

v-for(遍歷的item項, 索引) in 數組 :key="item.id"

能夠遍歷數組
儘可能使用v-for時，要添加：key，取值：number與string


<li v-for = "(item, i) in arr" :key="item.id">
```
<p>索引: {{i}}, 值: {{item}}</p>
```
</li>

<li v-for="item in arr" :key="item.id">{{item}}</li>

data: {
```
arr: ["張三", "李四", "王五"]
```
}

v-if與v-show

語法： v-if=""
做用：顯示與隱藏
區別： v-if經過動態建立移除進行顯示隱藏，此方法比較消耗CPU
區別： v-show經過none與black進行顯示與隱藏，此方法有初始渲染消耗
應用場景：切換次數多使用 v-show，切換次數少使用 v-if


<button @click="flag=!=flag"></button>
<h1 v-if="flag">顯示與隱藏</h1>


<button @click="flag"></button>
<h1 v-show="flag">顯示與隱藏</h1>

data: {
```
flag: true
```
}

v-if與v-else

<button @click="flag=!flag"></button>
<h1 v-if="flag">顯示</h1>
<h1 v-else>隱藏</h1>

data {
    flag: true
}

綁定class樣式

綁定具體類名

.a{color: red;}
.b{font-size: 18px;}

/ 固定版 /
<h1 :class="['a', 'b']"></h1>
/ 動態版 /
<h1 :class="[flag ? a : b]"></h1>
<button @click="flag=!flag">切換</button>
data: {
```
flag: true
```
}

方法

方法-Vue.$set()

語法： Vue.$set(爲那個對象掛屬性, 新屬性名稱, 新屬性值)
應用場景：若是想在data動態一個值，就須要此方法

{{user.name}}

data: {
```
user: {name: "zs"}
```
}
methods: {
```
add(){
    this.$set(this.user, "age", 18)
}
```
}

方法-Vue.$mount()

若是el與$mount同時使用了， el優先級最高

let vm = new Vue({
```
data:{},
methods: {}
```
})

vm.$mount("#box");

配置對象

渲染模板template

此屬性是渲染模板，templat屬性接受的值爲字符串
此優先級比el高，會把el的覆蓋並替換

<h3>{{msg}}</h3>

let vm = new Vue({
```
el: "#box",
template: "<h1>{{msg}}</h1>",
data: {
    msg: "Vue"
}
```
})

過濾器

輸出數據時，須要對數據進行格式上的處理，並將結果呈現到頁面上，使用Vue提供的過濾器

語法：待處理數據 | dateFormat，| 術語：管道符
若是在插值表達式中，結果爲過濾器處理後的
只能用在插值表達式與v-bind中
能夠連續設置過濾器

<p>{{str | dateFormat}}</p>

<p>{{str | dateFormat()}}</p>
data: {
```
str: "2018-01-25T02:02.045z"
```
}

建立全局過濾器

Vue.filter("過濾器名稱", 處理函數);
處理函數的第一形參，名稱是約定好的originVal, 第一個參數爲管道符左側的值
處理函數的第二形參，爲調用過濾器的參數
處理完畢後須要使用return出去

須要在全局建立

Vue.filter("dateFormat", (originVal)=>{

const dt = new Date(originVal)
const y = dt.getFullYear();
return y;

})

建立私有過濾器

私有過濾器名稱爲filters，能夠建立多個過濾器
只能被當前所屬的實例所控制的區域使用

let vm = new Vue({
```
el: "",
filters: {
    過濾器名稱: ()=>{
        
    }        
}
```
})

實例生命週期

每個vm實例，在建立、運行、銷燬的三個階段，都會依次觸發事件，這些事件就是生命週期函數

生命週期鉤子(別名)=生命週期函數=生命週期事件

生命週期函數分類

建立期間的生命週期函數(一生只執行一次)
- beforeCreate: ()=>{}
- created: ()=>{}
- beforeMount: ()=>{}
- mounted: ()=>{}
運行期間的生命週期函數
- beforeUpdate: ()=>{} 數據新的，頁面老的
- updated: ()=>{} 頁面和數據都是最新的
銷燬期間的生命週期函數
- beforeDestroy： ()=>{} 銷燬以前可是能夠正常工做
- destroyed: ()=>{} 銷燬以後沒法正常工做了

生命週期函數介紹

beforeCreate: ()=>{} 比方科瑞特
1. 這個時候data與methods尚未初始化
created: ()=>{} 科瑞唉特d
1. 這個時候data與methods已經初始化完畢
2. 若是要獲取首屏數據就在此方法進行ajax請求
beforeMount: ()=>{} 比方忙特
1. 當執行到beforeMount 就進行入了建立階段的第三個生命週期函數，將內存的HMTL結構渲染到頁面，但並未開始渲染
mounted: ()=>{} 忙提特
1. 這個階段正在把內存中渲染好的HTML結構替換到頁面中，覆蓋到el區域中
2. 初始化JS插件，在此時比較合適，相似（輪播圖插件，區域滾動之類的）
beforeUpdate: ()=>{}
1. 這個階段就標識data數據發生了變化，data數據最新的，但用戶界面仍是老的
updated: ()=>{}
1. 此時頁面已經刷新。此時data和頁面都是最新的
beforeDestroy： ()=>{}
1. 此時vm實例即將被銷燬，可是可使用vm
destroyed: ()=>{}
1. 此時vm已經銷燬了，沒法正常工做了

使用axios發起ajax請求

axios只能發起get與post請求，沒法發起jsonp請求，若是涉及到jsonp能夠在後端設置CORS跨域資源共享

請求方式

axios
- 只支持 get 與 post
- 沒法發起jsonp請求
- 若是涉及到了jsonp請求，讓後端小夥伴設置一個CORS跨域資源共享
vue-resource
- 能夠發起jsonp請求，官方不推薦，做者不更新了

語法

在引入axios包時，全局就多了一個axios成員

get請求

// 返回值是 promise 實例對象
let result = axios.get("地址?請求參數")；
// 經過 then 指定回調, 就能夠拿到服務器返回的數據
result.then((myresult)=>{
    // 返回數據就在 myresult.data 身上
    console.log(myresult);
})

Vue中使用get請求

<button @click="btn"></button>

// 須要在全局下設置
Vue.prototype.$http = axios;

methods: {
    btn(){
        //1. 調用axios發起get請求, 返回值是實例對象, 調用實例對象的
        axios.get("地址").then((result)=>{
            result.data
        });
        
        //2. 
        this.$http.get("地址").then((result)=>{
            result.data
        })
    }
}

post請求

axios.post("地址", {name: "zs", age: 18}).then(()=>{
    
})

axios高級用法

全局配置請求API的跟路徑

// 全局配置 axios 請求 API 接口時候的根路徑
axios.defaults.baseURL = "http://www.liulongbin.top:3005";
Vue.prototype.$http = axios;

攔截器實現loading效果

攔截器分兩部分
- 請求開始時候的攔截器
- 請求完畢之後的攔截器
  - 只要有請求被完成，則會觸發 response 攔截器，
須要在實例 created 生命週期函數內註冊 request 與 response 攔截器

動畫

只能實現簡單的動畫，內容須要 transition 標籤才能實現過渡動畫，動畫須要在style標籤內設置

動畫分爲兩部分
1. 入場動畫，不可見（flag=false） -- 可見（flag=true）
2. 出場動畫，可見（flag=true） -- 不可見（flag=false）
入場時候
1. v-enter 入場前的樣式
2. v-enter-to 入場完成之後的樣式，通常不使用
3. v-enter-active 入場的時間段
離場時候
1. v-leave 離場前的樣式
2. v-leave-to 離場完成之後的樣式
3. v-leave-active 離場的時間段

過渡動畫不必定和 v-if 與 v-show 使用
列表過渡不須要配合
單個元素過渡須要 v-if 與 v-show 來配合使用

第三庫動畫庫

單個元素使用

將須要過渡動畫用 transition 包裹起來
給 transition 添加入場與離場動畫
1. enter-active-class="" 入場時候的類名
2. leave-active-class="" 離場時候的類名

多個元素使用

多個元素須要過渡動畫，須要用 transition-group 進行包裹
須要在 style 定義兩組類，Vue提供的過渡動畫

計算屬性

若是計算屬性所指向的 function 中， data上的數據發生了變化，則會從新計算屬性從新求值

computed: {
```
funllname: function(){}
```
}

Vue配置webpack

安裝傳統的安裝webpack，在導入Vue組件的時候會出現報錯，由於默認導入時閹割版的Vue，開發時須要手動進行指定正常版的Vue，並導入進去

運行 cnpm i vue -S 把 vue 安裝到項目依賴
在 index.js 中使用 import 導入 vue 模塊：
```
import Vue from 'vue'
```

在 index.html 中建立未來要被 vm 實例控制的 div：

<!-- 未來，這個 div 就是 Vue實例 要控制的區域 -->
<div id="#app"></div>

在 index.js 中建立 vm 實例，並使用 el 指定要控制的區域，使用 data 指定要渲染的數據：
```
const vm = new Vue({
  el: '#app', // 要控制的區域
  data: {
    msg: 'ok' // 要渲染的數據
  }
})
```

關於基於webpack的vue項目報錯

由於使用 import 導入的 vue 模塊，導入的並非功能最全的 vue 包；而是刪減版的；
刪減版的 vue 包中功能不多，目的是爲了減少vue 包的體積，由於文件越小，網絡請求越快！
如何讓 import 導入最全的 vue 包呢？
- 打開 node_modules 目錄，找到 vue 包所在的文件夾
- 打開文件夾中的 package.json，找到 module 節點
- 把 module 節點所對應的 dist/vue.runtime.esm.js 路徑，修改成 dist/vue.min.js 便可
暫時 import 最全的 vue 包；等開發項目的時候，必定要使用刪減版的包；

組件

模塊化和組件化概念