Vue一些属性的使用与解读

[gdutwyg]

Vue.extend

使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象(可以是import进来的单文件组件，也是对象)

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

当需要用import去使用.vue文件时，需要保证import之后使用Vue.extend(),才能使用new 实例化, 否则new 会报错

Vue.component

// 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))

// 注册组件，传入一个选项对象 (自动调用 **Vue.extend)
Vue.component('my-component', { /* ... */ })

// 获取注册的组件 (始终返回构造器)
var MyComponent = Vue.component('my-component')

$mount

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)

new Vue

new Vue({
  el: '#app',
  components: { App },
  template: '<App>',
  router,
  store
})

请问此处的template的用处是什么？
答： 模板将会 替换 挂载的元素。挂载元素的内容都将被忽略，除非模板（App.vue）的内容有分发插槽

也就是说：template: '<App/>' 表示用<app></app>替换index.html里面的<div id="app"></div>

// 约等同于 因为我的例子div#myapp是去不掉的, 上面例子 div#app是去掉的，这样写是方便理解
// index.html
<div id="myapp">
    <app></app>
</div>

// main.js
new Vue({
    el:'#myapp',
    router,
    components:{App}
})