Vue学习杂记（一）——Vue语义（真杂记）

---

    为了更加直观，代码只展示关键代码，换句话说，也就是不包含Vue文件的引入以及具体的Vue结构。

    一年前，从微信小程序入手，到现在基本都是在接触MVVM模式，虽说微信小程序需要使用setData来回应渲染，但是与Vue相比，二者还是比较相似的。Vue最大的优点就是数据的双向绑定，可以省去很多不必要的监听，能够更加方便程序员专注于代码逻辑。给出零散知识，希望那些解决我疑惑的知识点能够帮助到你：
（1）let app=new Vue（）其实是在构建Vue实例,可以使用app.$el（el不是什么奇怪的符号，知识htmlElement中节点单词的前两个字母el）获取对应的dom对象，防止到data里面的数据都会产生双向绑定的特点，如果是临时构建的节点tempObj,将tempObj赋给data，那么使用app.tempobj可以直接获取到该临时节点，并且使用app.tempObj对于该节点的修改也将呈现出双向绑定的特点；一般建议都将数据放到data里面，防止项目旁大了难以维护（这也是JQuery老了的一部分原因）；

（2）el挂载可以使用class或者是id，也可以是tag,对于tag与class只对第一个（从上到下最先识别到的那个dom）有用；

（3） filters 可以用在模板的后面，例如给出插值语法 {{nowDate | myfilter(param2)）}} ,在filters里面实现具体的 myfilter 。有点意思的是，不要觉得我写错了， filters 里面的具体的过滤器的第一个参数默认就是 | (这个其实就是“管道符”，一个名称)。 myfilters 里面设置的参数都是从第二个开始计算的。

（4）mouted用于数据的监听，默认提供为get方法，另外也可以自己添加set方法；不过set方法用的比较少（在手动赋值的时候触发），mouted对于数据的处理主要是为了弥补filter处理的不足，用来处理更加复杂的数据格式化处理，比如给出场景：拼接一个人的 firstName 与 secondName，filter只能处理位于管道符前面的数据，杠精说filter可以多次过滤,也能实现这个功能，而一般可能需要处理的变量并没有挨到一起，在每一个变量的地方都安插一个filter就显得有点憨憨的了。

（5）beforeDestory生命周期函数可以用来setInterval清除的定时器；

（6）v-bind，v-bind可以用来数据绑定，同样存在对应的语法糖机制。例如v-bind:href="link"可以直接使用 :href来代替（src同样如此），v-on可以使用@来代替，这些写法在uni-app中可见一斑。

（7）变量不能在实例化Vue对象的data和computed属性中同时出现里面；

（8）对应class的处理，相比于原始class方法，Vue提供了更多灵活的方式，包括“:class="mystyle : isActive"”(利用 isActive 来控制是否启用前面的class,也就是说当isActive为true的时候才启用myStyle，否则将不会解析myStyle)；:class = "isSelect ? 'default' : 'active' "利用三目表达式构建class, ；更加灵活的:class="changableStyle "可以直接给class设置一个变量，使用的时候可以随意给class切换样式；处理以外，还有样式数组的使用，eg. :class="['style1','style2']"(当然结合使用三目运算符也是可以的)；还有一种也得说明一下，:class=" 'icon-'+iconKind"(字符串拼接方法)，属实起飞；

（9）节点样式，这个可能对于习惯写class的小白来说是个新概念。其实很好理解，就是将 style 样式使用节点存储，将视图也交给数来处理，使用方法为：:style="myStyle",在data里面世界给出类似于如下所示的代码：

myStyle={
 	color:"#920484",
 	border:"1px red solid"
 }；

（10）v-cloak ，其特点是当Vue实例编译结束之后该属性就会被移除。实际使用较少，原因很简单，现在都是5G时代了。v-cloak是为了进一步强调友好性。由于网速等原因，{{message}}里面的数据还没有来得及渲染，让用户看到了赤裸裸的代码，很是尴尬。v-cloak主要使用情景如下：

[v-cloak]{
	display:none;
}

（11）v-pre 对应原本需要处理的插入文本将不会解析，直接将变量名连同文本插入符号显示出来; v-once ,反数据的双向绑定，只对数据的第一次绑定有效，之后数据改变依然不会影响到视图的渲染情况，需要注意的是v-once的影响会穿透到下一级节点；
（12）v-model， Vue中v-model的出现使得对于表单的处理更加智能，不用再使用@input等函数来监听表单值的变化了，换句话说，现在就不用再憨憨的监听表单了，省得写一堆冗杂的监听代码。需要注意的是，v-model方法绑定的数据在监听中文输入法输入的时候有一个细节，在中文还没有选择的时候不算数据输入，如果一定要监听这种输入状态可以使用@input函数来加快v-model的渲染；在radio中，如果v-model与value同时使用，当目标被选中的时候，radio里面的value值会被赋值给v-model。对于组合的select中的option，v-model首先会匹配option中的value值，如果option中含有value那么当它被选中时，option中的value会被赋给v-model，如果没有则会将option的text（option的内容）赋给v-model；在复选框中使用v-model那么v-model如果初始化为数组，那么对应的复选框中能够相当于执行push函数，删除相当于splice删除数组元素。v-model还能够和修饰符一起使用，v-model.lazy="message"能够将数据渲染迁移回change函数（表现为只有在表单中键入回车或者鼠标失焦时触发），v-model.trim="message"自动去除两遍空格。
（12）watch（侦听器），用来监测数据变化，可应用于绑定修改，但是会增加代码的耦合性：

let app=new Vue({
			el:"#mydiv",
			data:{
				message:'这是默认内容'
			},
			watch:{
				message:(newValue,oldValue)=>{
					this.message=newValue;
					console.log("侦听器被触发");
				    console.log("输出原先的值：",oldValue);
			  	    console.log("输出修改后的值：",newValue);
				}
			},
			methods: {
				click:function(){
					console.log("输出被点击");
					//修改数据
					this.message="这是更新后的消息";
				}
			},
		})

watch除了这个基本功能外，还有两个比较常用的属性：immediate和deep。其中，immediate（默认值为false），当immediate为true的时候表示Vue对象一加载就会触发watch里面的侦听函数。而deep（默认为false）则表示的是如果为true，Vue实例中的data里面的对象属性发生了改变，同样能够触发对应的侦听函数：

watch:{
			info:{
				handler:(newValue,oldValue)=>{
					console.log("倾听器被触发");
					console.log("输出最开始的值：",oldValue);
					console.log("输出更新后的值：",newValue);
				},
				deep:true,
				immediate:true
			}
		},