xml地图|网站地图|网站标签 [设为首页] [加入收藏]

vue从入门到进阶

来源:http://www.ccidsi.com 作者:集成介绍 人气:174 发布时间:2019-05-19
摘要:壹.什么是组件? 组件 (Component) 是 Vue.js 最庞大的效益之壹。组件能够扩大 HTML成分,封装可接纳的代码。在较高层面上,组件是自定义成分,Vue.js的编写翻译器为它助长特殊成效。在稍

壹.什么是组件?

组件 (Component) 是 Vue.js 最庞大的效益之壹。组件能够扩大 HTML 成分,封装可接纳的代码。在较高层面上,组件是自定义成分,Vue.js 的编写翻译器为它助长特殊成效。在稍微意况下,组件也得以突显为用is特征开始展览了扩张的原生 HTML 成分。

所有的Vue 组件再者也都是 Vue 的实例,所以可承受平等的精选对象(除了有的根级特有的选用) 并提供平等的生命周期钩子。

何以是组件?

组件(Component)是 Vue.js 最精锐的效用之壹。组件能够扩大 HTML 元素,封装可选择的代码。在较高层面上,组件是自定义成分, Vue.js 的编写翻译器为它助长特殊效果。在有一点意况下,组件也足以是原生 HTML 成分的样式,以 is 脾气扩充。

2.挂号组件

采取组件

大局注册

html代码:

<div id="example">
  <my-component></my-component>
</div>

JS代码:

// 注册
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})
var vm = new Vue({
  el: '#example',
  data: {

  } 
})

渲染结果为:

<div id="example">
  <div>A custom component!</div>
</div>

或然别的一种注册情势,通过 全局API:Vue.extend()
代码如下:

// 注册
var MyComponent = Vue.extend({
  template: '<div>A custom component!</div>'
});

// 注册
Vue.component('my-component', MyComponent);
var vm = new Vue({
  el: '#example',
  data: {

  }
})

注册

在此之前说过,大家能够透过以下措施开创2个 Vue 实例:

new Vue({
  el: '#some-element',
  // 选项
})

要注册一个大局组件,你能够利用 Vue.component(tagName, options)。 例如:

Vue.component('my-component', {
  // 选项
})

对于自定义标签字,Vue.js 不强制必要根据 W3C规则 (小写,并且包涵贰个短杠),固然遵从那个规则比较好。

组件在注册之后,便足以在父实例的模块中以自定义成分<my-component></my-component> 的花样利用。要力保在开头化根实例 从前 注册了组件:

<div id="example">
  <my-component></my-component>
</div>

// 注册
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})
// 创建根实例
new Vue({
  el: '#example'
})

渲染为:

<div id="example">
  <div>A custom component!</div>
</div>

Vue.extend()使用验证

上边表达下Vue.extend( options )的使用。
参数:{Object} options
用法:使用基础 Vue 构造器,创制二个“子类”。参数是七个包含组件选项的对象
data 选项是特例,需求小心 - 在 Vue.extend()中它必须是函数

<div id="mount-point"></div>

// 创建构造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 创建 Profile 实例,并挂载到一个元素上。
new Profile().$mount('#mount-point')

结果如下:

<p>Walter White aka Heisenberg</p>

地点又用到了实例方法vm.$mount(),上边表达下它的利用方法。

局地注册

不要在全局注册各类组件。通过选取组件实例选项注册,能够使组件仅在另三个实例/组件的功用域中可用:

var Child = {
  template: '<div>A custom component!</div>'
}
new Vue({
  // ...
  components: {
    // <my-component> 将只在父模板可用
    'my-component': Child
  }
})

这种封装也适用于别的可登记的 Vue 功用,如命令。

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)

DOM 模版分析表达

