初步学习vue框架

初始vue

一：我们在页面上修改数据，会触发页面的重排、重绘事件、并且需要查找DOM节点，并对节点进行一个DOM操作

二：因为页面节点过多，现代业务需求复杂化，需要对页面节点进行频繁操作，造成的性能消耗

三：这个时候我们就创建了虚拟DOM节点

虚拟DOM就是一个普通的对象，这个对象对我们的页面节点进行了简单的描述，一般会包含几个属性（tag，props，children），这样我们每次更新多个节点或属性的时候，就只会进行一次DOM操作（需要把数据与我们页面的数据（用户操作对象，VDOM拷贝对象）进行一个双向绑定）

进行vue的算法的时候

定义一个双向绑定对象，vue会查询VDM，找到对应的节点，然后更改，渲染

查找VDM的这个过程称为：（Virtual dom 更新） DIFF算法

vue和react都是使用DIFF算法实现的VDOM更新， anqular是使用脏检查机制

在vue中，查找节点的方法为：从两边到中间的方法（使用快排的一个思想）
在vue中，查找节点的方法为：按顺序逐个查找

在vue中，会把渲染后的VDOM进行一个缓存，用户修改的是一个拷贝对象，当拷贝对象发送变化后，进行对比查找，然后更新护具

虚拟DOM(类似于文档碎片)

一个虚拟DOM描述对象，必须包含标签名字，必须包含子节点，属性

function render(){
    var node = document.createElement(VDom.tag)
    .....
}

vue使用

//因为vue对象需要我们传值进去，还有它自己已经有定义一个方法，应该是一个class对象
new Vue({
    //传递一个DOM id 即我们vue的一个作用域（一般用id，以为id的优先级高于class，写css的尽量用class） 需要传一个元素
    el:'#root',
    //定义一个方法，返回了一个数据对象,类似于class语法糖的get/getters方法
    data:{
		title:'标题内容',
	}
})

v-text：内容绑定语法  类似于innerText(区分不是innertext)
一：使用{{dataname}}
二：使用v-text绑定命令  <sub v-text="subTitle"></sub>
v-text的优先级高于{{}}，同时使用的话会覆盖{{}}

v-model：需要在能够有值改变功能的元素上使用：input、textarea、select等
（大多数情况用于表单）
可以使用一个装饰器（lazy惰性监听）
v-model 中如果没有带lazy，应该是监听的oninputEvent事件
v-model.lazy 带了lazy，类似于监听元素的onchangeEvent事件（失去焦点的时候就会实现双向绑定）
v-model.number  只能输入数字（小小的bug 如果输入框中的第一个字符不是数字，不能进行监听更正）

v-html：给元素添加html内容的指令：v-html，类似于innerHTML

v-if 这个指令的元素，在条件为false的情况下，页面元素不会挂载到DOM节点上面
v-else-if必须在v-if后使用
v-else 不需要加条件，并且需要在v-if后用（可以和v-if v-else-if配合使用）

v-show
使用v-show来实现页面切换展示
v-show的dom元素会挂在DOM树上，使用的是display样式属性来显示或隐藏元素

面试题：v-if 和 v-show 哪个好？好在哪里
这两个指令的使用场景不一样，如果是页面上的元素直接隐藏并且不会再展示处理/切换频率比较低，使用v-if。否则使用v-show。因为v-if为创建元素

v-for指令(遍历指令，遍历渲染) 需要给遍历的数组元素定义一个独立标识（必须在当前数组中唯一）
v-for的实现与foreach实现一致
vue遍历中定义为key（遍历的时候只需要找到key相同的，就找对应的拷贝对象）
使用方式：v-for='(item,index) in list' key = 'index'

v-on:click  给元素添加一个事件，使用v-on指令，跟上我们对应的事件名字(v-on可以用@来代替)

在页面里，所以的方法都需要定义在vue的methods里面
例methods:{
	//在没有传递参数的时候，第一参数为：事件对象
	//在vue中，定义的方法传值中，如果需要传递事件对象，使用$event
	//不能使用箭头函数来定义method方法，this会改变指向，指向window 23
	
	addEvent(){
		console.log(1)
		}
	}

v-bind:  绑定一个属性，可以绑定任何数据，根据数据来变化 可以用 : 来代替

vue中class运行传递一个数组或对象