美文网首页
Vue 笔记

Vue 笔记

作者: Sonoface | 来源:发表于2019-08-27 15:49 被阅读0次

    v-bind

    将这个元素节点的 A 特性和 Vue 实例的 B 属性保持一致
    简写为空

    v-if

    是否渲染标签

    v-for

    循环调用当前元素

    v-on

    事件监听
    @v-on:click

    <!--
    现在我们为每个 todo-item 提供 todo 对象todo 对象是变量,即其内容可以是动态的。
    我们也需要为每个组件提供一个“key”,稍后再作详细解释。
     —>
    // $watch 是一个实例方法
    vm.$watch('a', function (newValue, oldValue) {
      // 这个回调将在 `vm.a` 改变后调用
    })
    

    文本
    数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值:
    <span>Message: {{ msg }}</span>
    Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时,绑定的数据对象上 msg属性发生了改变,插值处的内容都会更新。
    通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定:

    v-html

    可直接输出html

    isActive

    我们可以传给 v-bind:class 一个对象,以动态地切换 class:
    <div v-bind:class="{ active: isActive }"></div>
    上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness
    当用在组件上时,v-model 则会这样:

    <custom-input
     v-bind:value="searchText"
     v-on:input="searchText = $event"
    ></custom-input>
    

    为了让它正常工作,这个组件内的 <input> 必须:

    • 将其 value 特性绑定到一个名叫 value 的 prop 上
    • 在其 input 事件被触发时,将新的值通过自定义的 input 事件抛出

    写成代码之后是这样的:

    Vue.component('custom-input', {
     props: ['value'],
     template: `
    <input
          v-bind:value="value"
          v-on:input="$emit('input', $event.target.value)"
    >
    })
    

    相关文章

      网友评论

          本文标题:Vue 笔记

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