vue实例中template: App

最新推荐文章于 2024-03-31 09:31:32 发布

原创最新推荐文章于 2024-03-31 09:31:32 发布 · 1.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue #app #html #js

本文深入探讨了Vue.js中组件的使用方式与模板语法，详细解释了如何在main.js中通过import导入组件，并将其挂载到index.html指定的元素上。通过一个具体的示例，展示了组件如何替换原有HTML结构，以及组件内部的template如何定义动态内容。

官网的描述：

模板将会替换挂载的元素。挂载元素的内容都将被忽略也就是说:template: ‘’ 表示用替换index.html里面的

举个例子：

main.js:
------------------
import App from '@/App'
new Vue({
	el: '#app',
	components:{App},
	template: '<App/>'
})




App.vue
-------------------
<template>
  <transition name="fade">
    <router-view></router-view>
  </transition>
</template>

<script>
  export default {
  }
</script>



index.html
--------------------
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vuecli_01</title>
  </head>
  <body>
    <div id="app">11</div>
    <!-- built files will be auto injected -->
  </body>
</html>

在main.js中，vue实例的components 是声明有哪些组件，我们通过import App from '@/App'导入，template 是使用哪个组件，el: '#app' 是index.html 的<div id="app"></div>,它将被替换为mian.js中导入的组件App.vue，组件一般使用的方法就是<App></App>,