当使用 DOM 作为模版时(举例,将 el 选项挂载到二个已存在的要素上), 你会碰到 HTML 的1对范围,因为 Vue 唯有在浏览器分析和规格 HTML 后技能猎取模版内容。非常像这么些成分 <ul> , <ol>, <table> , <select> 限制了能被它包裹的成分,<option> 只好现身在其余成分内部。

在自定义组件中应用这一个受限制的成分时会导致一些主题素材,比如:

<table>
  <my-row>...</my-row>
</table>

自定义组件 <my-row> 被认为是无用的开始和结果,由此在渲染的时候会招致错误。变通的方案是选择特殊的 is 属性:

<table>
  <tr is="my-row"></tr>
</table>

应当注意,假如您使用来源以下来源之壹的字符串模板,这个限制将不适用:

  • <script type="text/x-template">
  • JavaScript内联模版字符串
  • .vue 组件

为此,有供给的话请使用字符串模版。

某个注册

您不要把各个组件都登记到全局。你能够由此有些 Vue 实例/组件的实例选项 components 注册仅在其成效域中可用的机件:

var Child = {
  template: '<div>A custom component!</div>'
}

new Vue({
  // ...
  components: {
    // <my-component> 将只在父组件模板中可用
    'my-component': Child
  }
})

这种封装也适用于其余可登记的 Vue 作用,比方指令

data 必须是函数

行使组件时,大很多取舍能够被传到到 Vue 构造器中,有2个不如: data 必须是函数。 实际上,如若你那样做:

Vue.component('my-component', {
  template: '{{ message }}',
  data: {
    message: 'hello'
  }
})

那么 Vue 会在调整台发出警示,告诉您在组件中 data 必须是多个函数。最棒了然这种规则的留存意义。

<div id="example-2">
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
</div>

var data = { counter: 0 }
Vue.component('simple-counter', {
  template: '<button v-on:click="counter  = 1">{{ counter }}</button>',
  // data 是一个函数,因此 Vue 不会警告,
  // 但是我们为每一个组件返回了同一个对象引用
  data: function () {
    return data
  }
})
new Vue({
  el: '#example-2'
})

是因为那七个零部件共享了同贰个 data , 由此扩展三个 counter 会影响全体组件!大家可以通过为各类组件再次回到新的 data 对象来化解这几个主题材料:

data: function () {
  return {
    counter: 0
  }
}

未来各类 counter 都有它和睦之中的情状了:

DOM 模板剖判注意事项

<ul>、<ol>、<table>、<select> 这样的成分里允许包涵的因素有限制,而另壹部分像 <option> 那样的因素只可以出现在一些特定成分的里边。

例如:

<table>
  <my-row>...</my-row>
</table>

自定义组件<my-row> 会被作为无效的开始和结果,因而会产生错误的渲染结果。变通的方案是采用非常的is特性:

<table>
  <tr is="my-row"></tr>
</table>

相应注意,假设应用来源以下来源之1的字符串模板,则未有这一个限制:

  • <script type="text/x-template">
  • JavaScript 内联模板字符串
  • .vue 组件

于是,请尽量使用字符串模板。

构成组件

组件意味着协同职业,经常老爹和儿子组件会是那样的涉及:组件 A 在它的模板中央银行使了组件 B 。它们中间必然供给相互通讯:父组件要给子组件传递数据,子组件须求将它个中产生的事体告诉给父组件。然则,在二个不错定义的接口中尽量将老爹和儿子组件解耦是很珍贵的。那保险了每一种组件能够在对峙隔离的境况中书写和领悟,也小幅升高了组件的可维护性和可重用性。

在 Vue.js 中,父亲和儿子组件的涉嫌足以总计为 props down, events up 。父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送新闻。看看它们是怎么职业的。

皇家娱乐场 1

data 必须是函数

如下代码:

Vue.component('my-component', {
  template: '{{ message }}',
  data: {
    message: 'hello'
  }
})

那么 Vue 会甘休运作,并在调节台发出警告,告诉你在组件实例中 data 必须是三个函数。
咱俩来通晓下,看上边代码:

