修仙之路:chenxy-0102.github.io/

在构造函数中传入一个对象，并且在对象中声明各种 Vue 需要的数据和方法，包括：

data
methods

Vue 实例中除了可以定义 data 属性，也可以定义方法，并且在 Vue 实例的作用范围内使用。

html:

<div id="app">
  {{num}}
  <button v-on:click="add">加</button>
</div>

js:


    methods:{
        add():{
            // this代表的当前vue实例
            this.num++;
        }
    }

组件化

在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。

但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。

.全局组件.

通过 Vue 的 component 方法来定义一个全局组件。

组件其实也是一个 Vue 实例，因此它在定义时也会接收：data、methods、生命周期函数等不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有 el 属性。但是组件渲染需要 html 模板，所以增加了 template 属性，值就是 HTML 模板全局组件定义完毕，任何 vue 实例都可以直接在 HTML 中通过组件名称来使用组件了。 data 必须是一个函数，不再是一个对象。

组件的复用定义好的组件，可以任意复用多次：

局部注册一旦全局注册，就意味着即便以后你不再使用这个组件，它依然会随着Vue的加载而加载。

因此，对于一些并不频繁使用的组件，我们会采用局部注册。

我们先在外部定义一个对象，结构与创建组件时传递的第二个参数一致：

const counter = { template:' < button v-on:click="count++" > data(){ return { count:0 } } }; 然后在 Vue 中使用它：

var app = new Vue({ el:"#app", components:{ counter:counter // 将定义的对象注册为组件 } }) components 就是当前 vue 对象子组件集合。其 key 就是子组件名称其值就是组件对象的属性效果与刚才的全局注册是类似的，不同的是，这个 counter 组件只能在当前的 Vue 实例中使用

修仙传送门:

chenxy-0102.github.io/

Vue 实例与组件化

组件化

.全局组件.