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>