美文网首页
Vue.js 小问题解惑

Vue.js 小问题解惑

作者: viviChen | 来源:发表于2018-08-09 11:39 被阅读0次

    疑惑1:为什么有时候看到一些 $ 符号,这代表什么?
    解惑1:Vue 实例有一些官方提供的有用的实例属性与方法,当然用户也可以给实例自定义一些属性,为了与用户自定义的属性进行区别,官方会给他们加上 $ 前缀(例如 el,data, $watch)。


    疑惑2:绑定的时候有时候看到双大括号有时候是大括号,傻傻分不清楚。
    解惑2:数据绑定最常见的就是 mustache (双大括号)文本插值,对于绑定样式时,表达式结果的类型可以是字符串、对象或数组。

    绑定样式不会覆盖该元素本身已经存在的样式。

    // 文本插值
    <span>Message: {{ msg }}</span>
    
    // 绑定样式 (对象)
    <span :class="{'active': isActive}">Hello, World!</span>
    
    // 绑定样式 (数组)
    <span :class=[activeClass, errorClass]></span>
    
    data: {
      isActive: true,
      activeClass: 'active',
      errorClass: 'text-danger',
    },
    

    疑惑3:v-if 和 v-show 的区别?
    解惑3:v-if 会根据判断从而选择是否渲染该元素,而 v-show 是已经渲染了该元素,只是根据判断来控制其 display 是 none 还是 block。


    解惑4:监听事件(v-on)的缩写为 @;绑定参数(v-bind)的缩写为 :

    <a v-bind:href="{{url}}" v-on:click="clickMe()"></a>
    <a :href="{{url}}" @click="clickMe()"></a>
    

    相关文章

      网友评论

          本文标题:Vue.js 小问题解惑

          本文链接:https://www.haomeiwen.com/subject/gtpqbftx.html