vue

編碼步驟

1. 引入vue.js文件

2. 定義一個(gè)vue的管理范圍

    <div id='app'>
    
    </div>
   
    vue1.0里面vue的管理區(qū)域的id可以定義在HTML以及body標(biāo)簽上
    vue2.0里面不允許這樣來做
   

3. 定義一個(gè)vue的對象

    new Vue({
        el:'#app',
        data:{
            // 定義將來要在vue管理區(qū)域中使用的數(shù)據(jù)
            name："zs"
        },
        methods：{
            fn:function(){
                this.name = 'ls'
            }
        }
    })
   

系統(tǒng)指令

• {{}}:插值表達(dá)式

    作用:將vue對象中的數(shù)據(jù)以及表達(dá)式顯示到vue托管區(qū)域中
  
    {{這里書寫vue對象中data里面的數(shù)據(jù)或者表達(dá)式}}
  

• v-for:循環(huán)輸出HTML元素

    <div v-for='(item,index) in list' :key = 'index'>{{item.name}}</div>
  

• v-text:輸出文本數(shù)據(jù)

    <span v-text='name'></span>
  

• v-html:輸出HTML結(jié)構(gòu)數(shù)據(jù)

    <div v-html='name'></div>
  
    data：{
        name：'<span>zs</span>'
    }
  

• v-if：根據(jù)表達(dá)式值的真假決定元素的顯示隱藏

    // isShow為true顯示div 為false隱藏div
    // v-if是直接操作DOM 即隱藏時(shí)會將該div從DOM結(jié)構(gòu)中移除
    <div v-if='isShow'></div>
  

• v-show: 根據(jù)表達(dá)式值的真假決定元素的顯示隱藏

    // isShow為true顯示div 為false隱藏div
    // v-show是操作div的樣式 顯示時(shí)添加 style = 'display:block'; 隱藏時(shí)添加style = 'display:none'
    <div v-if='isShow'></div>
  

• v-cloak:解決表達(dá)式閃爍問題

    1. 定義一個(gè)樣式
    <style>
        [v-cloak]{
            display:none
        }
    </style>
  
    2. 使用
  
    <div v-cloak>{{name}}</div>
  
    原理:當(dāng)vue.js文件還沒有加載出來時(shí) 使用[v-cloak]樣式作用于當(dāng)前指令所在標(biāo)簽,當(dāng)vue.js能夠起作用時(shí),會自動刪除v-cloak指令
  

• v-bind:動態(tài)給標(biāo)簽或者組件綁定屬性

    <div v-bind:class = 'box'></div>
  
    // 使用:簡寫v-bind
    <div :class = 'box'></div>
  
    // 當(dāng)綁定的屬性值是常量字符串+變量時(shí) 我們在綁定這個(gè)屬性時(shí) 是需要綁定一個(gè)對象,這個(gè)對象的鍵就是需要綁定的屬性名 這個(gè)對象的值就是常量字符串+變量
    <a v-bind="{href:'http://itcast.cn/index/'+id}">跳轉(zhuǎn)</a>
  

• v-on:綁定事件

    <div v-on:click = 'click'></div>
    <div @click = 'click'></div>
  

• v-model：雙向數(shù)據(jù)綁定

    // 可以使用的標(biāo)簽:input textarea select 組件
    <input v-model='name'></input>
  

自定義過濾器

自定義私有過濾器

    new Vue({
            filters：{
                    // 每一個(gè)過濾器都是一個(gè)方法
                    `過濾器名稱`：function(input,arguments){
                            return `對input進(jìn)行處理的代碼邏輯`
                    }
            }
    })

全局過濾器

    Vue.filter({
            // 在對象內(nèi)部定義過濾器
            `過濾器名稱`：function(input,arguments){
                    return `對input進(jìn)行處理的代碼邏輯`
            }
    })

使用過濾器

    {{需要被處理的數(shù)據(jù) | 過濾器名稱(arguments)}}
    {{new Date() | datefmt('YYYY-MM-DD HH:mm:ss')}}

鍵盤修飾符

    // 使用鍵盤修飾符
    v-on:事件名稱.enter

自定義鍵盤修飾符

    // vue1.0
    Vue.driective('on').keycodes.f2 = 113

    // vue2.0
    Vue.config.keycodes.f2 = 113

自定義指令

自定義屬性指令

    <div v-on:click = 'fn'></div>

    Vue.driective('指令名稱',function(){
            // 在函數(shù)內(nèi)部完成該指令的邏輯
            // this.el 獲取使用當(dāng)前指令的元素
            // this.vm 獲取到的是當(dāng)前指令所屬的vue對象實(shí)例
            // this.expression 獲取到的是 指令等號后面所書寫的表達(dá)式
    })

    Vue.directive('指令名稱',{
            bind：function(el,binding){
            // el 當(dāng)前指令所在元素
            // binding.expression 當(dāng)前指令后面所跟表達(dá)式
            // binding.value 當(dāng)前指令表達(dá)式的值
            }
    })

自定義元素指令

在vue2.0中推崇的是組件寫法挚歧，所以不再有自定義元素指令

    Vue.elementDriective('指令名稱'{
            bind：function(){
                 // 在函數(shù)內(nèi)部完成該指令的邏輯   
            }
    })

vue-resource ajax請求

