回看之前写的,没有对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&