Vue-基础(一)

一.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//开启深度监听
          }
}