整理vue學習筆記

整理vue學習筆記

2017年09月04日 09:20:44 小飛俠-2 閱讀數：3294

 

1.vue簡介，vue是一個構建用戶界面的框架。是一個輕量級mvv框架，和angular同樣是所謂的雙向數據綁定，數據驅動和組件化的前端開發，經過簡單的api

實現響應式的數據綁定和組合試圖組件，容易上手，小巧。

2.安裝vue-devtools插件，便於在chrome中調試vue，配置是否容許vue-devtools檢查代碼，方便調試，生產環境設置爲false，vue.config.devtools = false;

vue.config.productionTip=false;阻止啓動生產消息。

3.經常使用指令。

v-model 雙向數據綁定，通常用於表單元素。

v-for 對數組或對象進行循環操做，使用是v-for 不是v-repeat 

v-on 用來綁定時間，用法：v-on :時間 = ‘函數’

v-show/v-if 用來顯示或隱藏元素，v-show 是經過display實現，v-if 是每次刪除後在建立

4.事件和屬性

v-on:click = " 簡寫 @click=""   

$event 事件對象，裏面包括事件相關信息，如事件源，時間類型，偏移量等

事件冒泡，原生js方式，依賴於事件對象，vue方式，不依賴於事件對象，@click.stop 來阻止事件冒泡；

鍵盤事件：@keydown.13 或keydown.enter  

事件修飾符  .stop  調用event.stopPropagation();

v-bind 用於屬性綁定,用法 v-bind:屬性=「」   舉例 v-bind:src="" 簡寫  ：src=""

5。模板

vue.js 使用基於html的模板語法，將dom綁定到vue實例中的數據模板就是{{}}  用來進行綁定數據顯示在頁面中

雙向綁定  v-model 

單項綁定  {{}} 可能會出現閃爍問題， 也可使用v-text  v-html

其餘指令  v-once 數據綁定一次  v-pre 不變異，直接原樣顯示

6.過濾器

用來過濾模型數據，在顯示以前進行數據對的處理和篩選

語法： {{data | filter（參數） |filter（參數）}}

內置過濾器，2.0以後都刪掉，若是使用能夠藉助第三方庫  如lodash data-fns 日期格式化 accounting.js 貨幣格式化以及自定義

7.發送ajax請求

vue自己不支持發送ajax請求，須要使用vue-resourc axios等插件實現，建議使用axios

axios是一個基於promise的http請求客戶端，用來發送請求

基本用法：

axios.get(url[,options]);  傳參方式，url或者params傳參

axios.post(url,data,[options]);

注意：axios默認發送數據時，數據格式是request payload，並不是咱們牀用的form data格式，因此參數必需要以鍵值對像是傳遞

，不能以json形式傳參

傳參的方式： 本身拼接鍵值對，使用transformrequst 在請求發送前將請求數據進行轉換，或者使用qs模塊進行轉換

axios不支持跨域請求，可使用vue-resource 發送跨域請求。

跨域發送請求： this.$http.get(url,[options]);    this.$http.post(url,[options]);

8.vue生命週期

vue實例從建立到銷燬過程成爲生命週期

9。計算屬性

計算屬性也是用來存儲數據，具備這倆個特色：數據能夠進行邏輯處理操做，對計算屬性中的數據進行監視。

10.vue實例屬性和方法

屬性 vm.$el  vm.$data vm.$options vm.$refs

方法 vm.$mount()  vm.$destroy vm.$nextTick(callback) vm.$set(object,key,vlaue) vm.$delete(object,key) vm.$watch(data,callback)

11,自定義指令

自定義全局指令   vue.directive （指令id，定義對象）

12.過分（動畫）

vue在插入更新或一處dom時，提供多種不一樣方式應用過程，本質仍是使用css動畫，

基本用法： 使用transition組件，將要執行動畫的元素保函在改組件內

結合第三方動畫庫  animater.css 一塊兒使用

  <transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">
        <p v-show="flag">顯示內容</p>
    </transition>  

 

13.組件

組件是vue最強大的功能之一，組件可狂戰html元素，封裝重用代碼，組件是自定義元素對象。

定義組件方式，a>先建立組件構造器，而後由組件構造器建立組件。b>直接建立

引用模板講組件內容放在模板<template>中引用，組件中數據data;function  和vue實例存儲數據不一樣

