Vue-基础(一)

概述一.Vue中的常用指令 　　什么是指令? 　　指令就是vue中提供的一些对于页面和数据更为方便的 *** 作, 　　指令就是以数据去驱动DOM行为的,简化DOM的 *** 作 　　常用指令 　　v-text / v-html :用于为标签内部赋值: 　　　　两者区别:v-text不能解析html标签.v-html可以解析html标签 　　v-if/v-else-if/v-else:用于条件判断是否 　　v-sho 一.Vue中的常用指令

　　什么是指令?

　　指令就是vue中提供的一些对于页面和数据更为方便的 *** 作,

　　指令就是以数据去驱动DOM行为的,简化DOM的 *** 作

　　常用指令

　　v-text / v-HTML :用于为标签内部赋值:

　　　　两者区别:v-text不能解析HTML标签.v-HTML可以解析HTML标签

　　v-if/v-else-if/v-else:用于条件判断是否

　　v-show:用于条件判断是否显示/隐藏

　　　　二者区别:v-show 隐藏本质上是设置标签的displa:none,而v-if隐藏是将标签注释掉了

　　v-for:遍历对象 或者 数组

 

二.Vue中的单向数据流,双向数据流,以及事件绑定

　　1.单向数据流==>也叫做单向数据绑定,就是内存改变印象页面改变,Js代码运行在内存中,改变HTML页面

　　　　使用v-bind指令,

<input v-bind:value="name" v-bind:class="name">

　　2.双向数据流==> 双向数据绑定,页面对于input的value的改变,能影响内存Js代码中name的变量,同样的,内存Js改变了name的值,会影响页面重新渲染最新值

　　　　使用v-model指令:注意:v-model 只能作用于有value属性的元素

<input v-model="name" v-bind:class="name">

　　3.事件绑定:

　　　v-on:事件名="表达式||函数名" 也可以简写为@事件名="表达式||函数名"

 

三.监听器watch和计算属性computed

　　当被监听的对象发生变化时,会触发监听器或者计算属性的方法

　　两者的对比:

　　　　watch监听单个，computed监听多个,

　　注意事项:

　　　　当watch监听的是复杂数据类型,例如数组,对象的时候,需要做深度监听(deep:true)

watch:{
　　//被监听的属性    msg:{        handler(val){           if(val.text==‘love‘){              alert(val.text)              }             },deep:true//开启深度监听          }}                

总结

以上是内存溢出为你收集整理的Vue-基础(一)全部内容，希望文章能够帮你解决Vue-基础(一)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。