vue

一，vue
    1，类名绑定
        v-bind:class="{类名：表达式}"
        当表达式为真，继承类名。为假不继承
        简写：
            :class ="{}"
        所有的v-bind都可以被简写为一个冒号
        v-bind:disabled = "表达式"
        当表达式为真，当前元素不可用，反之可用
        简写：
        :disabled = "表达式"
    2,事件绑定v-on
    v-on:click 单击事件
        简写：@click=''
            v-show='true|false'元素是否显示相当于display：none|block
    3,v-if v-else
        v-if 和 v-show 是兄弟关系，可以做到相似的功能
    注意：
        v-if和v-else两者之间不能有其他元素，否则v-else失效
    4,键盘事件
        @keyup.ctrl.alt.shift.enter=""
    5,v-for
        v-for="(item,index) in list"
        v-for="(item,index) of list"
        使用of最近js的迭代器语法
        当使用v-for循环一个常数时：
            vue1.0版本是从0开始算的
            vue2.x版本是从1开始算的
        卸载vue2.x：npm uninstall --save-dev vue
        安装vue1.x:npm install --save-dev vue@1
    6,v-bind 
        v-bind:class="{cur:isShow}"
        :class="{cur:i%2==0}"
        :src="./images/0.jpg"
        :class='[ss,{cur:i%2==0,cc:isShow}]'
        :style="{color:red,background:'rgb(230,33,100)'}"
    7,计算属性
        computed
            计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 a还没有发生
            改变，多次访问 pingfang 计算属性会立即返回之前的计算结果，而不必再次执行函数。
            我们为什么需要缓存？假设我们有一个性能开销比较大的的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们
            可 能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A ！如果你不希望有缓存，请用方法来替代。

二，配置.vue 组件和组件之间的嵌套
    1，配置.vue组件
        组件：组件是vue.js中最强大的功能之一，组件可以扩展HTML元素，封装课重用代码，在较高的层面上看，组件是自定义元素，
        vue的编译器为他添加了特殊功能。在有些情况下，组件也可以表现为用js特性 进行扩展原生的HTML元素
        所有的vue组件同时也是vue的实例，所以可以接受相同的选项对象，并且提供相同的生命周期钩子
        1）安装vue-loader这个依赖能够翻译.vue
            命令：cnpm install --save-dev vue-loader
        2）安装css-loader 和 vue-template-compiler
        命令：cnpm install --save-dev css-loader vue-template-compiler  
        3)在webpack.config.js中配置信息
            在rules中添加一条：
                  {
            test:/\.vue$/,
            loader:'vue-loader',
            options:{
                loaders:{
                    // stylus语法   
                    stylus:'vue-style-loader!css-loader!stylus-loader'
                }
            }
        }
注意：如果vue-loader 是15版本以上的，需要配置
    1）头部引入
        const VueLoaderPlugin = require('vue-loader/lib/plugin')
    2）在导出配置中加入：
        plugins:[
         new VueLoaderPlugin()
        ]
    4)创建组件
        创建app.vue
    5)调用组件
        方法1：
            import Vue from "vue"

            import App from './app.vue'

            var app = new Vue({
                el:"#app",
                render:h => h(App)
            })
             <div id="app"></div>
        方法2：
            import Vue from "vue"

            import App from './app.vue'

            var app = new Vue({
                el:"#app",
                components:{
                    App
                }
            })
             <div id="app">
                <App></App>
             </div>
    注意：在vue2中，组件中的元素不允许出现片段，要将所有元素包裹在一个元素内部
    6)组件内部配置
        style:样式
        template：html标题 
        script：数据+逻辑
            export default{
                data(){
                    return {
                        //这里才是真正的数据
                        name:'lisi',
                        age:23
                    }
                }
            }
            组件中的数据固定写法：
                data不在是对象，而是一个函数，函数的返回值是一个对象，就是我们要的数据
            7)stylus 样式配置
                1）下载stylus依赖
                    cnpm install --save-dev stylus
                2)在webpack.config.js 中配置
                    将：
                          {
            test:/\.vue$/,
            loader:'vue-loader',
            options:{
                loaders:{
                    // stylus语法   
                    stylus:'vue-style-loader!css-loader!stylus-loader'
                }
            }
        }
        改为：
            {
                test: /\.stylus$/,
                use: ['style-loader', 'css-loader', 'stylus-loader']
            }
            , {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
            3）在组件中将style标签中加入<style lang='stylus' scoped></style>
                用于开启stylus语法
                scoped：发现在样式中出现的一个data-v-3319ebec 特征码，这个编码是独一无二的，可以防止多个组件之间的样式冲突