componect :is=""  組件，多個組件使用同一個掛的點，動態切換,

      keep-alive 緩存組件，避免重新建立，效率比較高

使用方法  <keep-alive><componect :is="">   

數據傳遞：父子組件，在一個組件內部又定義了另外一個組件，稱爲父子組件。

       子組件只能在付組件中使用，默認狀況下，子組件不能訪問付組件數據。每一個組件的做用域是獨立的。

       組件間數據的通訊：在調用組件時，綁定想要獲取的付組件的數據，在子組件內部，使用props選項來生命獲取

的數據，接收來自付組件的數據。例子：props:['msg']   props能夠是數組，也能夠是對象props:{} 容許配置高級設計好比類型判斷

數據的校驗，設置默認值 props:{messge:String,age:Number,name:{type:String,rquired:true,default:19,validator:function(){}}},對象作數組的默認值，

對象必須使用函數返回。

組件中的數據有三種形式：data  props computed 

付組件訪問子組件數據方式：

a.在子組件中使用vm.$emit（事件名，數據） 出發一個自定義事件，事件名自定義

b.付組件在使用子組件的地方監聽子組件出發事件，並在付組件中定義方法，用來獲取數據

單項數據流：

props是單項綁定的，當付組件的屬性變化時，將傳導給子組件，可是不會反過來，並且不容許子組件直接

修改付組件中的數據

解決方案： a.若是子組件享把他做爲局部數據來使用，能夠將數據存入另外一個變量在操做

b.若是子組件想修改數據並同步付組件，使用.sync  2.3開始支持，或者將付組件數據包裝成udixiang，

而後在子組件中修改對象的屬性。

非父子組件間通訊：

能夠經過一個空的vue實例來做爲中央事件總線，用他來出發事件或監控事件

var Event = new Vue();    空對象

Event.$emit(事件名，數據)；  發送數據

Event.$on(事件名，data=>{})  監聽接收數據

slot內容分發：

用來獲取組件中的元內容，就是組件標籤中的內容；

得到指定標籤內容能夠給標籤訂義  slot="s1"   獲取  <slot name="s1"/>

14.vue-router 路由

使用vue.js 開發spa 單頁面應用，根毫不同url地址，顯示不一樣內容，但實如今統一頁面紅，稱單頁面應用。

bower info vue-router    cnpm install vue-router -S

<div id="itany">
<div>
<!-- 使用router-link組件來定義導航，to屬性指定連接url -->
<router-link to="/home">主頁</router-link>
<router-link to="/news">新聞</router-link>
</div>
<div>
<!-- router-view用來顯示路由內容 -->
<router-view></router-view>
</div>
</div>


<script>
//1.定義組件
var Home={
template:'<h3>我是主頁</h3>'
}
var News={
template:'<h3>我是新聞</h3>'
}


