vue note

  

const path = require('path');
module.exports = {
    entry:{ 入口
        main:'./index.js'
    },
    output:{ 出口
        path:path.join(__dirname,'../','code','dist'), /將全部的文件統一輩子成到dist目錄下
        filename:'build.js'
    },
    module:{
        loaders:[{  
                test:/\.css$/,
                loader:'style-loader!css-loader!autoprefixer-loader'
            },
            {   /   less-loader 依賴於less
                test:/\.less$/,
                loader:'style-loader!css-loader!autoprefixer-loader!less-loader'
            },{   /ttf->   在代碼中聲明瞭引入mui.css ->  引入了ttf
                test:/\.(ttf|jpg|png|svg)$/,
                loader:'url-loader',  /依賴file-loader
                },{
                    test:/\.js$/,
                    exclude:/node_modules/,
                    loader:'babel-loader', /babel-loader依賴babel-core
                    options:{
                        presets:['es2015'], /babel-preset-es2015
                        plugins:['transform-runtime'],/babel-plugin=transform-runtime
                    }
                    }]
    },
    plugins:[
        new htmlwebckplugin({
            /以誰作參照
                template:'./src/index.html' /自動補上引入出口文件
            })
    ]

}

#### vue介紹
angular 雙向數據綁定 髒檢查 $watch
* 核心 組件化 -> 自定義指令也能夠認爲是組件(讓其不太依賴於存在的環境，儘可能獨立，經過參數)
* 雙向數據綁定 ->  數據劫持 ES5 中的 Object.defineProperty(obj,'name',{
    //設置
    set:function(){   obj.name ='1234';//觸發該函數
        //作相關操做,(改變DOM中跟name掛鉤的元素的value)
    },
    get:function(){  //obj.name 就會觸發

    }
})
* vue支持到IE8以上
* Weex 讓vue編寫的代碼可以運行到PC、ios、Android上
* vuex 在vue中提供管理全局數據的方式的一個插件(相似於angular中的userService)
* 14年2月出來的  截止到20170615  56.7k start
* 語法糖 尤雨溪


#### 漸進式
* 跟大而全的全家桶對立，
* 能夠讓企業一點一點的嘗試使用，雙向數據綁定、路由、組件（引庫的方式）

#### 數據流
* 從頁面的改變影響內存 ，單向數據流
* 從內存的改變影響頁面 ，單向數據流
* 二者都具有，雙向數據流( 數據劫持-> ES5 -> Object.defineProperty(obj,paramName,{set:fn,get:fn}))


#### 解決閃爍問題
* 在引庫的方式中存在閃爍問題，在單文件方式中不會有該問題，提早編譯好html內容
* v-text 插入innerText

####  vue中經常使用的v-指令演示
* 經常使用指令 ` 空串的bool就是false`
* v-text 將值插入到元素的innerText中，只能是雙標籤
* v-html 將值插入到元素的innerHTML中，只能是雙標籤
* v-if 是否插入元素
* v-show 是否顯示元素
* v-model 雙向數據流，其值就是數據模型(M)

#### class結合v-bind使用
* v-bind 很是有用,給元素的屬性賦值
* 經過v-bind能夠讓vue中的對象進行運算，並將最終的動態結果賦值該該屬性
* 字符串的賦值，有字符串是true,空串表明false
```html
    <span v-bind:class="isRed?'red':'blue'"></span>
    簡寫形式:class
    <span :class="isRed?'red':'blue'"></span>