• 欢迎光临~

[Vue] 实例

开发技术 开发技术 2021-03-04 211次浏览

##### 简介

每一个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)