Vue使用日记（14）：el和template的关系

已于 2024-01-10 12:37:29 修改
阅读量702 收藏
点赞数
分类专栏： Vue.js 文章标签： vue.js javascript 前端
于 2019-10-18 01:33:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jimson_zhu/article/details/102617755
版权
Vue.js 专栏收录该内容
33 篇文章 3 订阅 ¥99.90 ¥299.90
订阅专栏
本文探讨了在Vue开发中如何避免直接修改index.html，通过定义template属性实现视图内容的动态插入。el属性用于指定Vue管理的DOM区域，而template则允许开发者将模板内容替换el挂载的DOM，简化开发过程。这种方式使得在不改动index.html的前提下，仅通过template编写和组织代码，提高效率。
摘要由CSDN通过智能技术生成

到目前为止，我们开发的项目都是单页面应用（single page web application，SPA）。

目前编写的单页面应用的缺点就是，只有一个index.html文件，项目正常运行之后，我们需要考虑另外一些问题：

如果我们希望将data中的数据显示在界面中，就必须修改index.html；

如果我们后面自定义了组件，也必须修改index.html来使用组件。

但是index.html模板在之后的开发中，我并不希望手动地去频繁修改，是否可以做到呢？可以。

定义

了解本专栏 订阅专栏 解锁全文
jimson_zhu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
Vue使用日记（6）：Vue组件化理解（二）
jimson_zhu的博客
07-15 115
全局组件和局部组件 前面我们使用Vue.component()的方式注册组件时，注册的组件是全局的，这意味着该组件可以在任意Vue实例下使用。 如果将这个组件挂载到某一个Vue实例中，该组件就是一个局部组件了。 const myComponent = Vue.extend({ template:` <div> <h2>我是标题&l...
el属性和template属性的关系
lzc2644481789的博客
08-04 1006
一、简介： 本篇文章主要介绍el属性和template属性的关系： 一句话来概括，当el和template同时出现的时候，template中的代码会替代el挂载的DOM元素。 const app = new Vue({ el: '#app', data: { message: 'hello', name: 'lzc' }, template: ` <div> <h2...
vue中el和template的关系
weixin_50680057的博客
10-24 434
当el和template同时存在时，template会替换掉el中的内容
14 el和template
PBitW的博客
08-22 169
el和template区别 App.vue的演化 报错 省略引入时的.vue配置 配置别名
webpack配置vue之进阶
hhtSeeTheWorld的博客
04-20 181
之前的项目还是在main.js文件中创建一个vue实例，并定义数据，然后在index.html文件中挂载这个实例 现在我们不在index.html文件中写 {{message}} 直接就定义一个div就可以了 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210420001133216.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ib
Vuejs--13创建Vue时template和el的关系、VUE文件来封装组件
gaxing4615的博客
03-29 211
1、创建Vue时template和el的关系 当template和el并存。编译执行时template会取代挂载el <div id="app"> </div> new Vue({ el:"#app", template:` <div> <div>{{msg}}</div> <div>测试替换&l...
创建Vue时template和el的关系
weixin_44020809的博客
07-19 451
SPA（simple page application）单页面应用 多页面通过路由跳转vue-router(前端路由) 一般开发时只有一个index.html页面，所以在里面，一般只有这个，外面的壳，而没有里面的内容 el和template区别（一）： 提出问题模型： 如果外面希望将data中的数据显示在界面中，就必须是修改index.html 如果外面后面自定义了组件，也必须修改index.html来使用组件 但是html模板在之后的开发中，我并不希望手动的来频繁修改，是否可以做到？ 定义template
Vue使用日记（5）：Vue组件化理解（一）
jimson_zhu的博客
07-15 731
Vue组件化开发 组件化是Vue.js中的重要思想，任何应用都可以拆分成一个个组件进行管理和复用，如果将整个应用比喻成一棵树，那么这个应用会自上而下被拆分成独立的模块，形成一棵“组件树”。 注册组件的基本步骤： 1）创建组件构造器：调用Vue.extends()创建组件构造器； 2）注册组件：调用Vue.component()注册组件； 3）使用组件：在Vue实例作...
Vue使用日记（7）：组件的data数据存放
jimson_zhu的博客
07-16 1224
组件是一个单独功能模块的封装：这个模块有属于自己的HTML模板，也应该有属于自己的data数据。 组件中的数据保存在哪？组件的data能不能保存在Vue实例上呢？ 经过测试，在组件中不能直接访问Vue实例中的data。 即便能访问，如果将所有的数据都放在Vue实例中，Vue实例会变得非常臃肿。 <div id="app"> <my-cpn></my-...
Vue使用日记（9）：Vue组件之间的通信（二）
jimson_zhu的博客
08-03 332
有时候我们需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问根组件。 官方指出： 1）父组件访问子组件：使用$children或$refs； 2）子组件访问父组件：使用$parent。 父组件访问子组件：$children 1）this.$children是一个数组，它包含所有子组件对象； 2）我们这里通过一个遍历，取出所有子组件的message状态。 ...
Vue template挂载中el和mouted的使用和区别
子敬的技术博客
08-09 1425
Vuetemplate挂载中el和mouted的使用和区别 // 通过 vue 对象中声明 el 属性绑定操作块元素选择器 <div id="app"> <p>{{ message }}</p> <p>{{ good }} </p> </div> <script> new Vue({ el ...
Web前端最全Vue实例属性之el,template,render(2)，大专生面试阿里P7居然过了
最新发布
2401_84620143的博客
05-16 869
疯狂编程学习效果可视化写博客阅读优秀代码心态调整这是template属性模板渲染。})new Vue({data: {info: ‘这是通过el属性获取挂载元素的outerHTML方式渲染。})3、查看渲染结果这是render属性方式渲染。这是template属性模板渲染。这是通过el属性获取挂载元素的outerHTML方式渲染。
41.el和template区别 ＆ VUE实现分离写法
Bi-Hu的博客
08-03 263
如果我们希望将data中的数据显示在界面中，就必须是修改index.html,如果我们后面自定义了组件，也必须修改index.html来使用组件,但是html模板在之后的开发中，并不希望手动的来频繁修改. 定义template属性： 在前面的Vue实例中，我们定义了el属性，用于和index.html中的#app进行绑定，让Vue实例之后可以管理它其中的内容，我们吧index,html中的代码删...
Vue实例属性之el,template,render
风不冷的博客
12-19 261
当Vue选项对象中有render渲染函数时，Vue构造函数将直接使用渲染函数渲染DOM树，当选项对象中没有render渲染函数时，Vue构造函数首先通过将template模板编译生成渲染函数，然后再渲染DOM树，而当Vue选项对象中既没有render渲染函数，也没有template模板时，会通过el属性获取挂载元素的outerHTML来作为模板，并编译生成渲染函数。一，el，template，render属性优先性。一，el，template，render属性优先性。三，render渲染函数。
Vue实例属性之el,template,render(1)
2401_84152232的博客
04-08 629
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料分享给大家，戳这里即可领取难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料分享给大家，戳这里即可领取。
2024年Web前端最全Vue实例属性之el,template,render(1)，小红书 前端 面试
2301_82243839的博客
05-11 994
除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】data: {info: ‘这是通过el属性获取挂载元素的outerHTML方式渲染。},这是template属性模板渲染。})new Vue({data: {info: ‘这是通过el属性获取挂载元素的outerHTML方式渲染。})
vue中el属性，template属性，render函数的优先级，el属性，template属性，render函数分别都做了什么事情
qq_45753147的博客
04-01 771
//1、el，template，render(渲染函数)都是vue对象对应的HTML元素（DOM对象） //2、优先级顺序：el < template < render //3、el对应的HTML元素是写在网页上的。 //1、el，template，render(渲染函数)都是vue对象对应的HTML元素（DOM对象） //2、优先级顺序：el < template < render //3、el对应的HTML元素是写在网页上的。 HTML代码： <!DOCTY.
Vue基础教程：el与data的使用解析
"Vue.js学习笔记，探讨Vue的基础部分，包括el和data的两种...Vue的基础部分包括对`el`和`data`的正确理解和使用，以及对MVVM模型的深入认识。在实际开发中，掌握这些基本概念对于编写高效且可维护的Vue应用至关重要。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jimson_zhu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值