Vue-template组件开发

使用vue进行开发的时候,可以将页面的一个个模块封装成一个个组件,便于模块的复用和管理,最为常见的就是将头部或者底部封装为一个页面,然后在其他页面中引入即可。
首先先创建一个my-template.vue模板vue文件。

<template>
    <div>
        您好,我是Vue模块组件
    div>
template>

【注意】在template标签下,只能有一个根标签。即在template下只能有一个div或者其他标签,不能有其他标签与div为同级标签。

创建另外一个index.html文件,在文件中引入该模板。


<html>
<head>
    <meta charset="UTF-8">
    <title>首页title>
    
    <script src="https://vuejs.org/js/vue.min.js">script>
    <script src="https://unpkg.com/http-vue-loader">script>
    <script src="https://unpkg.com/element-ui/lib/index.js">script>
head>
<body>

<div id="app">
	
    <hello>hello>
div>
<script type="text/javascript">
	<!--vue使用httpVueLoader-->
    Vue.use(httpVueLoader);
    const app = new Vue({
    	<!--使用id选择器,表示被vue管理的范围-->
        el: "#app",
        components: {
        	<!--给自己自定义的模板选择资源路径-->
            'hello': 'url:./my-template.vue',
        },
    });
script>
body>
html>

访问index.html页面,结果如下,模板已经完全引入了。
Vue-template组件开发_第1张图片

你可能感兴趣的:(前端)