<div id="example-2">
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
</div>

var data = { counter: 0 }

Vue.component('simple-counter', {
  template: '<button v-on:click="counter  = 1">{{ counter }}</button>',
  // 技术上 data 的确是一个函数了,因此 Vue 不会警告,
  // 但是我们却给每个组件实例返回了同一个对象的引用
  data: function () {
    return data
  }
})

new Vue({
  el: '#example-2'
})

出于那八个零件实例共享了同二个data对象,因而递增一个 counter会潜移默化全数组件!那就错了。大家得以因此为各样组件再次回到全新的多少对象来修补那几个主题材料:

data: function () {
  return {
    counter: 0
  }
}

当今每种 counter 都有它本身之中的事态了,不会相互影响。

Props

三.Prop

最广泛的施用便是:组件 A 在它的模版中央银行使了组件 B。它们中间必然需求相互通信:父组件可能要给子组件下发数据,子组件则或然要将它在这之中产生的事体告知父组件。

在 Vue 中,老爹和儿子组件的涉及可以计算为 prop 向下传递,事件提升传递。父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送信息。

选取Props传递数据

零件实例的效率域是孤立的。那意味无法同时不该在子组件的沙盘内直接引用父组件的多寡。能够行使 props 把数据传给子组件。

prop 是父组件用来传递数据的八个自定义属性。子组件必要显式地用 props 选项 声明 “prop”:

Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 就像 data 一样,prop 可以用在模板内
  // 同样也可以在 vm 实例中像 “this.message” 这样使用
  template: '{{ message }}'
})

接下来向它传播三个常常字符串:

<child message="hello!"></child>

结果:

hello!

使用 Prop 传递数据

实例1:

Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 就像 data 一样,prop 也可以在模板中使用
  // 同样也可以在 vm 实例中通过 this.message 来使用
  template: '{{ message }}'
})

<child message="hello!"></child>

结果:hello!

实例2:
HTML 个性是不区分轻重缓急写的。所以,当使用的不是字符串模板时,camelCase (驼峰式命名) 的 prop 必要更改为相呼应的 kebab-case (短横线分隔式命名):

Vue.component('child', {
  // 在 JavaScript 中使用 camelCase
  props: ['myMessage'],
  template: '{{ myMessage }}'
})

<!-- 在 HTML 中使用 kebab-case -->
<child my-message="hello!"></child>

若果你采纳字符串模板,则尚未这几个限制。

camelCase vs. kebab-case

HTML 天性不区分轻重缓急写。当使用非字符串模版时,prop的名字方式会从 camelCase 转为 kebab-case(短横线隔开分离):

Vue.component('child', {
  // camelCase in JavaScript
  props: ['myMessage'],
  template: '{{ myMessage }}'
})

<!-- kebab-case in HTML -->
<child my-message="hello!"></child>

再也应验,假诺您选择字符串模版,不用在意那么些限制。

动态 Prop

<div>
  <input v-model="parentMsg">
  <br>
  <child v-bind:my-message="parentMsg"></child>
</div>

你也能够采纳 v-bind 的缩写语法:

<child :my-message="parentMsg"></child>

(重要)一经您想把三个对象的所有属性用作 prop 实行传递,能够运用不带别的参数的 v-bind(即用 v-bind 而不是 v-bind:prop-name)。举例,已知三个todo 对象:

todo: {
  text: 'Learn Vue',
  isComplete: false
}

然后:

<todo-item v-bind="todo"></todo-item>

将等价于:

<todo-item
  v-bind:text="todo.text"
  v-bind:is-complete="todo.isComplete"
></todo-item>

动态 Props

好像于用 v-bind 绑定 HTML 本性到三个表明式,也能够用 v-bind 动态绑定 props 的值到父组件的数目中。每当父组件的数目变动时,该变化也会传导给子组件:

<div>
  <input v-model="parentMsg">
  <br>
  <child v-bind:my-message="parentMsg"></child>
