AICODER大前端培训

AICODER-IT培训专家,前端培训基地,前端培训,全栈培训,大学生IT培训基地,线上IT课程免费自学,线下培训项目实战,实习,html5培训实习-AICODE程序员

在线咨询

Vue快速入门教程-(9)Vue全局方法(下)

老马 发布于: 2018年12月15日 18时47分21秒 阅读803次

extends

  • 类型Object | Function

  • 详细

    允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数),而无需使用 Vue.extend。这主要是为了便于扩展单文件组件。

    这和 mixins 类似。

  • 示例

    var CompA = { ... }
    
    // 在没有调用 `Vue.extend` 时候继承 CompA
    var CompB = {
      extends: CompA,
      ...
    }<button>Click to copy</button>

provide / inject

2.2.0 新增

  • 类型

    • provideObject | () => Object
    • injectArray<string> | { [key: string]: string | Symbol | Object }
  • 详细

    provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

    这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。如果你熟悉 React,这与 React 的上下文特性很相似。

    provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key,但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。

    inject 选项应该是:

    • 一个字符串数组,或
    • 一个对象,对象的 key 是本地的绑定名,value 是:
      • 在可用的注入内容中搜索用的 key (字符串或 Symbol),或
      • 一个对象,该对象的:
        • from 属性是在可用的注入内容中搜索用的 key (字符串或 Symbol)
        • default 属性是降级情况下使用的 value

    提示:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。

  • 示例

    // 父级组件提供 'foo'
    var Provider = {
      provide: {
        foo: 'bar'
      },
      // ...
    }
    
    // 子组件注入 'foo'
    var Child = {
      inject: ['foo'],
      created () {
        console.log(this.foo) // => "bar"
      }
      // ...
    }<button>Click to copy</button>

    利用 ES2015 Symbols、函数 provide 和对象 inject

    ``` js const s = Symbol()

    const Provider = { provide () {

    return {<button>Click to copy</button>
    [s]: 'foo'
  }
}<button>Click to copy</button>

}

const Child = { inject: { s }, // ... }


  > 接下来 2 个例子只工作在 Vue 2.2.1 或更高版本。低于这个版本时,注入的值会在 `props` 和 `data` 初始化之后得到。

  使用一个注入的值作为一个属性的默认值:

  ```js
  const Child = {
    inject: ['foo'],
    props: {
      bar: {
        default () {
          return this.foo
        }
      }
    }
  }<button>Click to copy</button>

使用一个注入的值作为数据入口:

  const Child = {
    inject: ['foo'],
    data () {
      return {
        bar: this.foo
      }
    }
  }<button>Click to copy</button>

在 2.5.0+ 的注入可以通过设置默认值使其变成可选项:

  const Child = {
    inject: {
      foo: { default: 'foo' }
    }
  }<button>Click to copy</button>

如果它需要从一个不同名字的属性注入,则使用 from 来表示其源属性:

  const Child = {
    inject: {
      foo: {
        from: 'bar',
        default: 'foo'
      }
    }
  }<button>Click to copy</button>

与 prop 的默认值类似,你需要对非原始值使用一个工厂方法:

  const Child = {
    inject: {
      foo: {
        from: 'bar',
        default: () => [1, 2, 3]
      }
    }
  }<button>Click to copy</button>

选项 / 其它

name

  • 类型string

  • 限制:只有作为组件选项时起作用。

  • 详细

    允许组件模板递归地调用自身。注意,组件在全局用 Vue.component() 注册时,全局 ID 自动作为组件的 name。

    指定 name 选项的另一个好处是便于调试。有名字的组件有更友好的警告信息。另外,当在有 vue-devtools,未命名组件将显示成 <AnonymousComponent>,这很没有语义。通过提供 name 选项,可以获得更有语义信息的组件树。

