首页 > 其他 > 详细

Vue-基础(一)

时间:2019-10-23 09:21:24      阅读:90      评论:0      收藏:0      [点我收藏+]

一.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-基础(一)

原文:https://www.cnblogs.com/gabriel-y/p/11723689.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!