</div>

使用 v-bind 的缩写语法常常更简约:

<child :my-message="parentMsg"></child>

结果:

 
Message from parent

字面量语法 vs 动态语法

初学者常犯的三个张冠李戴是采取字面量语法传递数值:

<!-- 传递了一个字符串 "1" -->
<comp some-prop="1"></comp>

因为它是三个字面量 prop,它的值是字符串 "一" 而不是二个数值。假若想传递1个的确的 JavaScript 数值,则须要利用 v-bind,从而让它的值被当作 JavaScript 表达式计算:

<!-- 传递真正的数值 -->
<comp v-bind:some-prop="1"></comp>

字面量语法 vs 动态语法

初学者常犯的2个荒唐是选用字面量语法传递数值:

<!-- 传递了一个字符串"1" -->
<comp some-prop="1"></comp>

因为它是3个字面 prop ,它的值以字符串 "1" 而不是以实际的数字传下去。假若想传递3个其实的 JavaScript 数字,必要动用 v-bind ,从而让它的值被看成 JavaScript 表明式总括:

<!-- 传递实际的数字 -->
<comp v-bind:some-prop="1"></comp>

单向数据流

Prop 是单向绑定的:当父组件的性质变化时,将传输给子组件,但是反过来不会。那是为着防止子组件无意间修改了父组件的景况,来幸免使用的数码流变得难以精通。

其它,每一趟父组件更新时,子组件的有所 prop 都会更新为流行值。那代表你不应该在子组件内部改换prop。固然你如此做了,Vue 会在调整台给出警告。

在二种景况下,大家很轻松忍不住想去修改 prop 中数量:

  • Prop 作为开头值传入后,子组件想把它看作局地数据来用;
  • Prop 作为原有数据传入,由子组件管理成别的数据输出。

对那二种情状,准确的答问方法是:
一.定义三个片段变量,并用 prop 的值开首化它:

props: ['initialCounter'],
data: function () {
  return { counter: this.initialCounter }
}

贰.定义三个企图属性,管理 prop 的值并再次回到:

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

注意在 JavaScript 中对象数组是援引类型,指向同一个内存空间,假设 prop 是三个指标或数组,在子组件内部更动它会影响父组件的情况。

单向数据流

prop 是单向绑定的:当父组件的性质变化时,将传输给子组件,然而不会反过来。那是为了幸免子组件无意修改了父组件的动静——那会让使用的数据流难以知晓。

除此以外,每便父组件更新时,子组件的具有 prop 都会更新为新型值。那意味你不该在子组件内部改造 prop 。假诺你如此做了,Vue 会在调控台给出警告。

万般有三种改换 prop 的情景:

  1. prop 作为早先值传入,子组件之后只是将它的初步值作为本地数据的开端值使用;

  2. prop 作为须求被变型的原始值传入。

更确切的说那二种情状是:

  1. 概念3个有的 data 属性,并将 prop 的早先值作为局地数据的初步值。

    props: ['initialCounter'],
    data: function () {
      return { counter: this.initialCounter }
    }
    

    贰.定义多个 computed 属性,此属性从 prop 的值计算得出。

    props: ['size'],
    computed: {
      normalizedSize: function () {
        return this.size.trim().toLowerCase()
      }
    }
    

    专注在 JavaScript 中目的和数组是援引类型,指向同三个内存空间,倘诺prop 是二个对象或数组,在子组件内部改造它会潜移默化父组件的事态。

Prop 验证

大家得以为组件的 prop 钦赐验证规则。假若传入的数目不符合须要,Vue 会发出警示。
要钦定验证规则,须要用对象的形式来定义 prop,而不能用字符串数组