get請求

    // 使用當(dāng)前vue實(shí)例調(diào)用get方法
    this.$http.get('url',{是需要給后臺發(fā)送的數(shù)據(jù)}.then(function(res){
            // res.body 是獲取到的響應(yīng)數(shù)據(jù)
    })

post請求

    this.$http.post('url',{是需要給后臺發(fā)送的數(shù)據(jù)},{emulateJSON:true}).then(function(res){
            // res.body 是獲取到的響應(yīng)數(shù)據(jù)
    })

jsonp請求

    // 使用當(dāng)前vue實(shí)例調(diào)用get方法
    this.$http.jsonp('url(此URL必須支持jsonp請求)',{是需要給后臺發(fā)送的數(shù)據(jù)}.then(function(res){
            // res.body 是獲取到的響應(yīng)數(shù)據(jù)
    })

Vue生命周期

Vue 實(shí)例有一個(gè)完整的生命周期党晋，也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，我們稱這是 Vue 的生命周期螺句。通俗說就是 Vue 實(shí)例從創(chuàng)建到銷毀的過程，就是生命周期橡类。

鉤子函數(shù):一個(gè)系統(tǒng)內(nèi)置的一批函數(shù),這些函數(shù)會在系統(tǒng)運(yùn)行的某一階段或者某一時(shí)間點(diǎn)自動觸發(fā),進(jìn)行事件的處理后又接著執(zhí)行
后續(xù)任務(wù)

    beforecreate : 可以在這加個(gè)loading事件蛇尚，在加載實(shí)例時(shí)觸發(fā) 
    created : 初始化完成時(shí)的事件寫在這里，如在這結(jié)束loading事件顾画，異步請求也適宜在這里調(diào)用
    mounted : 掛載元素取劫，獲取到DOM節(jié)點(diǎn)
    updated : 如果對數(shù)據(jù)統(tǒng)一處理匆笤，在這里寫上相應(yīng)函數(shù)
    beforeDestroy : 可以做一個(gè)確認(rèn)停止事件的確認(rèn)框

vue1.0和vue2.0區(qū)別總結(jié)

v-for的區(qū)別

    1. vue1.0中標(biāo)識循環(huán)遍歷的每一項(xiàng)使用的是`track-by='$index'`
       vue2.0中使用`:key= 'index'`,
       vue1.0中有`$index`這個(gè)特殊屬性,
       vue2.0中沒有.

    2. vue1.0中遍歷數(shù)組寫法`(index,value) in list`
       vue2.0中是`(value,index) in list`

    3. vue1.0遍歷對象寫法`(key,value) in obj`
       vue2.0中是`(value,key) in obj`

過濾器

    1. vue1.0中有系統(tǒng)提供的過濾器,如 json uppercase ... 
       vue2.0中全部去除系統(tǒng)過濾器

    2. vue1.0和vue2.0中都有自定義過濾器

    - 自定義全局過濾器
    `Vue.filter('過濾器名稱', function (管道符號|左邊參數(shù)的值,其他參數(shù)1,其他參數(shù)2,....) {
             return 對管道符號|左邊參數(shù)的值做處理以后的值
    })`
    - 自定義私有過濾器(定義在 VM中的filters對象中的所有過濾器都是私有過濾器)
    new Vue({
     ...
     filters:{
         '過濾器名稱':function(管道符號|左邊參數(shù)的值,其他參數(shù)1,其他參數(shù)2,....){
            return 對管道符號|左邊參數(shù)的值做處理以后的值
         }
     }
 });

過度動畫

    1、vue1.0中谱邪，需要在實(shí)現(xiàn)過渡動畫的元素上使用 transition 特性炮捧，示例：
    <div v-if="show" transition="my-transition"></div> ,my-transition 可以有程序員自定義名稱

    2、 vue2.0中 transition特性的寫法變成了 <transition></transition>的寫法    
    <transition name="fade">
            <p v-if="show">hello</p>
    </transition>

    3. 動畫鉤子函數(shù)

    vue1.0中動畫鉤子函數(shù)
    - 過渡動畫進(jìn)入
    beforeEnter:function(el){}      過渡動畫進(jìn)入之前惦银，一般在這個(gè)方法中定義目標(biāo)元素的初始位置
    enter:function(el,done){}       過渡動畫進(jìn)入中咆课，在這個(gè)方法中定義目標(biāo)元素的結(jié)束位置
    afterEnter:function(el){}       過渡動畫結(jié)束后，通常在這個(gè)方法里面重置初始值
    enterCancelled:function(el){}   取消過渡動畫時(shí)被調(diào)用

    - 過渡動畫離開
    beforeLeave:function(el){}      動畫離開之前觸發(fā)    
    leave:function(el){}            過渡動畫進(jìn)入中觸發(fā)
    afterLeave:function(el){}       過渡動畫離開結(jié)束后
    leaveCancelled:function(el){}   取消過渡動畫時(shí)被調(diào)用

    vue2.0中動畫鉤子函數(shù)
    - 過渡動畫進(jìn)入
    before-enter      過渡動畫進(jìn)入之前扯俱，一般在這個(gè)方法中定義目標(biāo)元素的初始位置
    enter             過渡動畫進(jìn)入中书蚪，在這個(gè)方法中定義目標(biāo)元素的結(jié)束位置
    after-enter       過渡動畫結(jié)束后，通常在這個(gè)方法里面重置初始值
    enter-cancelled   取消過渡動畫時(shí)被調(diào)用

    - 過渡動畫離開
    before-leave      動畫離開之前觸發(fā)    
    leave             過渡動畫進(jìn)入中觸發(fā)
    after-leave       過渡動畫離開結(jié)束后
    leave-cancelled   取消過渡動畫時(shí)被調(diào)用

組件

    1. vue1.0中`template`中可以定義多個(gè)同級HTML標(biāo)簽

            Vue.extend({
                    template:'<h1>我和p標(biāo)簽是同級</h1><p>我和h1標(biāo)簽是同級</p>'
            })

       vue2.0中`template`中如果有多個(gè)同級HTML標(biāo)簽,必須有一個(gè)根元素

            Vue.extend({
                    template:'<div><h1>我和p標(biāo)簽是同級</h1><p>我和h1標(biāo)簽是同級</p></div>'
            })

    2. vue1.0和vue2.0中最常用定義組件方式

            Vue.component('組件名',{
                    template:'組件模板',

                    data:function(){
                            return {
                                    // 定義組件中需要使用的數(shù)據(jù)
                            }
                    },

                    methods:{
                            // 定義組件中需要使用的方法
                    }
            })

v-el和v-ref

    vue1.0中使用v-el獲取DOM元素 使用v-ref獲取組件
    vue2.0中統(tǒng)一使用v-ref獲取DOM元素和組件

    <div ref='mydiv'></div>
    <account ref='myaccount'></account>
    // 獲取DOM this.$refs.mydiv
    // 獲取組件 this.$refs.myaccount

vue-router的使用

    1. 使用`router-link`定義跳轉(zhuǎn)路徑
    <router-link to="/account">賬號</router-link>
    
    2. 使用`router-view`進(jìn)行占位,以便于顯示組件
    <router-view></router-view>

    3. 定義跳轉(zhuǎn)路徑對應(yīng)的需要顯示的組件
    // 實(shí)際項(xiàng)目中一個(gè)文件就是一個(gè)組件,所以應(yīng)該是直接引入組件
    var account = Vue.extend({
            template:'<div><h1>賬號</h1></div>'
    });
     var login = Vue.extend({
            template:'<div><h1>登錄</h1></div>'
    });

    4.實(shí)例化路由對象并配置路由規(guī)則
    var router = new VueRouter({
            routes:[
                    {
                            path:'/account',
                            component:account,
                            children:[
                                    {
                                            path:'login',
                                            component:login,
                                    }
                            ]
                    },
            ]
    });

    5. 開啟路由
    new Vue({
            el :'#app',
            router : router //啟動路由對象
    });

webpack 的學(xué)習(xí)

使用webpack以及npm創(chuàng)建項(xiàng)目

    1. 創(chuàng)建項(xiàng)目文件夾

    2. 創(chuàng)建npm的配置文件package.json

    npm init -y

    3. 創(chuàng)建webpack配置文件(webpack.config.js)

    4. 根據(jù)項(xiàng)目需求安裝所需要使用的模塊

    npm install 包名 --save-dev

安裝webpack

    1. 全局安裝 nrm: `npm install nrm -g`
    2. 查看鏡像源 `nrm ls`
    3. 切換淘寶鏡像源 `nrm use taobao`
    4. 全局安裝webpack `npm install webpack@1.14.0 -g`

webpack 進(jìn)行代碼打包

    導(dǎo)出一個(gè)模塊 `module.exports = 需要導(dǎo)出的對象`

    導(dǎo)入一個(gè)模塊 `var 模塊名 = require(文件路徑)`

    webpack 打包命令 
    `webpack 需要打包的文件名 輸出的文件名`

    例如:
    `webpack main.js build.js`

webpack 配置文件

    1. 默認(rèn)配置文件名稱webpack.config.js

    module.exports = {
            entry:'*需要打包的文件*' // 路徑+文件名 一般為 ./src/xxx.js
            output:{
                    path:'*輸出文件的路徑*' // 絕對路徑 使用__dirname + 路徑
                    filename:`*輸出文件的名稱*` // 一般都為build.js/bundle.js
            }
    }

    2. 使用webpack進(jìn)行打包
            - 如果是默認(rèn)配置文件 則直接在命令行中 輸入 `webpack`
            - 如果是其他改過名字的配置文件 則使用 `webpack --config 配置文件名`

webpack loader的使用

loader：預(yù)處理器迅栅。在js代碼執(zhí)行之前需要執(zhí)行的一些處理殊校。

css-loader

css-loader 是進(jìn)行css解析，能夠使瀏覽器正常識別js文件中導(dǎo)入的 css 文件

    1. 初始化package.json
    npm init

    2. 安裝css-loader以及style-loader
    npm install style-loader css-loader --save-dev

    3. 在webpack.config.js文件中進(jìn)行配置

            module:{
                    loaders:[
                            {
                                    test: /\.css$/,
                                    loader:'style-loader!css-loader'
                            }
                    ]
            }

sass-loader 的使用

scss-loader是進(jìn)行sass文件的解析

    1. 安裝sass-loader
    npm install node-sass sass-loader style-loader css-loader --save-dev

    2.配置sass-loader
     loaders:[
                    {
                            test: /\.scss$/,
                            loader:'style-loader!css-loader!scss-loader'
                    }
            ]

less-loader 的使用

less-loader是進(jìn)行l(wèi)ess文件的解析

    1. 安裝scss-loader
    npm install less less-loader style-loader css-loader --save-dev

    2.配置scss-loader
     loaders:[
                    {
                            test: /\.less$/,
                            loader:'style-loader!css-loader!less-loader'
                    }
            ]

url-loader 的使用

url-loader是進(jìn)行url資源的解析

    1. 安裝url-loader
    `npm install file-loader url-loader --save-dev`

    2.配置url-loader
     loaders:[
                    {
                            test: /\.(png|jpg|gif|ttf)$/,
                            loader:'url-loader!limit=20000'
                            // 1kb = 1024b(字節(jié))
                            // 對于比較小的圖片資源可以使用limit進(jìn)行限制 轉(zhuǎn)換成base64字符串內(nèi)嵌到j(luò)s代碼中
                            // 對于超過限制的圖片才轉(zhuǎn)成URL進(jìn)行網(wǎng)絡(luò)請求
                    }
            ]

webpac-dev-server的使用

    1. 安裝webpack-dev-server
 
    npm install webpack@1.14.0 webpack-dev-server@1.16.0 --save-dev

    2. 安裝自動生成HTML文件的插件
    npm install html-webpack-plugin@2.28.0 --save-dev

    3. 修改package.json文件

            "scripts": {
                    "dev": "webpack-dev-server --hot --inline --open --port 5008"
            },

    4. 配置webpack.config.js中的內(nèi)容

    - 引入html-webpack-plugin
            `var htmlWP = require('html-webpack-plugin');`
    - 在modul.exports中加入
             plugins:[
                    new htmlWP({
                            title: '首頁',  //生成的頁面標(biāo)題
                            filename: 'index.html', //webpack-dev-server在內(nèi)存中生成的文件名稱读存，自動將build注入到這個(gè)頁面底部为流，才能實(shí)現(xiàn)自動刷新功能
                            template: 'template.html' //根據(jù)template.html這個(gè)模板來生成(這個(gè)文件程序員自己書寫)
                    })
            ]

    5. 運(yùn)行 npm run dev

babel-loader的使用

babel-loader是用來將es6語法轉(zhuǎn)換成es5語法

    1. 安裝babel-loader
    `npm install babel-core babel-loader babel-preset-es2015 babel-plugin-transform-runtime  --save-dev`

    2. 配置webpack.config.js文件

    {
            test: /\.js$/,  // 將.js文件中的es6語法轉(zhuǎn)成es5語法
            loader:'babel-loader',
            exclude:/node_modules/ // 排除node_modules文件夾下的js文件不用被轉(zhuǎn)換
    }

    3. 配置babel的轉(zhuǎn)碼規(guī)則

    babel:{
            presets:['es2015'],  // 配置將es6語法轉(zhuǎn)換成es5語法
            plugins:['transform-runtime'] // 用來解析vue文件
    }

webpack解析vue文件

安裝vue-loader解析.vue文件

    1. 安裝相關(guān)包
    `npm install vue-loader vue-template-compiler babel-plugin-transform-runtime --save-dev`

    2. 配置webpack.config.js文件
    {
            test: /.vue$/,  // 解析 .vue 組件頁面文件
            loader:'vue-loader' 
    }

.vue文件基本代碼結(jié)構(gòu)

一個(gè).vue文件就是一個(gè)vue的組件

    // 1. 組件模板
    <template>
            <div>
                    <!-- 1.0 template主要是放html元素的（html的頁面結(jié)構(gòu)） -->
                    <span v-text="msg" class="red"></span>
            </div>
    </template>

    // 2. 負(fù)責(zé)導(dǎo)出vue的對象
    <script>
            // 負(fù)責(zé)導(dǎo)出 .vue這個(gè)組件對象(它本質(zhì)上是一個(gè)Vue對象,所以Vue中該定義的元素都可以使用)
            export default{  // es6的導(dǎo)出對象的寫法
                    data(){  //等價(jià)于 es5的 data:function(){
                            return {
                                    msg :'hello vuejs'
                            }
                    },
                    methods:{
                            
                    },
                    created(){

                    }
            }
    </script>

    // 3. 書寫組件內(nèi)部的樣式
    <style scoped>
    // scoped表示這個(gè)里面寫的css代碼只是在當(dāng)前組件頁面上有效，不會去影響到其他組件頁面
            .red{
                    color: red;
            }
    </style>

ES6語法使用總結(jié)

    1宪萄、對象的寫法

            es5中對象： {add:add,substrict:substrict}
            es6中對象： {add,substrict}  注意這種寫法的屬性名稱和值變量是同一個(gè)名稱才可以簡寫艺谆，否則要想es5那樣的寫法,例如： {addFun:add}

    2榨惰、在對象中的方法的寫法

            es5中對象： {add:function(){},substrict:function(){}}
            es6中對象： {add(){},substrict(){}}

    3拜英、對象的導(dǎo)出寫法

            es5兩種形式：
            1、module.exports = fucntion (){};
            2琅催、exprots.add =  fucntion (){};

            es6中寫法：
            1居凶、export default{
            add(){}
            }
            2、export fucntion add(){} 相當(dāng)于 將add方法當(dāng)做一個(gè)屬性掛在到exports對象

    4藤抡、對象的導(dǎo)入

            es5: var add  = require('./calc.js');
            es6:
            如果導(dǎo)出的是：export default{ add(){}}
            那么可以通過  import obj from './calc.js'

            如果導(dǎo)出的是：
            export fucntion add(){} 
            export fucntion substrict(){} 
            export const PI=3.14

            那么可以通過按需加載 import {add,substrict,PI} from './calc.js'

    5侠碧、es6中的箭頭函數(shù)的寫法

            箭頭的演變過程：
            //需求：利用函數(shù)實(shí)現(xiàn)倒序排列
            [2,1,3].sort(function(x,y){return y - x;});

            //用箭頭函數(shù)實(shí)現(xiàn) =>讀 goes to
            [2,1,3].sort((x,y)=>{return y - x;});
            [2,1,3].sort((x,y)=> {x++;y++; y - x;});
            [2,1,3].forEach(x=> {console.log(x)});

vue-router集成

    1. 安裝vue-router
    `npm install vue-router --save`

    2. App.vue中書寫跳轉(zhuǎn)鏈接

    <router-link to="/login">登錄</router-link>
    <router-link to="/register">注冊</router-link>

    <!-- 路由占位符 -->
    <router-view></router-view>

    3. main.js中集成vue-router并配置路由規(guī)則

    // 1. 導(dǎo)入vue-router
    import vueRouter from 'vue-router';
    // 2. 將vueRouter對象綁定到Vue對象上
    Vue.use(vueRouter);

    // 3. 導(dǎo)入路由規(guī)則對應(yīng)的組件對象
    import login from './components/account/login.vue';
    import register from './components/account/register.vue';

    // 4.定義路由規(guī)則
    var router1 = new vueRouter({
            routes:[
                    {path:'/login',component:login}, 
                    {path:'/register',component:register}
            ]
            });

    // 5. 利用Vue對象進(jìn)行解析渲染
    new Vue({
            el:'#app',
            // 使用路由對象實(shí)例
            router:router1,
            render:c=>c(App)
    });

mint-ui的使用

    1. 安裝mint-ui
    npm install mint-ui --save

    2. 在項(xiàng)目入口文件main.js中配置mint-ui
    - 導(dǎo)入mint-ui
    import mint from 'mint-ui'
    - 在vue中注冊mint-ui
    Vue.use(mint)

    3. 使用csscomponents
    - 在main.js中導(dǎo)入css樣式
    import 'mint-ui/lib/style.min.css';
    - 在vue的組件中使用mint-ui提供的控件

    4. 使用jscomponents
    - 在vue組件內(nèi)部的script標(biāo)簽中按需導(dǎo)入需要使用的控件
    import {js組件名稱} form 'mint-ui'
    - 在js代碼中使用mint-ui提供的控件

git 常用命令

    git config --global user.name "用戶名"
    git config --global user.email "郵箱賬號"

    // 創(chuàng)建版本庫
    git init
    // 添加文件到緩存區(qū)
    git add ./
    // 提交信息
    git commit -m '說明信息'
    // 推送到遠(yuǎn)程倉庫
    git push -u orign master

    // 查看倉庫狀態(tài)
    git status
    // 查看提交記錄
    git log --oneline
    // 查看版本切換記錄
    git reflog
    // 版本回退
    git reset --hard 版本號

    // 回到主分支
    首先git checkout -b temp
    其次git checkout master

vscode 代碼片段

    "Print to console": {
    "prefix": "log",
    "body": [
        "console.log('$1');",
        "$2"
    ],
    "description": "Log output to console"
},
"Create vue template": {
    "prefix": "vuec",
    "body": [
        "<template>",
        "  <div id='tmpl'>",
        "  </div>",
        "</template>",
        "<script>",
        "export default {",
        "  name: \"${1:component_name}\",",
        "  data () {",
        "    return {",
        "    };",
        "  }",
        "}",
        "</script>",
        "<style lang=\"${2:css}\" scoped>",
        "</style>"
    ],
    "description": "Create vue template"
}

vetur插件配置

    "emmet.syntaxProfiles": {
            "vue-html": "html",
            "vue": "html"
    }

父組件向子組件傳值

    子組件sonComponent
    父組件fatherComponent

    sonComponent:

    1. 定義props數(shù)組對象,數(shù)組對象中的屬性用于接收父組件傳遞過來的數(shù)據(jù)

    new Vue({
            props:['id'], // id即為用于接收父組件傳遞過來數(shù)據(jù)的屬性
    })

    fatherComponent:

    1. 使用子組件時(shí)綁定子組件props中定義的屬性進(jìn)行傳值

    // 這里的id需要和子組件props中定義的屬性一致
    <sonComponent v-bind:id = '需要傳遞的數(shù)據(jù)'></sonComponent>

子組件向父組件傳值

    子組件sonComponent
    父組件fatherComponent

    sonComponent:

    1. 發(fā)布事件

    this.$emit('事件名稱','需要傳遞的數(shù)據(jù)');

    2. 事件的觸發(fā)

    send(){
            this.$emit('事件名稱','需要傳遞的數(shù)據(jù)')
    }

    fatherComponent:

    1. 訂閱事件

    // 父組件中使用子組件(`事件名稱`和子組件中`this.$emit('事件名稱','需要傳遞的數(shù)據(jù)')`里的事件名稱一致)
    <sonComponent v-on:'事件名稱' = '事件處理函數(shù)'></sonComponent>

    2. 獲取數(shù)據(jù)

    methods：{
            事件處理函數(shù):function(data){
                    // data 就是子組件sonComponent中需要傳遞的數(shù)據(jù)
            }
    }

非父子組件傳值

使用event bus(事件總線)：利用一個(gè)共享的vue實(shí)例對象來進(jìn)行數(shù)據(jù)的傳遞. 同時(shí)采用的是 發(fā)布-訂閱者模式

    componentA  componentB進(jìn)行數(shù)據(jù)傳遞(B->A)

    **定義一個(gè)公有的Vue實(shí)例,保證兩個(gè)組件都能夠使用,一般在一個(gè)單獨(dú)的js文件中導(dǎo)出一個(gè)Vue實(shí)例,
    然后在componentA和componentB組件中導(dǎo)入該實(shí)例進(jìn)行使用**

    export default var vm = new Vue();

    componentB：(B組件時(shí)需要傳遞數(shù)據(jù)的組件)

    1. 進(jìn)行事件的發(fā)布(注冊)

    vm.$emit('事件名稱','需要傳遞的數(shù)據(jù)')

    2. 事件的觸發(fā)(用于發(fā)布事件)

    send(){
            this.$emit('事件名稱','需要傳遞的數(shù)據(jù)')
    }

    componentA：(A組件是接收數(shù)據(jù)的組件)

    1. 訂閱事件

    vm.$on('事件名稱',function(data){
            // 此處的data就是 發(fā)布組件中傳遞過來的數(shù)據(jù)
    })

大型復(fù)雜項(xiàng)目中數(shù)據(jù)狀態(tài)管理

復(fù)雜項(xiàng)目中數(shù)據(jù)的傳遞和管理一般不會用到event bus,因?yàn)槿绻嗛喺哌^多,無法準(zhǔn)確的知道數(shù)據(jù)的流向.所以對于大型項(xiàng)目應(yīng)該使用Vue提供的vuex進(jìn)行數(shù)據(jù)管理

官方文檔https://vuex.vuejs.org/zh-cn/

    1. 安裝vuex
    npm install vuex --save

    2. main.js中引入安裝
    import Vuex from 'vuex';
    Vue.use(Vuex);

    3. 配置vuex
    //Vuex配置
    const store = new Vuex.Store({
            // state類似vue實(shí)例中的data 用來存放數(shù)據(jù)
            state: {
                    // 可以設(shè)置一些需要全局使用的數(shù)據(jù)
                    username:'zxx'
            },
            // mutations類似vue實(shí)例中的methods
            mutations: {
                    // 用來處理數(shù)據(jù) 比喻數(shù)據(jù)刪除更新等操作
                    update(state,name){
                            state.username = name;
                    }
            }
    })

    3. 組件中通過this.$store使用

            console.log(this.$store.state.username);

    4. 調(diào)用mutations方法更新數(shù)據(jù)

            // 第一個(gè)參數(shù)是 mutations 中定義的對應(yīng)的方法名 第二個(gè)參數(shù)是需要更新的數(shù)據(jù)
            // 具體更新邏輯在update方法中實(shí)現(xiàn)
            this.$store.commit('update','lxy');調(diào)用update方法更新用戶名
            this.$store.dispath('update','lxy'); // 異步調(diào)用

vue-cli命令行工具搭建spa應(yīng)用

    1、在cmd命令面板中執(zhí)行：npm install --global vue-cli 全局安裝 vue-cli

    2缠黍、利用：vue init webpack projectName(自定義項(xiàng)目名稱) 創(chuàng)建一個(gè)基于webpack模板的新項(xiàng)目

    3弄兜、進(jìn)入到項(xiàng)目名稱文件夾中執(zhí)行 npm install 安裝項(xiàng)目所需依賴

    4、運(yùn)行 npm run dev 運(yùn)行項(xiàng)目

vue項(xiàng)目引入公共js文件

    > 如果需要將公共js文件引入到main.js文件中使用,可以引入后將模塊注入到Vue的原型中

    // main.js
    import common from 'common.js';
    Vue.prototype.$common = common;
    // Object.definePrototype(Vue.prototype, '$common', { value: common });

    // 其他文件使用
    this.$common就是引入的common對象

vue插件開發(fā)

    // common.js文件
    var obj = {
            apidomain:'http://www.lovegf.cn:8899', // 所有數(shù)據(jù)請求的根域名地址
    }
    export default {
            install: function(Vue) {
                    Object.defineProperty(Vue.prototype, '$common', { value: obj });
            }
    }

    // main.js文件
    import common from 'common';
    Vue.use(common);

    // 其他文件使用
    this.$common

vue-router路由攔截

    // 1. 設(shè)置路由規(guī)則時(shí)進(jìn)行攔截
    {
        path: '/userinfo',
        component: userinfo,
        meta: {
            requireAuth: true,  // 添加該字段瓷式，表示進(jìn)入這個(gè)路由是需要登錄的
        },
        beforeEnter: (to, from, next) => {
            if (to.meta.requireAuth) {  // 判斷該路由是否需要登錄權(quán)限
                if (getCookie('session')) {  // 通過vuex state獲取當(dāng)前的token是否存在
                    next(); // 存在就進(jìn)入userinfo
                }
                else {
                    next({
                        path: '/login',
                        query: { redirect: to.fullPath }  // 將跳轉(zhuǎn)的路由path作為參數(shù)替饿，登錄成功后跳轉(zhuǎn)到該路由
                    })
                }
            }
            else {
                next();
            }
        }
    }

    // 2. 登錄成功后跳轉(zhuǎn)路由
    this.$router.push('/userinfo');

vue-router路由模式

    var router = new vueRouter({
            // 設(shè)置路由模式
        mode: 'hash',
            // hash帶錨點(diǎn) history不帶錨點(diǎn)
            // hash可以將頁面放到其他瀏覽器或標(biāo)簽打開 history不可以(服務(wù)端渲染解決)
    })

服務(wù)端渲染

問題:1.單頁面應(yīng)用不利于SEO,因?yàn)樗蠬TML文檔都是由js動態(tài)生成的。2.首次加載速度過慢贸典。