delimiters

  • 类型Array<string>

  • 默认值{% raw %}["{{", "}}"]{% endraw %}

  • 限制:这个选项只在完整构建版本中的浏览器内编译时可用。

  • 详细

    改变纯文本插入分隔符。

  • 示例

    new Vue({
      delimiters: ['${', '}']
    })
    
    // 分隔符变成了 ES6 模板字符串的风格<button>Click to copy</button>

functional

  • 类型boolean

  • 详细

    使组件无状态 (没有 data ) 和无实例 (没有 this 上下文)。他们用一个简单的 render 函数返回虚拟节点使他们更容易渲染。

  • 参考函数式组件

model

2.2.0 新增

  • 类型{ prop?: string, event?: string }

  • 详细

    允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用 valueprop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

  • Example

    Vue.component('my-checkbox', {
      model: {
        prop: 'checked',
        event: 'change'
      },
      props: {
        // this allows using the `value` prop for a different purpose
        value: String,
        // use `checked` as the prop which take the place of `value`
        checked: {
          type: Number,
          default: 0
        }
      },
      // ...
    })<button>Click to copy</button>
    <my-checkbox v-model="foo" value="some value"></my-checkbox><button>Click to copy</button>

    上述代码相当于:

    <my-checkbox
      :checked="foo"
      @change="val => { foo = val }"
      value="some value">
    </my-checkbox><button>Click to copy</button>

inheritAttrs

2.4.0 新增

  • 类型boolean

  • 默认值true

  • 详细

    默认情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时,这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false,这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例属性 $attrs 可以让这些特性生效,且可以通过 v-bind 显性的绑定到非根元素上。

    注意:这个选项不影响 class 和 style 绑定。

comments

2.4.0 新增

  • 类型boolean

  • 默认值false

  • 限制:这个选项只在完整构建版本中的浏览器内编译时可用。

  • 详细

    当设为 true 时,将会保留且渲染模板中的 HTML 注释。默认行为是舍弃它们。

实例属性

vm.$data

  • 类型Object

  • 详细

    Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问。

  • 参考选项 / 数据 - data

vm.$props

2.2.0 新增

  • 类型Object

  • 详细

    当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。

vm.$el

  • 类型HTMLElement

  • 只读

  • 详细

    Vue 实例使用的根 DOM 元素。

vm.$options

  • 类型Object

  • 只读

  • 详细

    用于当前 Vue 实例的初始化选项。需要在选项中包含自定义属性时会有用处:

    new Vue({
      customOption: 'foo',
      created: function () {
        console.log(this.$options.customOption) // => 'foo'
      }
    })<button>Click to copy</button>

vm.$parent

  • 类型Vue instance

  • 只读

  • 详细

    父实例,如果当前实例有的话。

vm.$root

  • 类型Vue instance

  • 只读

  • 详细

    当前组件树的根 Vue 实例。如果当前实例没有父实例,此实例将会是其自己。

vm.$children

  • 类型Array<Vue instance>

  • 只读

  • 详细

    当前实例的直接子组件。需要注意 $children 并不保证顺序,也不是响应式的。如果你发现自己正在尝试使用 $children 来进行数据绑定,考虑使用一个数组配合 v-for 来生成子组件,并且使用 Array 作为真正的来源。

vm.$slots

  • 类型{ [name: string]: ?Array<VNode> }

  • 只读

  • 详细

    用来访问被插槽分发的内容。每个具名插槽 有其相应的属性 (例如:slot="foo" 中的内容将会在 vm.$slots.foo 中被找到)。default 属性包括了所有没有被包含在具名插槽中的节点。

    在使用渲染函数书写一个组件时,访问 vm.$slots 最有帮助。

  • 示例

    <blog-post>
      <h1 slot="header">
        About Me
      </h1>
    
      <p>Here's some page content, which will be included in vm.$slots.default, because it's not inside a named slot.</p>
    
      <p slot="footer">
        Copyright 2016 Evan You
      </p>
    
      <p>If I have some content down here, it will also be included in vm.$slots.default.</p>.
    </blog-post><button>Click to copy</button>
    Vue.component('blog-post', {
      render: function (createElement) {
        var header = this.$slots.header
        var body   = this.$slots.default
        var footer = this.$slots.footer
        return createElement('div', [
          createElement('header', header),
          createElement('main', body),
          createElement('footer', footer)
        ])
      }
    })<button>Click to copy</button>
  • 参考