Vue.component('example', {
  props: {
    // 基础类型检测 (`null` 指允许任何类型)
    propA: Number,
    // 可能是多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数值且有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 数组/对象的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

type 能够是上面原生构造器:String ,Number,Boolean,Function,Object,Array,Symbol。

type 也得以是2个自定义构造器函数,使用 instanceof 检测。

prop表明战败,Vue 会抛出警告 (就算使用的是支付版本)。注意 prop 会在组件实例创立以前开始展览校验,所以在defaultvalidator 函数里,诸如 datacomputedmethods 等实例属性还不可能使用。

其余实例:

Vue.component('modal', {
  template: '#modal-template',
  props: {
    show: {
      type: Boolean,
      required: true,
      twoWay: true    
    }
  }
});

twoWay Prop 的参数 移除。Props 将来只可以单向传递。为了对父组件产生反向影响,子组件要求显式地传递三个事件而不是依附于隐式地双向绑定。所以地点的的末梢2个实例只是贴出来代码而已,最新版本现已移除了。

Prop 验证

零件可认为 props 内定验证须求。假如未钦赐验证须求,Vue 会发出警告。当组件给其余人使用时那很有用。

prop 是1个对象而不是字符串数组时,它含有验证供给:

Vue.component('example', {
  props: {
    // 基础类型检测 (`null` 意思是任何类型都可以)
    propA: Number,
    // 多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数字,有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 数组/对象的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

type 能够是下边原生构造器:

  • String
  • Number
  • Boolean
  • Function
  • Object
  • Array

type 也足以是二个自定义构造器,使用 instanceof 检测。

当 prop 验证失利了, Vue 将不容在子组件上安装此值,要是运用的是付出版本会抛出一条警告。

四.非Prop特性

所谓非 prop 性情,就是指它能够直接传入组件,而无需定义相应的 prop。

固然为组件定义显然的 prop 是推荐的传参方式,组件的撰稿人却并不总能预言到组件被利用的光景。所以,组件可以接收任意传入的特性,这个特色都会被添加到组件的根元素上

举个例子,若是大家选拔了第二方组件 bs-date-input,它涵盖二个 Bootstrap 插件,该插件须要在 input 上增添 data-三d-date-picker 这么些性子。那时能够把特色直接助长到零部件上 (没有必要事先定义 prop):

<bs-date-input data-3d-date-picker="true"></bs-date-input>

增加属性 data-3d-date-picker="true" 之后,它会被自动增加到bs-date-input 的根成分上。

借使那是 bs-date-input 的沙盘:

<input type="date" class="form-control">

为了给该日期采纳器插件增添3个非正规的宗旨,大家大概供给追加1个万分的 class,比如:

<bs-date-input
  data-3d-date-picker="true"
  class="date-picker-theme-dark"
></bs-date-input>

最后在根成分上转移的class值为:form-control date-picker-theme-dark。

自定义事件

大家了解,父组件是应用 props 传递数据给子组件,但假如实组件要把数量传递回去,应该如何是好?那就是自定义事件!

伍.自定义事件

大家通晓,父组件使用 prop 传递数据给子组件。但子组件怎么跟父组件通讯呢?这一年 Vue 的自定义事件系统就派得上用场了。

使用 v-on 绑定自定义事件

每个 Vue 实例都落到实处了事件接口(伊芙nts interface),即:

  • 使用 $on(eventName) 监听事件
  • 使用 $emit(eventName) 触发事件

Vue的轩然大波系统一分配离自浏览器的EventTarget API。固然它们的运营类似,可是$on 和 $emit 不是addEventListener 和 dispatchEvent 的别名。

除此以外,父组件能够在使用子组件的地点直接用 v-on 来监听子组件触发的轩然大波。

下边是1个例子:

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>

Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter  = 1
      this.$emit('increment')
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total  = 1
    }
  }
})

在本例中,子组件已经和它表面完全解耦了。它所做的只是触发三个父组件关切的里边事件。

使用 v-on 绑定自定义事件

各类 Vue 实例都落实了轩然大波接口,即:

  • 行使 $on(eventName) 监听事件
  • 使用 $emit(eventName) 触发事件

Vue 的事件系统与浏览器的 EventTarget API 有所不一致。纵然它们的运行起来好像,但是 $on$emit 并不是addEventListenerdispatchEvent 的别名。

除此以外,父组件能够在使用子组件的地点直接用 v-on 来监听子组件触发的轩然大波。

无法用 $on 侦听子组件释放的事件,而必须在模板里一贯用 v-on 绑定,参见下边的例子。

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>

Vue.component('button-counter', {
  template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementCounter: function () {
      this.counter  = 1
      this.$emit('increment')
    }
  },
})

new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total  = 1
    }
  }
})

