Vue.js初学备忘（五）多页面开发详细记录

回看之前写的，没有对vue吃得透，有很多小坑，这里记录和完善一下。

一、两种引用组件方式

第一种：

main.js:这里粗体部分就是引用组件App之后，将App这个组件加入到template的意思

import Vue from 'vue'
import App from './App'

var app = new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  data: {
    message: 'Runoob!'
  }
})

index.html:

  <div id="app">
      <p>{ { message }}</p>
      <input v-model="message">
    </div>

<div id="app-2">
</div>

第二种：

main.js:这里去掉上面 template: '<App/>',然后我们直接在html中写该组件

var app = new Vue({
  el: '#app',
  router,
  components: { App },
  data: {
    message: 'Runoob!'
  }
})

index.html：

<div id="app">
      <App></App>
      <p>{ { message }}</p>
      <input v-model="message">
    </div>

引入这个App.vue这个组件的全部内容，我们在App.vue中又可以引入组件（通俗易懂的说法就是我有一个水缸（index.html），水缸里有水(App.vue)，水中有自己的一些东西（自身的）和鱼（CPone.vue）,可以这样理解，就是包含关系）

App.vue

<template>
  <div id="app1">
    <img src="./assets/logo.png">
    <h1>{
  {msg}}</h1>
    <CPone>&l