//2.配置路由
const routes=[
{path:'/home',component:Home},
{path:'/news/:username/:password'',component:News},
{path:'*',redirect:'/home'} //重定向
]


//3.建立路由實例
const router=new VueRouter({
routes, //簡寫，至關於routes:routes
// mode:'history', //更改模式
linkActiveClass:'active' //更新活動連接的class類名
});


//4.建立根實例並將路由掛載到Vue實例上
new Vue({
el:'#itany',
router //注入路由
});
</script>

知識點：<style scoped> /* scoped表示該樣式只在當前組件中有效 */

路由嵌套和參數傳遞：

a.查詢字符串   login?name=tome&pwd=123     顯示  {{$route.query}}

b。rest風格url       regist/alice/324    顯示獲取 {{$router.params}}

路由實例的方法：

router.push();  添加路由，功能和<route-link> 相同，都是跳轉頁面

router.replace() 替換路由，和上功能同樣，不產生歷史記錄

單文件組件：

.vue 文件稱單文件組件，是vue.js 自定義的文件格式，一個.vue文件就是一個單獨的毒箭，在文件內封裝了

單獨的js  css html

.vue文件由三部分組成  template style  script

vue-loader 瀏覽器自己不認識你.vue文件，因此必須對.vue文件加載解析，此時須要vue-loaderleisi 的loaderhaiyou 

不少，html-loader css-loader style-loader  babel-loader  須要注意vue-loader 是計劃於webpack的

webpack 是一個前端資源模塊化加載器和打包工具，

安裝相關模板：

cnpm install vue-template-compiler -D //預編譯模板
    合併：cnpm install -D webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env  vue-template-compiler

運行測試：  npm run dev

15.腳手架 vue-cli

    vue-cli是一個vue腳手架，能夠快速構建項目結構，

經常使用項目模板： webpack 保函EsLint代碼麼規範檢查和unit單元測試，

webpack-simple 沒有代碼檢查和單元測試

browserify 使用的也比較多

browserigy-simple

安裝vue-cli，配置vue命令環境 
    cnpm install vue-cli -g
    vue --version
    vue list
 初始化項目，生成項目模板
    語法：vue init 模板名  項目名
 進入生成的項目目錄，安裝模塊包
    cd vue-cli-demo
    cnpm install
 運行
    npm run dev  //啓動測試服務
    npm run build //將項目打包輸出dist目錄，項目上線的話要將dist目錄拷貝到服務器上
 使用webpack模板
    vue init webpack vue-cli-demo2
    ESLint是用來統一代碼規範和風格的工具，如縮進、空格、符號等，要求比較嚴格
16.模塊化開發

   首先在一個目錄下 vue init webpack-simple vue-cli-demo 建立項目

  進入目錄  cd vue-cli-demo       cmpn install   而後  npm run dev  運行測試

cmpn install vue-router -S       -S是生產依賴的意思；

編輯main.js  import VueRouter form ''vue-router'     vue.use(Vue/router); 使用以後全局均可以用

編輯app.vue  編輯 router.config,js 

cnpm install axios -S

使用axios倆種方式：

a.在使用axios的組件中，都要引入axios  import axios from 'axios'      axios.get('url').then(resp ->{resp.data});.catch(eorr->){}

        b.在main.js 中全局引入  import axios from 'axios'  並添加到vue原型中 vue.prototype.$http=axios;  而後其餘組件能夠

vue.$http.get(); 或 this.$http.get();

爲自定義組件添加事件：

好比自定一個button   vue註冊    默認不能綁定@click=send   這樣寫  @click.ntaive=send 就能夠

17ui庫  element ui

是一個ui的組件庫，是餓了麼提供的一套基於vue 2.0的組件庫  能夠快速開發網址，提升效率

  element ui  pc端   mintui  移動端 官網  element.eleme.io

cnpm install element-ui -S

npm run dev

在main.js 引入並使用這個組件  import ElementUI from 'elemtn-ui'  import element-ui/lib/eheme=default/index.css

vue.use(ElementUI);  這種引入方式是引入所有的組件內容

在webpack.confgi.js 中添加loader   test:/\.css$/,loader:'style-loader!css-loader'

cnpm instal  style-loader -D    字體字庫loader配置

webpack配置更改要重啓

動態樣式  是使用less

使用less  安裝loader   less  less-loader  配置  test:/\.less$/,loader:less-loader     指定style l ang=less  必須指定樣式

自定義全局組件：

全局組件：能夠在main.js 中使用vue.use 進入全局引入，而後在其餘組件中均可以使用

建立 。vue組件，建立index.js文件   import Login from './Login.vue'
export default {
install:function(Vue){
Vue.component('Login',Login);
}
}

普通組件：每次使用都要引入，如axios

18.vuex 狀態管理模式，採用集中式存儲，管理應用全部組件的狀態，簡單說集中管理數據，相似於react中的redux，基於flux

前段狀態管理框架。

基本使用：nmp install vuex -S

建立store.js 文件，vuex相關配置。在main.js 中導入，import store fomr './store.js    main.js 配置store選項，子組this.$store

import vue fomr vue  import vuex from vuex   vue.use(vuex);

vuex核心store  至關於一個容器，一個store實例中包含一下屬性和方法：

getters 獲取屬性

actions 定義方法  動做，如流程判斷  異步請求   const action={ 方法名（context){}）}   context 對象有comit  dispatch state

commit 提交的意思，修改數據惟一方式， conmit('add) 提交一個叫add的變化

mutations 定義變化

var state= { count:6}   //建立store對象   const store=new Vuex.Strore{{state}}; vargetters ={count)(){return state.count}} export default store;

編輯 app。js 編輯store,  做爲計算屬性：computed:(){return this.$store.state.count};

方式一   this.#store訪問  方式二  mapGetters mapActios訪問

mapGetter 獲取屬性

mapActions 獲取方法

導入輔助函數  import {mapGetter} from vuex

computed:mapGetters{('count')}