vue基础

• vue基础
• vue基础API_下半部分
• v-for指令 key

使用v-for的时候，需要提供一个key属性，且保证key唯一不可变，vue规定的
虚拟DOM概念
	虚拟DOM可以提供更新的性能
	虚拟DOM实质就是一个普通的js对象，保存DOM对象最关键的一些信息
	如何工作
		模板生成虚拟DOM
		虚拟DOM生成真实的DOM
		数据发生改变
		生成新的虚拟DOM
		对比新旧虚拟DOM
			diff
		根据新旧虚拟DOM的不同去更新真实的DOM
			重绘
			回流

• diff算法

 如果根元素变了
      	直接删了重建
      如果根元素没变但是属性变化
      	元素复用，修改属性
      父元素不变，子元素发生变化

•   	无 key
  		就地更新
  		根据下标，一个一个对比子元素的虚拟DOM
  		问题：如果子元素的顺序发生改变，性能不高
  

•   	有key
  		根据key进行复用
  		子元素的顺序就算发生了改变，也没影响
  	v-bind对于样式增强
  		对于style和class,v-bind进行的增强，值不仅仅可以是字符串，还可以是对象和数组
  	品牌管理半成品——列表渲染功能
  	过滤器，与data同级
  		作用：对数据进行格式化，本质就是一个方法，把原来的变量值作为过滤器的实参进行传参，返回格式化后的值
    	使用
    		<p>{{msg | filterA}}</p>
    			
    		<P :title="title | filterB">
    	定义过滤器及过滤器的分类
    		局部过滤器有多个，所以filter加s
    			filters: {  过滤器名字(input) { return ... }  }
    		全局的过滤器只有一个
    			Vue.filter(‘过滤器的名字’,  function(input) { return ...})
    	使用多个过滤器
    		{{ msg | filterA | filterB }}
    	过滤传参数
    		{{ msg | filterA(arg1) }}
    		filters: {  filterA(input, arg1 = 0) {} }
    	完整品牌管理
    计算属性
    	写在computed中的属性就叫计算属性， computed中的是需要经过逻辑运算的
    	注意点
    		1. 计算属性写在computed中
    		2. 计算属性写法上是一个函数或者是一个对象，在使用时是以变量的方式进行使用
    		3. 计算属性使用的时候不能加()
    	语法
    		获取
    			computed: { full() {return ...} }
    		获取且修改
    			computed: { get(){}, set(value){} }
    	缓存
    		计算属性只会计算一次，就会把结果存储起来，多次使用计算属性，只需要计算一次
    		如果依赖的属性发生了改变，计算属性会重新计算一次
    侦听属性
    	需要监听某个属性是否发生改变，就需要使用watch
    	语法
    		简单类型
    			watch: {  msg(value) {} }
    		复杂类型
    			watch: {  friend: { deep: true, handler(){}, immediate: true} }
    品牌管理完成