编 写：袁 亮
时 间：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 () {
}
// 注释文字