给组件绑定原惹事件

不常,你可能想在某些组件的根成分上监听1个原滋事件。能够行使 .native 修饰v-on 。例如:

<my-component v-on:click.native="doTheThing"></my-component>

给组件绑定原惹祸件.native

不常,你大概想在某些组件的根成分上监听多少个原惹事件。能够选用 v-on 的梳洗符 .native。例如:

<my-component v-on:click.native="doTheThing"></my-component>

动用自定义事件的表单输入组件

自定义事件也得以用来成立自定义的表单输入组件,使用 v-model 来开始展览多少双向绑定。牢记:

<input v-model="something">

唯有是2个语法糖:

<input v-bind:value="something" v-on:input="something = $event.target.value">

之所以在组件中应用时,它一定于上面包车型大巴简写:

<input v-bind:value="something" v-on:input="something = arguments[0]">

所以要让组件的 v-model 生效,它必须:

  • 收受1个 value 属性
  • 在有新的 value 时触发 input 事件

1个非常简单的钱币输入:

<currency-input v-model="price"></currency-input>

Vue.component('currency-input', {
  template: '
    
      $
      <input
        ref="input"
        v-bind:value="value"
        v-on:input="updateValue($event.target.value)"
      >
    
  ',
  props: ['value'],
  methods: {
    // Instead of updating the value directly, this
    // method is used to format and place constraints
    // on the input's value
    updateValue: function (value) {
      var formattedValue = value
        // Remove whitespace on either side
        .trim()
        // Shorten to 2 decimal places
        .slice(0, value.indexOf('.')   3)
      // If the value was not already normalized,
      // manually override it to conform
      if (formattedValue !== value) {
        this.$refs.input.value = formattedValue
      }
      // Emit the number value through the input event
      this.$emit('input', Number(formattedValue))
    }
  }
})

The implementation above is pretty naive though. For example, users are allowed to enter multiple periods and even letters sometimes - yuck! So for those that want to see a non-trivial example, here’s a more robust currency filter:

皇家娱乐场,那个接口不止能够用来连续组件内部的表单输入,也很轻易集成你和煦创办的输入类型。想象一下:

<voice-recognizer v-model="question"></voice-recognizer>
<webcam-gesture-reader v-model="gesture"></webcam-gesture-reader>
<webcam-retinal-scanner v-model="retinalImage"></webcam-retinal-scanner>

.sync 修饰符(2.3.0 )

<comp :foo.sync="bar"></comp>

会被扩张为:

<comp :foo="bar" @update:foo="val => bar = val"></comp>

当子组件需求创新 foo 的值时,它需求显式地接触叁个立异事件:

this.$emit('update:foo', newValue)

非父亲和儿子组件通讯

神跡非父亲和儿子关系的组件也亟需通讯。在简短的场所下,使用一个空的 Vue 实例作为中心事件总线:

var bus = new Vue()

// 触发组件 A 中的事件
bus.$emit('id-selected', 1)

// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
  // ...
})

在越多复杂的状态下,你应该思虑接纳特地的 情景管理格局.

本文由68399皇家赌场发布于集成介绍,转载请注明出处:vue从入门到进阶

关键词: 68399皇家赌场 Vue.js

上一篇:类批量复制数据到数据库

下一篇:没有了

频道精选

最火资讯