分離css

    1. 安裝插件
    npm install extract-text-webpack-plugin@1.0.1 --save-dev

    2. 修改css-loader配置
    loader: ExtractTextPlugin.extract("style-loader", "css-loader")

    3. plugin配置中使用插件
    new ExtractTextPlugin('app.css'),

分離第三方包

    1. 引入webpack
    var webpack = require('webpack');

    2. 修改入口文件
    entry: {
            app: path.resolve(__dirname, 'src/main.js'),
            // 需要分離的第三方包名寫在數(shù)組中
            vendors: ['vue', 'vue-resource', 'vue-router', 'vuex', 'mint-ui', 'moment', 'vue-preview']
    },

    3. plugin中配置插件
    // 分離第三方包插件
    new webpack.optimize.CommonsChunkPlugin({
            name: 'vendors',
            filename: 'vendors.js'
    }) 

代碼壓縮

    1. html代碼壓縮
    new htmlwp({
            title: '首頁',  //生成的頁面標(biāo)題<head><title>首頁</title></head>
            filename: 'index.html', //webpack-dev-server在內(nèi)存中生成的文件名稱视卢，自動將build注入到這個(gè)頁面底部，才能實(shí)現(xiàn)自動刷新功能
            template: 'template.html', //根據(jù)index1.html這個(gè)模板來生成(這個(gè)文件請程序員自己生成)
            // 代碼壓縮
            minify: {
                    // 刪除注釋
                    removeComments: true,
                    // 刪除空格
                    collapseWhitespace: true,
                    // 刪除空格縮進(jìn)
                    removeAttributeQuotes: true
            }
    }),

    // 2. js代碼壓縮混淆插件
    new webpack.optimize.UglifyJsPlugin({
            beautify: false,
            mangle: {
                    screw_ie8: true,
                    keep_fnames: true
            },
            compress: {
                    warnings: false,
                    screw_ie8: true
            },
            comments: false
    }),
    // 3. 刪除警告
    new webpack.DefinePlugin({
    'process.env': {
            // 注意字符串被引號引起來
            NODE_ENV: '"production"'
    }
    })