vm.$scopedSlots

2.1.0 新增

vm.$refs

vm.$isServer

  • 类型boolean

  • 只读

  • 详细

    当前 Vue 实例是否运行于服务器。

  • 参考服务端渲染

vm.$attrs

  • 类型{ [key: string]: string }

  • 只读

  • 详细

    包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

vm.$listeners

  • 类型{ [key: string]: Function | Array<Function> }

  • 只读

  • 详细

    包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

实例方法 / 数据

vm.$watch( expOrFn, callback, [options] )

  • 参数

    • {string | Function} expOrFn
    • {Function | Object} callback
    • {Object} [options]
      • {boolean} deep
      • {boolean} immediate
  • 返回值{Function} unwatch

  • 用法

    观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式,用一个函数取代。

    注意:在变异 (不是替换) 对象或数组时,旧值将与新值相同,因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。

  • 示例

    // 键路径
    vm.$watch('a.b.c', function (newVal, oldVal) {
      // 做点什么
    })
    
    // 函数
    vm.$watch(
      function () {
        return this.a + this.b
      },
      function (newVal, oldVal) {
        // 做点什么
      }
    )<button>Click to copy</button>

    vm.$watch 返回一个取消观察函数,用来停止触发回调:

    var unwatch = vm.$watch('a', cb)
    // 之后取消观察
    unwatch()<button>Click to copy</button>
  • 选项:deep

    为了发现对象内部值的变化,可以在选项参数中指定 deep: true 。注意监听数组的变动不需要这么做。

    vm.$watch('someObject', callback, {
      deep: true
    })
    vm.someObject.nestedValue = 123
    // callback is fired<button>Click to copy</button>
  • 选项:immediate

    在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调:

    vm.$watch('a', callback, {
      immediate: true
    })
    // 立即以 `a` 的当前值触发回调<button>Click to copy</button>

vm.$set( target, key, value )

  • 参数

    • {Object | Array} target
    • {string | number} key
    • {any} value
  • 返回值:设置的值。

  • 用法

    这是全局 Vue.set 的别名

  • 参考Vue.set

vm.$delete( target, key )

  • 参数

    • {Object | Array} target
    • {string | number} key
  • 用法

    这是全局 Vue.delete 的别名

  • 参考Vue.delete

实例方法 / 事件

vm.$on( event, callback )

  • 参数

    • {string | Array<string>} event (数组只在 2.2.0+ 中支持)
    • {Function} callback
  • 用法

    监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。

  • 示例

    vm.$on('test', function (msg) {
      console.log(msg)
    })
    vm.$emit('test', 'hi')
    // => "hi"<button>Click to copy</button>

vm.$once( event, callback )

  • 参数

    • {string} event
    • {Function} callback
  • 用法

    监听一个自定义事件,但是只触发一次,在第一次触发之后移除监听器。

vm.$off( [event, callback] )

  • 参数

    • {string | Array<string>} event (只在 2.2.2+ 支持数组)
    • {Function} [callback]
  • 用法

    移除自定义事件监听器。

    • 如果没有提供参数,则移除所有的事件监听器;

    • 如果只提供了事件,则移除该事件所有的监听器;

    • 如果同时提供了事件与回调,则只移除这个回调的监听器。

