章节： 模板语法 > 组件 > 接口调用 > 路由 > webpack 模块化 > 脚手架 > 实战项目
重点：生命周期钩子
vue的实例
var vm = new Vue({ // 选项 })
有哪些参数：
el ：元素的挂载位置
data：数据模型
methods: 事件处理定义的方法，方法里边要访问vue实例的数据，使用 this 关键字 ， this.msg
模板语法
插值表达式：
{{ vlue }}
指令：
指令的本质就是自定义属性，属性的意思就是 form标签有 action属性。
指令的格式：以 v-开始，如： v-cloak 。v-cloak 用来解决闪动问题，就是刷新时显示 {{}} 插值表达式的符号。
数据响应式：
当数据内容改变，网页内容也改变，v-once 取消这样的效果，减少开销
双向数据绑定：
v-model ，用于表单，当表单里边的数据改变时，vue 的 data 数据也随之改变， 底层原理是v-bind 和 v-on 实现的
事件绑定
v-on:click 缩写为 @click
事件函数的调用：
1. 事件直接绑定函数名称，那么默认会传递事件对象作为函数第一个参数。
<button v-on:click="say">Say hi</button>
2. 如果事件绑定函数调用，那么事件对象必须作为最后一个参数传递，并且事件对象的名称必须是 $event
<button v-on:click="say('what' , $event )">Say what</button>
事件修饰符：
<!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> 外面再有个事件，阻止调用外面的事件 ，<div @click="do"> <a v-on:click.stop="doThis"></a> </div>
<!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form>
按键修饰符：对按键进行监听 <input v-on:keyup.enter="submit"> 按下回车键时，调用函数 submit
样式绑定：
v-bind :class 缩写 为 :class 。 <div v-bind:class="{ active: isActive }"></div>
对样式的动态处理， active 为css样式名，如果 isActive 为 true 该样式就会显示。
属性绑定：
v-bind:css 和 v-bind:style 缩写为 :css
分支循环结构：
v-if v-else-if v-else 控制元素是否渲染到页面。
v-show 控制元素是否显示（已经渲染到界面） 相当于 style="display：none",修改值 true 或者 false 。
v-for
<ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul>
提高循环的性能 <li :key=" id、index 或者 能和其他li区分的值 " v-for="item in items"> {{ item.message }} </li>
数组的更新和检测： 变异方法：是响应式的，修改后页面内容也会改变；替换方法：修改后页面内容不会改变； 其他响应式方法： Vue.set(vm.items, indexOfItem, newValue) vm.$set(vm.items, indexOfItem, newValue)
常用特性概述： 表单操作；自定义指令；计算属性；侦听器；过滤器；生命周期
表单操作： 对四种表单的基本操作；表单修饰符 v-model.number 将符号换为数字 <input type="text" v-model.number="age"> .trim：去掉开始和结尾的空格 .lazy:将input 转化为 change （失去焦点才会触发数据双向绑定事件）
自定义指令：
// 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } })
局部指令：只能在当前的页面使用，在vue的实例定义这一个数据（类似data、methods）
directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } } }
计算属性：
计算属性与方法类似，不同的是方法没有缓冲，计算属性有缓存，只要message没有发生变化，多次访问reverseMessage都会返回之前计算的结果。方法每次都会执行函数。
var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } })
侦听器：侦听一个数值是否发生变化，用途： 注册用户时，判断用户名是否在
var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } } })
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<div id="app">
<div class="tab">
<span>用户名：</span>
<input type="text" v-model.lazy="name">
<span>{{tip}}</span>
</div>
</div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" >
/*
侦听器
1、采用侦听器监听用户名变化
2、调用后台进行验证
3、根据结果调整提示信息
*/
var vm = new Vue({
el: '#app',
data:{
name: '',
tip: ''
},
methods:{
checkName:function(uname){
var that = this ;
setTimeout(function(){
if(uname == "admin"){
that.tip = "用户名已存在";
}else{
that.tip = "用户名可以使用";
}
},1000);
}
},
watch: {
name:function(val){
//调用方法验证用户名是否正确
this.checkName(val);
this.tip = "正在验证...";
}
}
});
</script>
</html>
过滤器： 格式化数据，将日期格式化为指定日期格式，将字符串首字母大写。
生命周期钩子：
挂载：1、beforeCreate 2、create 3、beforeMount 4、mounted <这个方法被调用，表示实例已经创建完成，页面模板内容已经存在
更新：1、beforeUpdate 2、updated
销毁：1、beforeDestroy 2、destroyed
。