問題

• 現(xiàn)在流行的三大框架廊驼，angular,vue,react;希望老師從具體應(yīng)用的角度据过，介紹一下它們的優(yōu)劣惋砂，長處短處，應(yīng)用范圍绳锅，前景西饵，性能等等。

    Angular的適用領(lǐng)域相對窄一些鳞芙，React可以拓展到服務(wù)端罗标，移動端Native部分，而Vue因?yàn)楸容^輕量积蜻，還能用于業(yè)務(wù)場景非常輕的頁面中
  
    // react && vue
    使用 Virtual DOM
    提供了響應(yīng)式（Reactive）和組件化（Composable）的視圖組件闯割。
    將注意力集中保持在核心庫，伴隨于此竿拆，有配套的路由和負(fù)責(zé)處理全局狀態(tài)管理的庫宙拉。
  
    angular 
    框架體系非常大,面面俱到
       
    vue: 雙向數(shù)據(jù)綁定 觀察者模式
    angular: 雙向數(shù)據(jù)綁定 臟值檢測
    react : 單向數(shù)據(jù)流
  
    angular-cli:
  
    npm i angular-cli -g
    ng new project
    ng serve
  

• vue能不能設(shè)置全局的方法，讓每個(gè)組件都能調(diào)用那個(gè)方法

    1. 在一個(gè)js文件中書寫方法進(jìn)行導(dǎo)出
  
    export function fn(){console.log('我是每一個(gè)組件都需要使用的方法')};
  
    2. 在項(xiàng)目入口文件main.js中引入該js文件,并將該方法綁定到Vue的原型中
  
    import fn from './xxx.js'
    Vue.prototypr.fn = fn;
  
    3. 項(xiàng)目中的.vue文件,即其他組件都可以使用該方法
  
    this.fn(); // 我是每一個(gè)組件都需要使用的方法
  

• 項(xiàng)目開始的配置單

    https://git.oschina.net/UniverseKing/vue_coding.git
  

• 如果想寫一些原生的js 的話不知道該怎么寫丙笋，還有如果用less寫css的話怎么引入各組件里面谢澈？

    1. 原生js依舊寫到單獨(dú)的js文件中,然后對其內(nèi)容進(jìn)行導(dǎo)出,在其他組件中使用。
  
    2. 將原生js寫到.vue組件中的script標(biāo)簽中
  

• 各個(gè)包的作用以及怎么用跟我們好好把思路幫我們整理一下御板。

    Vue: 框架核心
    webpack: 用來對模塊進(jìn)行打包的一個(gè)工具(打包就是一個(gè)解析,編譯的過程,解析的就是瀏覽器不能識別的語法)
    webpack-dev-server: 一個(gè)webpack的插件,內(nèi)置了express的node服務(wù)器,用于在開發(fā)階段編譯代碼,實(shí)現(xiàn)熱更新加載等功能
    vue-resource: 實(shí)現(xiàn)vue的ajax請求庫
    vue-router: 實(shí)現(xiàn) vue 的路由庫
    vuex: vue狀態(tài)(數(shù)據(jù))管理庫
    babel: 語法解析器,可以將很多瀏覽器不能識別的語法轉(zhuǎn)換成可識別的es5語法.es6->es5 , vue->es5 
    html-webpack-plugin:一個(gè)webpack的插件,用于webpack編譯時(shí)自動根據(jù)模板生成一個(gè)index.html文件
  