vm.$emit( eventName, [...args] )

  • 参数

    • {string} eventName
    • [...args]

    触发当前实例上的事件。附加参数都会传给监听器回调。

  • 示例:

    只配合一个事件名使用 $emit

    Vue.component('welcome-button', {
      template: `
        <button v-on:click="$emit('welcome')">
          Click me to be welcomed
        </button>
      `
    })<button>Click to copy</button>
    <div id="emit-example-simple">
      <welcome-button v-on:welcome="sayHi"></welcome-button>
    </div><button>Click to copy</button>
    new Vue({
      el: '#emit-example-simple',
      methods: {
        sayHi: function () {
          alert('Hi!')
        }
      }
    })<button>Click to copy</button>

    {% raw %}

    <welcome-button v-on:welcome="sayHi"></welcome-button>
    {% endraw %}

    配合额外的参数使用 $emit

    Vue.component('magic-eight-ball', {
      data: function () {
        return {
          possibleAdvice: ['Yes', 'No', 'Maybe']
        }
      },
      methods: {
        giveAdvice: function () {
          var randomAdviceIndex = Math.floor(Math.random() * this.possibleAdvice.length)
          this.$emit('give-advice', this.possibleAdvice[randomAdviceIndex])
        }
      },
      template: `
        <button v-on:click="giveAdvice">
          Click me for advice
        </button>
      `
    })<button>Click to copy</button>
    <div id="emit-example-argument">
      <magic-eight-ball v-on:give-advice="showAdvice"></magic-eight-ball>
    </div><button>Click to copy</button>
    new Vue({
      el: '#emit-example-argument',
      methods: {
        showAdvice: function (advice) {
          alert(advice)
        }
      }
    })<button>Click to copy</button>

    {% raw %}

    <magic-eight-ball v-on:give-advice="showAdvice"></magic-eight-ball>
    {% endraw %}

实例方法 / 生命周期

vm.$mount( [elementOrSelector] )

  • 参数

    • {Element | string} [elementOrSelector]
    • {boolean} [hydrating]
  • 返回值vm - 实例自身

  • 用法

    如果 Vue 实例在实例化时没有收到 el 选项,则它处于“未挂载”状态,没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。

    如果没有提供 elementOrSelector 参数,模板将被渲染为文档之外的的元素,并且你必须使用原生 DOM API 把它插入文档中。

    这个方法返回实例自身,因而可以链式调用其它实例方法。

  • 示例

    var MyComponent = Vue.extend({
      template: '<div>Hello!</div>'
    })
    
    // 创建并挂载到 #app (会替换 #app)
    new MyComponent().$mount('#app')
    
    // 同上
    new MyComponent({ el: '#app' })
    
    // 或者,在文档之外渲染并且随后挂载
    var component = new MyComponent().$mount()
    document.getElementById('app').appendChild(component.$el)<button>Click to copy</button>
  • 参考

vm.$forceUpdate()

  • 示例

    迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。

vm.$nextTick( [callback] )

  • 参数

    • {Function} [callback]
  • 用法

    将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。

    2.1.0 起新增:如果没有提供回调且在支持 Promise 的环境中,则返回一个 Promise。请注意 Vue 不自带 Promise 的 polyfill,所以如果你的目标浏览器不是原生支持 Promise (IE:你们都看我干嘛),你得自行 polyfill。

  • 示例

    new Vue({
      // ...
      methods: {
        // ...
        example: function () {
          // 修改数据
          this.message = 'changed'
          // DOM 还没有更新
          this.$nextTick(function () {
            // DOM 现在更新了
            // `this` 绑定到当前实例
            this.doSomethingElse()
          })
        }
      }
    })<button>Click to copy</button>
  • 参考Vue.nextTick

vm.$destroy()

  • 用法

    完全销毁一个实例。清理它与其它实例的连接,解绑它的全部指令及事件监听器。

    触发 beforeDestroy 和 destroyed 的钩子。

    在大多数场景中你不应该调用这个方法。最好使用 v-if 和 v-for 指令以数据驱动的方式控制子组件的生命周期。

  • 参考生命周期图示

指令

