（VueJs）Template

最新推荐文章于 2024-07-31 18:30:30 发布

黑胡子大叔的小屋

最新推荐文章于 2024-07-31 18:30:30 发布

阅读量760

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/lzl980111/article/details/105466776

版权

前端专栏收录该内容

75 篇文章 0 订阅

订阅专栏

el和template的区别

发现问题

到此，所学的vue的相关知识，若想将vue的date中的数据在页面显示，就要修改index.html
添加了组件，要使用也必须修改index.html
频繁修改index.html，显然不太合适

template属性

之前的学习中，我们定义了el属性用来绑定index.html的元素，让Vue实例之后管理其中的内容
template属性相当于是Vue实例的一个html模板，我们可以不用再在index.html中运用data

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Template</title>
</head>
<body>
<div id="app">
</div>
<script src="./dist/bundle.js"></script>
</body>
</html>

import Vue from 'vue'
const app=new Vue({
        el: '#app',
    template:`
        <div>
            <h2>{{message}}</h2>
            <button>template按钮</button>
        </div>
    `,
        data: {
            message:'Template属性'
        }
})

运行结果：
在这里插入图片描述

后序问题

但是这样在Vue实例中的template属性中添加，后序需要在Vue实例中写大量的html代码，不简洁，尝试将template移出去

console.log('使用webpack');
//模块化的思想
//1、CommonJS的方法
//CommonJS导入
const {add} = require('./mathUtil.js')
console.log(add(10, 20))
import Vue from 'vue'

const app = {
    template: `
        <div>
            <h2>{{message}}</h2>
            <button>template按钮</button>
        </div>
            `,
    data(){
        return{
            message: 'Template属性打包'
        }
    }
}
new Vue({
    el: '#app',
    template: `<app/>`,
    //components注册一下组件
    components:{
        app
    }
})

执行结果：
在这里插入图片描述
现在就将template属性及其用到的data属性分离出去了，分离到一个实例当中，但是当代码量增大，也会导致main.js代码量庞大，继续分离，使用导入导出
新建文件夹vue，vue下新建一个app.js

//导出app
export default {
    template: `
        <div>
            <h2>{{message}}</h2>
            <button>template按钮</button>
        </div>
            `,
    data(){
        return{
            message: 'Template属性打包3'
        }
    }
}

main.js

import Vue from 'vue'
//导入
import app from './vue/app'
new Vue({
    el: '#app',
    template: `<app/>`,
    //components注冊一下
    components:{
        app
    }
})

执行结果：
在这里插入图片描述
再优化一下，``的方式添加html代码过于笨重，现在将html代码从js中分离出来打包到.vue文件中
使用.vue文件也需要引入相应的loader：

npm install vue-loader vue-template-compiler --save-dev

在这里插入图片描述
阿西吧~
安装失败了，应该是版本号不匹配的问题，下午再弄吧，吃饭先

黑胡子大叔的小屋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（VueJs）Template

el和template的区别发现问题到此，所学的vue的相关知识，若想将vue的date中的数据在页面显示，就要修改index.html添加了组件，要使用也必须修改index.html频繁修改index.html，显然不太合适template属性之前的学习中，我们定义了el属性用来绑定index.html的元素，让Vue实例之后管理其中的内容template属性相当于是Vue实...
复制链接

扫一扫

专栏目录