• vue axios請求跟vue-resource有什么區(qū)別锥忿？

    axios使用:
  
    1. 安裝 axios
    npm install axios --save
  
    2. 因?yàn)閍xios不支持Vue.use()方法,所以為了所有組件能夠使用,需要綁定到Vue原型中
    import axios from 'axios';
    Vue.prototype.$http = axios
  
    3. 發(fā)送請求參照vue-resource
    this.$http.get(url).then(function(res){
            // 返回的響應(yīng)數(shù)據(jù)在res.data屬性中
            console.log(res.data);
    })
  
    也可以參照https://github.com/imcvampire/vue-axios配合使用,支持使用Vue.use()
  

• 單元測試和持續(xù)集成是什么

https://segmentfault.com/a/1190000000317146
https://zhuanlan.zhihu.com/p/26701038
http://www.ruanyifeng.com/blog/2015/09/continuous-integration.html

單元測試

    1. 什么是單元（unit）？
    單元就是相對獨(dú)立的功能模塊怠肋。一個(gè)完整的敬鬓、模塊化的程序，都是由許多單元構(gòu)成笙各，單元完成自己的任務(wù)钉答、然后與其它單元進(jìn)行交互，最終協(xié)同完成整個(gè)程序功能杈抢。
    2. 什么是測試数尿？測試就檢測每一個(gè)單元是否符合預(yù)期邏輯，判斷測試對象對于某個(gè)特定的輸入有沒有預(yù)期的輸出惶楼。
    所以什么是單元測試右蹦？就是對構(gòu)成程序的每個(gè)單元進(jìn)行測試。工程上的一個(gè)共識是歼捐，如果程序的每個(gè)模塊都是正確的何陆、模塊與模塊的連接是正確的、那么程序基本上就會是正確的窥岩。所以單元測試就是這么一個(gè)概念甲献，一種努力保證構(gòu)成程序的每個(gè)模塊的正確性，從而保證整個(gè)程序的正確性的方法論颂翼。
    3. 具體到實(shí)際項(xiàng)目中,需要根據(jù)每一個(gè)單元所完成功能的不同區(qū)書寫不同的測試用例