v-text

  • 预期string

  • 详细

    更新元素的 textContent。如果要更新部分的 textContent ,需要使用 {% raw %}{{ Mustache }}{% endraw %} 插值。

  • 示例

    <span v-text="msg"></span>
    <!-- 和下面的一样 -->
    <span>{{msg}}</span><button>Click to copy</button>
  • 参考数据绑定语法 - 插值

v-html

  • 预期string

  • 详细

    更新元素的 innerHTML 。注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用 v-html组合模板,可以重新考虑是否通过使用组件来替代。

    在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。只在可信内容上使用 v-html永不用在用户提交的内容上。

    单文件组件里,scoped 的样式不会应用在 v-html 内部,因为那部分 HTML 没有被 Vue 的模板编译器处理。如果你希望针对 v-html 的内容设置带作用域的 CSS,你可以替换为 CSS Modules 或用一个额外的全局 <style> 元素手动设置类似 BEM 的作用域策略。

  • 示例

    <div v-html="html"></div><button>Click to copy</button>
  • 参考数据绑定语法 - 插值

v-show

  • 预期any

  • 用法

    根据表达式之真假值,切换元素的 display CSS 属性。

    当条件变化时该指令触发过渡效果。

  • 参考条件渲染 - v-show

v-if

  • 预期any

  • 用法

    根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template> ,将提出它的内容作为条件块。

    当条件变化时该指令触发过渡效果。

    当和 v-if 一起使用时,v-for 的优先级比 v-if 更高。详见列表渲染教程

  • 参考条件渲染 - v-if

v-else

  • 不需要表达式

  • 限制:前一兄弟元素必须有 v-if 或 v-else-if

  • 用法

    为 v-if 或者 v-else-if 添加“else 块”。

    <div v-if="Math.random() > 0.5">
      Now you see me
    </div>
    <div v-else>
      Now you don't
    </div><button>Click to copy</button>
  • 参考条件渲染 - v-else

v-else-if

2.1.0 新增

  • 类型any

  • 限制:前一兄弟元素必须有 v-if 或 v-else-if

  • 用法

    表示 v-if 的 "else if 块"。可以链式调用。

    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div><button>Click to copy</button>
  • 参考条件渲染 - v-else-if

v-for

  • 预期Array | Object | number | string

  • 用法

    基于源数据多次渲染元素或模板块。此指令之值,必须使用特定语法 alias in expression ,为当前遍历的元素提供别名:

    <div v-for="item in items">
      {{ item.text }}
    </div><button>Click to copy</button>

    另外也可以为数组索引指定别名 (或者用于对象的键):

    <div v-for="(item, index) in items"></div>
    <div v-for="(val, key) in object"></div>
    <div v-for="(val, key, index) in object"></div><button>Click to copy</button>

    v-for 默认行为试着不改变整体,而是替换元素。迫使其重新排序的元素,你需要提供一个 key 的特殊属性:

    <div v-for="item in items" :key="item.id">
      {{ item.text }}
    </div><button>Click to copy</button>

    v-for 的详细用法可以通过以下链接查看教程详细说明。

  • 参考

