• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

[Vue] 实例

互联网 diligentman 3个月前 (03-04) 51次浏览

##### 简介

每一个Vue实例接收一个相同的初始化配置,Vue实例就是一个组件。

##### 代码

每个 Vue 应用都是通过用 `Vue` 函数创建一个新的 **Vue 实例** 开始的

“`
var vm = new Vue({
  // 选项
})
“`

##### 讲解

一个 Vue 应用由一个通过 `new Vue` 创建的 **根 Vue 实例**,以及可选的嵌套的、可复用的组件树组成。

##### 组件

定义一个名为 button-counter 的新组件

“`
Vue.component(‘button-counter’, {
  data: function () {
    return {
      count: 0
    }
  },
  template: ‘<button v-on:click=”count++”>You clicked me {{ count }} times.</button>’
})
“`

组件是可复用的 Vue 实例,且带有一个名字:在这个例子中是 `<button-counter>`,我们可以在一个通过 `new Vue` 创建的 Vue 根实例中,把这个组件作为自定义元素来使用:

“`
<div id=”components-demo”>
  <button-counter></button-counter>
</div>
“`

“`
new Vue({ el: ‘#components-demo’ })
“`

因为组件是可复用的 Vue 实例,所以它们与 `new Vue` 接收相同的选项,例如 `data`、`computed`、`watch`、`methods` 以及生命周期钩子等,仅有的例外是像 `el` 这样根实例特有的选项。
 

展开阅读全文

© 著作权归作者所有

举报

打赏

0


0 收藏

微信
QQ
微博

分享

作者的其它热门文章

[JS] 将 NodeList 转换为数组。
[Vue] v-on 的重点源码
[CSS] 使用伪元素实现美化半个字符
[Problem] css3中transition和display的不兼容


程序员灯塔
转载请注明原文链接:[Vue] 实例
喜欢 (0)