说明

这一部分是针对于vue1进行的一些补充。这是看了视频VUE全家桶做的一些补充。

声明式编程：
- 模板的结构和最终显示的效果基本一致

模板语法

指令

v-cloak背后的原理：先通过样式隐藏内容，然后再内存中进行值的替换，替换好以后再显示最终的结果
v-text 相比较v-cloak更加简洁
v-html 不安全，本站内部数据可以使用，来自第三方数据不可使用
v-pre 显示原始信息，跳过编译过程

数据响应式

理解数据响应式
- html5中的响应式（屏幕尺寸改变导致样式的变化）
- 数据的响应式（数据的变化会导致页面内容的变化）
什么是数据绑定
- 数据绑定：将数据填充到标签中
v-once只编译一次
- 显示内容之后不再具有响应式的功能
- 应用场景：如果现实的信息后续不需要修改，这样可以提高性能（如果使用方法会不停的监听）

事件

如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称是$event
事件默认是由冒泡的

v-model的底层实现原理：

<input v-bind:value="msg" v-on:input="msg=$event.target.value">

//另一种方法
<input v-bind:value="msg" v-on:input="handle">
{
	data:{
		msg:''
	},
	methods:{
		handle: function(event){
			//使用输入域中最新的数据覆盖原来的数据
			this.msg = event.target.value
		}
	}
}

样式绑定

循环

v-for循环中key的作用：帮助vue区分不同的元素，从而提高性能。
v-if和v-for可以结合使用

Vue常用特性

表单操作、自定义指令、计算属性、监听器、过滤器、生命周期

表单操作

input单行文本
textarea 多行文本
select 下拉选择框
radio 单选框
checkbox 多选框

表单修饰符

number 将输入的转化为数值
trim 去掉开始和结尾的空格
lazy 将input事件转换为change事件（change事件是要失去焦点的时候才会触发，而input只要是有变化就触发）
- 一般用来注册用户名，输入完了再去验证

lazy事件可以用来验证用户注册名字，是否被占用

computed VS methods

computed 是基于依赖的，具有缓存特性，优化内存特性
methods方法不进行缓存

侦听器

数据一旦发生变化就通知侦听器所绑定方法。
应用场景：数据变化时执行异步或开销较大的操作
是对数据本身添加一个方法，来对其进行监听改变，而计算属性是添加一个格外的方法来返回一个方法结果

案例：验证用户名是否被注册
步骤：

采用侦听器监听用户名的变化
调用后台接口进行验证
根据验证的结果调整提示信息
使用表单的lazy修饰符来改变事件触发时间

methods: {
	checkName: function(uname){
		//调用接口，但是可以调用定时任务的方式模拟接口调用
		var that = this
		setTimeout(function(){
			//模拟接口调用
			if(uname == 'admin'){
				that.tip = '用户名已经存在，请更换一个'
			}else{
				that.tip = '用户名可以使用'
			}
			},2000)
	}
},
watch: {
	uname: function(val){
		//调用后台接口验证用户名的合法性
		this.checkName(val);
		//修改提示信息
		this.tip = '正在验证'
	}
}

过滤器

作用：格式化数据，比如字符串格式转化为首字母大写，将日期格式转化为指定的格式等。
插值表达式和绑定属性都可以使用
可以传参，第一个是默认参数指向这个元素，第二个就可以是传过来的参数。

生命周期

挂载（初始化相关属性）
- beforeCreate
- created
- beforeMount
- mounted（模板内容已经填充完毕，一般用于从后台获取数据挂载到模板中，已经挂载到实例上）
更新（元素或组件的变更操作）
- beforeUpdate
- updated
销毁（销毁相关属性）
- beforeDestroy
- destroyed

补充(数组相关API)

数据的变化会影响页面的变化（通过编译方法来实现的）。而替换数组的方式的话就需要对原始数组进行赋值来实现页面数据的更新。也就是说使用替换数组的方法，都不会影响原始数组的数据，页面也就不会进行改变，要想改变页面只有重新将新的数组赋值给原始数组。

变异方法（修改原有数据）
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
替换数组（生成新的数组）
- filter()
- concat()
- slice()

数组的响应式变化

用索引修改数组的方式不是响应式的
直接在data中的数据添加属性或者添加值都不是响应式的，也就是页面不会随着该数据的改变而改变，所以以下两个API既可以对数组进行响应式添加数据也可以对数据进行响应式添加数据
修改响应式数据：

Vue.set(vm.items,indexOfItem,newValue)
vm.$set(vm.items,indexOfItem,newValue)
- 参数一标识要处理的数组名称
- 参数二标识要处理的数组索引
- 参数三要处理的数组的值