Vue.js 组件内容不显示

ing · 发表于 2019-9-9 12:07

本帖最后由 ing 于 2019-9-9 13:43 编辑

想法：自己定义一个vue组件在index.html上生效。
问题：自己定义的vue组件不生效
详细：
我将App.vue的内容复制粘贴到App2.vue内,对它进行修改。
在app2.js 注册组件结果，App2.vue里的内容(asd1asd1asd3)不显示，这是app2.vue文件在index.html页面的视图
捕获.PNG

这是写在App.vue的效果
捕获2.PNG

app2.vue

[Asm] 纯文本查看 复制代码

<template>
  <div id="app">
    asd1asd1asd3
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App2'
}
</script>

app2.js

[Asm] 纯文本查看 复制代码

import Vue from 'vue'
import router from './router'
import App2 from './components/App2'

// 全局注册
let PlanCompent = {
  tempalte: '#template-name',
  props: {
    name: {
      type: String,
      required: true
    }
  }
}

//（局部）本地注册
Vue.component('component-name', {
  template: '<li>这是个待办项</li>'
})

new Vue({
  el: 'component-name',
  router,
  components: {
    App2
  },
  template: '<App2/>'
})

index.html

[Asm] 纯文本查看 复制代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>my-project</title>
</head>

<body>
  <div id="app"></div>
  <ol>
    <component-name></component-name>
  </ol>

</body>

</html>

xiaoye_yhf · 发表于 2019-9-9 12:25

运行起来只要改我图片的那两点就可以了
但是要熟悉vue,这样运行起来是远远不够的

ing · 发表于 2019-9-9 13:45

xiaoye_yhf 发表于 2019-9-9 12:25
运行起来只要改我图片的那两点就可以了
但是要熟悉vue,这样运行起来是远远不够的

抱歉，我排版重新更新了下，不显示的是App2.vue文件，App.vue是官方文件可以显示

帐号		自动登录	找回密码
密码			注册[Register]

[求助] Vue.js 组件内容不显示