持續(xù)集成

一種軟件工程流程晃洒，將所有開發(fā)人員每天的開發(fā)進(jìn)度慨灭，每天集成數(shù)次到共用主線（mainline）上.

    基本步驟:

    1. 開發(fā)人員根據(jù)功能編寫代碼
    2. 完成某一功能后提交代碼，push 到 git 遠(yuǎn)程倉庫
    3. 通過某些工具配置自動拉取新的代碼,執(zhí)行編譯命令 npm run build球及。
    4. 編譯成功自動部署到服務(wù)器

前端測試框架使用

Karma +　mocha https://github.com/ccforward/cc/issues/58

Karma是一個(gè)基于Node.js的JavaScript測試執(zhí)行過程管理工具（Test Runner）氧骤。該工具在Vue中的主要作用是將項(xiàng)目運(yùn)行在各種主流Web瀏覽器進(jìn)行測試。

Mocha是一個(gè)測試框架吃引，在vue-cli中配合chai斷言庫實(shí)現(xiàn)單元測試筹陵。

• 移動端中第三方接口的實(shí)現(xiàn)，比如支付功能镊尺，地圖功能等朦佩？

    // 百度地圖集成
    http://lbsyun.baidu.com/jsdemo.htm?a#a1_2
  
    // 支付寶集成
    http://blog.csdn.net/qq_34801506/article/details/70906144
  

• 一般評論的一樓都是固定的，我們做項(xiàng)目的時(shí)候1樓是動態(tài)的庐氮，如果要實(shí)現(xiàn)一樓固定該怎么做语稠？

    // 這種邏輯一般由后臺處理,一樓如果固定,肯定也是在數(shù)據(jù)庫中就會有特殊字段標(biāo)明,或者后臺根據(jù)某一些條件
    // 篩選出一條數(shù)據(jù)。后臺返回?cái)?shù)據(jù)時(shí)就排好序,放到數(shù)組第一條就行了
  

筆記訪問地址http://192.168.16.39:9999/

https://git.oschina.net/UniverseKing/react_douban.git

https://git.oschina.net/UniverseKing/vue_system.git