v-on

  • 缩写@

  • 预期Function | Inline Statement | Object

  • 参数event

  • 修饰符

    • .stop - 调用 event.stopPropagation()
    • .prevent - 调用 event.preventDefault()
    • .capture - 添加事件侦听器时使用 capture 模式。
    • .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
    • .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
    • .native - 监听组件根元素的原生事件。
    • .once - 只触发一次回调。
    • .left - (2.2.0) 只当点击鼠标左键时触发。
    • .right - (2.2.0) 只当点击鼠标右键时触发。
    • .middle - (2.2.0) 只当点击鼠标中键时触发。
    • .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
  • 用法

    绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句,如果没有修饰符也可以省略。

    用在普通元素上时,只能监听原生 DOM 事件。用在自定义元素组件上时,也可以监听子组件触发的自定义事件

    在监听原生 DOM 事件时,方法以事件为唯一的参数。如果使用内联语句,语句可以访问一个 $event 属性:v-on:click="handle('ok', $event)"

    从 2.4.0 开始,v-on 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时,是不支持任何修饰器的。

  • 示例

    <!-- 方法处理器 -->
    <button v-on:click="doThis"></button>
    
    <!-- 内联语句 -->
    <button v-on:click="doThat('hello', $event)"></button>
    
    <!-- 缩写 -->
    <button @click="doThis"></button>
    
    <!-- 停止冒泡 -->
    <button @click.stop="doThis"></button>
    
    <!-- 阻止默认行为 -->
    <button @click.prevent="doThis"></button>
    
    <!-- 阻止默认行为,没有表达式 -->
    <form @submit.prevent></form>
    
    <!--  串联修饰符 -->
    <button @click.stop.prevent="doThis"></button>
    
    <!-- 键修饰符,键别名 -->
    <input @keyup.enter="onEnter">
    
    <!-- 键修饰符,键代码 -->
    <input @keyup.13="onEnter">
    
    <!-- 点击回调只会触发一次 -->
    <button v-on:click.once="doThis"></button>
    
    <!-- 对象语法 (2.4.0+) -->
    <button v-on="{ mousedown: doThis, mouseup: doThat }"></button><button>Click to copy</button>

    在子组件上监听自定义事件 (当子组件触发“my-event”时将调用事件处理器):

    <my-component @my-event="handleThis"></my-component>
    
    <!-- 内联语句 -->
    <my-component @my-event="handleThis(123, $event)"></my-component>
    
    <!-- 组件中的原生事件 -->
    <my-component @click.native="onClick"></my-component><button>Click to copy</button>
  • 参考

v-bind

  • 缩写:

  • 预期any (with argument) | Object (without argument)

  • 参数attrOrProp (optional)

  • 修饰符

    • .prop - 被用于绑定 DOM 属性 (property)。(差别在哪里?)
    • .camel - (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)
    • .sync (2.3.0+) 语法糖,会扩展成一个更新父组件绑定值的 v-on 侦听器。
  • 用法

    动态地绑定一个或多个特性,或一个组件 prop 到表达式。

    在绑定 class 或 style 特性时,支持其它类型的值,如数组或对象。可以通过下面的教程链接查看详情。

    在绑定 prop 时,prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。

    没有参数时,可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

  • 示例

    <!-- 绑定一个属性 -->
    <img v-bind:src="imageSrc">
    
    <!-- 缩写 -->
    <img :src="imageSrc">
    
    <!-- 内联字符串拼接 -->
    <img :src="'/path/to/images/' + fileName">
    
    <!-- class 绑定 -->
    <div :class="{ red: isRed }"></div>
    <div :class="[classA, classB]"></div>
    <div :class="[classA, { classB: isB, classC: isC }]">
    
    <!-- style 绑定 -->
    <div :style="{ fontSize: size + 'px' }"></div>
    <div :style="[styleObjectA, styleObjectB]"></div>
    
    <!-- 绑定一个有属性的对象 -->
    <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
    
    <!-- 通过 prop 修饰符绑定 DOM 属性 -->
    <div v-bind:text-content.prop="text"></div>
    
    <!-- prop 绑定。“prop”必须在 my-component 中声明。-->
    <my-component :prop="someThing"></my-component>
    
    <!-- 通过 $props 将父组件的 props 一起传给子组件 -->
    <child-component v-bind="$props"></child-component>
    
    <!-- XLink -->
    <svg><a :xlink:special="foo"></a></svg><button>Click to copy</button>

    .camel 修饰符允许在使用 DOM 模板时将 v-bind 属性名称驼峰化,例如 SVG 的 viewBox 属性:

    <svg :view-box.camel="viewBox"></svg><button>Click to copy</button>

    在使用字符串模板或通过 vue-loader/vueify 编译时,无需使用 .camel

  • 参考

回到vue.js知识列表首页


AICODER编辑推荐:



报名就业班送基础班

最近分享