月度归档： 2017年6月

编   写：袁 亮
时   间：2017-06-28
说   明：Vue开发快速起步

一、工作模式
    1、类似jquery，作为类库
    2、单文件组件方式
        开发环境
            node hot reload
        生产环境
            静态html
            任意部署在webserver下即可
    
二、安装起步
    1、环境安装
        node npm vue vue-cli 等安装
    2、项目脚手架安装
        vue init webpack {project_name}
        cd {project_name}
        npm install
            ps：vim config/dev.env.js 修改开发环境端口，默认8080很有可能被占用
        npm run dev
            放在后台运行：nohup npm run dev & 
    3、访问
        http://192.168.0.249:8081
    4、IDE
        webstorm
        sublime
        vscode
    5、其他模块安装
        vuex的安装
            npm install vuex --save
        修改package.json
    6、编译
        npm run build
        
三、开发环境访问流程
    1、index.html
    2、src/main.js
        类似php框架的index.php
    3、src/App.vue
    4、router/index.js
        规则匹配，进行转发
        路由处理
    5、components/Hello.vue
        具体处理逻辑
        可以包含其他的组件
        
四、组件开发
    1、类库文件引入
        1.1 引入
            import
                必须在最开始的地方加，不能放在条件判断等
            require
                可以在条件判断里
        1.2 类库导致
            export default
            module.exports
    2、组件引入
        2.1 html结构
            
            
        2.2 组件源
            import modalMember from '@/components/modalMember.vue'
        2.3 注册？
            components: {
                modalMember
            }
    3、组件数据
        3.1 父组件数据传递 props
            props验证
            值传递 引用传递
            单向数据流
        3.2 组件本身数据 data
        3.3 组件计算属性 computed
            method的区别，缓存，依赖
            getter
            setter
        3.4 数据监听 watch
            vs computed
            异步、开销大的时候，用watch
    4、模板语法
        4.1 文本
            {{}}
            v-text
            v-html
            v-once
                不更新
        4.2 属性
            v-bind:{name}
            简写 :{name}
            :class 注意注意
        4.3 条件属性
            v-if
            v-else-if
            v-else
            v-show
        4.4 循环 v-for
        4.5 事件
            v-on:click
            @click
        4.6 输入数据双向绑定
            v-model
            修饰符
                .lazy
                .number
                .trim
        4.6 注意事项
            a. 以下对数组操作，不会触发视图变更
                当你利用索引直接设置一个项时
                当你修改数组的长度时
            b. 视图更新队列
                数据变更，视图更新会放入到更新队列，异步更新
                如果想更新完进行回调，可以采用Vue.nextTick(callback)
                ps:监听数据变更，改版dom的滚动条位置计算等，数据更新了，但是dom还没有
    5、组件方法
        5.1 method
            获取绑定的数据
                e.currentTarget.dataset.index (数据绑定在父元素的时候用这个)
                e.target.dataset.index (数据绑定在当前元素的时候用这个)
            event
            事件修饰符
                .stop
                .prevent
                .capture
                .self
                .once
            键值修饰符
                事件
                别名 自定义
                修饰键
        5.2 directive 自定义指令(不能直接操作dom，所以需要自定义指令)
            bind
            inserted
            update
            componentUpdated
            unbind
    
    6、生命周期
        beforeCreate
        √ created
        mount
        beforeMount
        mounted
        beforeUpdate
        updated 
        beforeDestory
        destroyed
    
五、状态管理 Vuex
    1、解决什么问题
        一份数据，很多个组件需要使用
        这些组件不仅仅是父子关系
    2、安装
        npm install vuex --save
    3、项目使用（全局store）
        import store from './store/index'
        
        new Vue({
          el: '#app',
          router,
          store,
          template: '',
          components: { App }
        })
    4、store介绍
        4.1 state
            类似组件的data
        4.2 getters
            类似computed计算属性
            setters： 没用过
        4.3 mutations
            类似method
            ps：mutations之间不能直接调用，不确定是否可以这么做
        
六、网络请求 vue-resource
    1、安装
    2、使用
        import VueResource from 'vue-resource'
        Vue.use(VueResource)
        ps:作为插件引入
    3、需要重新封装，跟常规的ajax请求不大一样
        3.1 api地址区分环境
        3.2 统一做鉴权等
    
七、语法注意
    1、var 改用let 或者const
    2、缩进 2个字符
    3、不能有;号
    4、空格
        function () {
        }
        // 注释文字