Vue最简洁最全的入门教程
最近在学vue，主要从如下几个方面学习：html
•环境安装vue
•模板语法（怎么写）node
•指令web
•选项、生命周期（写在哪儿）chrome
•vuejs-devtools（怎么调试）npm
1.Vue.js 简介
Vue.js是一套构建用户界面的UI框架，它专一于MVVM模型的ViewModel层，经过双向数据绑定把View层和Model层连接起来。api
2.Vue.js 特色
•模板双向绑定机制数组
•利用指令（directive）对DOM进行封装缓存
•组件化设计思想等框架
3.Vue.js 安装
•NPM
•命令行工具 (CLI)
安装node环境
npm install -g @vue/cli
vue create hello-world
npm install
npm run serve
4.模板语法
5.指令
•v-text=={{message}}
•v-html <div v-html="message2"></div>
•v-show：<h1 v-show="ok">Hello!</h1>
•v-if：<div v-if="type === 'A'">
•v-else：<div v-else>
•v-else-if：<div v-else-if="type === 'B'">
•v-for：<div v-for="(item, index) in items"></div>
•v-on==@：<button v-on:click="doThat('hello', $event)"></button>
•v-bind==：<img v-bind:src="imageSrc"> 缩写<img :src="imageSrc">
•v-model：<input v-model="message" placeholder="edit me"><p>Message is: {{ message }}</p>
6.Vue事件
•V-on：监听事件
•自定义事件
组件内抛出：this.$emit('myEvent')
外部监听：<my-component v-on:myEvent="doSomething"></my-component>
•将原生事件绑定到组件
<base-input v-on:focus.native="onFocus"></base-input>
7.特殊特性
•Key：有相同父元素的子元素必须有独特的 key，主要用在v-for
•Ref：<input ref="input">被用来给元素或子组件注册引用信息
•Slot：用于标记往哪一个具名插槽中插入子组件内容
8.选项 / 数据
•Data： Vue 实例的数据对象
•Props： props 能够是数组或对象，用于接收来自父组件的数据
•Computed：计算属性的结果会被缓存，除非依赖的响应式属性变化才会从新计算
•Watch：一个对象，键是须要观察的表达式，值是对应回调函数
•Methods：放置普通函数的地方
9.生命周期
beforeCreate：此时data、method和$el均没有初始化
created：此时data和method初始化完成，可是DOM节点并无挂载
beforeMount：编译模板，而且将此时在el上挂载一个虚拟的DOM节点
mounted：编译模板，且将真实的DOM节点挂载在el上，可作数据请求
beforeUpdate：在数据有更新时，进入此钩子函数，虚拟DOM被从新建立
updated：数据更新完成时，进入此钩子函数
beforeDestory：组件销毁前调用，移除watchers、子组件和事件等
destoryed：组件销毁后调用
10.混入
11.组件
12.调试
13.一些学习网站和参考资料
•https://wiki.imooc.com/vue/vuejsintroduce.html
•https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd