vue中多个template

Vue实例中的template讲解

千次阅读 2020-05-23 12:31:10

Vue实例中的template代码，调试图片原理说明图片终极结论el，template，render属性优先性本人的第一篇博客，作为一名从大二开始入坑的后端开发小哥哥[不要脸]，现在即将毕业一年，第一次写博客文章，结果是编写的...



 Vue实例中的template
 代码，
调试图片
原理说明图片
终极结论
el，template，render属性优先性
 


 本人的第一篇博客，作为一名从大二开始入坑的后端开发小哥哥[不要脸]，现在即将毕业一年，第一次写博客文章，结果是编写的前端技术文章[感慨]，本人虽为后端开发小哥哥，也有着一颗学习前端的心，本篇博客有借鉴很多心目中的大牛博客的一些片段，感谢
❤，第一次写博客好激动好激动好激动 
wawawa,淡定我可是一个安静的帅气的阳光的小哥哥， 
嘻嘻嘻嘻
 
代码， 
//别忘了引包
<body>
  <div id="app-1">
     {{msg}}
  </div>
  ================
  <div id="app-2">
     {{msg}}
  </div>
  =================
  <div id="app-3">
     {{msg}}
  </div>

  <script>
    //在vue.js中，可以使用template给元素添加模板，但是元素中只能有一个根元素，不能出现两个或两个以上的根同级元素。还可以在模板中绑定数据、表达式等。下面利用实例说明如何添加模板
    // 创建 Vue 实例，得到 ViewModel
    new Vue({
      el: '#app-1',
      data: {
         msg:'这是通过el属性获取挂载元素的outerHTML方式渲染' 
      }
    });
    //结论:如果vue实例中有template属性，会将该属性值进行编译，将编译后的虚拟dom直接替换掉vue实例绑定的元素（即el绑定的那个元素);
    //注意:template属性中的dom结构只能有一个根元素，如果有多个根元素需要使用v-if、v-else、v-else-if设置成只显示其中一个根元素；
    new Vue({
      el: '#app-2',
      data: {
         msg:'这是通过el属性获取挂载元素的outerHTML方式渲染' 
      },
      template:'<div>这是template属性模板渲染</div>'
    });
    //render 
    new Vue({
      el: '#app-3',
      data: {
         msg:'这是通过el属性获取挂载元素的outerHTML方式渲染' 
      },
      template:'<div>这是template属性模板渲染</div>',
      render: function(createElement){
        return createElement('div', 
        // 参数2、这里相当于给标签加属性 例如：<div style='color:red,font-size: 14px'></div>
        {
　　　　　　 //给div绑定样式
　　　　　　 style:{
　　　　　　　　　width:'300px',
                height:'400px',
                color:'pink'
　　　　　　 },　
　　　　　　//给div绑定点击事件　　
            on: {
                click: () => {
                    console.log('点击事件')
                }
            }
        },
        // 参数3、参数中渲染的标签的子元素数组（可选） 
        // [
        //    // 文本节点直接写就可以
        //    'text'
        // ]
        '这是render属性方式渲染。'
        );
      }
    });
  </script>
</body>
 
调试图片 
 
原理说明图片 
 
终极结论 
el，template，render属性优先性 
当Vue选项对象中有render渲染函数时，Vue构造函数将直接使用渲染函数渲染DOM树，当选项对象中没有render渲染函数时，Vue构造函数首先通过将template模板编译生成渲染函数，然后再渲染DOM树，而当Vue选项对象中既没有render渲染函数，也没有template模板时，会通过el属性获取挂载元素的outerHTML来作为模板，并编译生成渲染函数。
 换言之，在进行DOM树的渲染时，render渲染函数的优先级最高，template次之且需编译成渲染函数，而挂载点el属性对应的元素若存在，则在前两者均不存在时，其outerHTML才会用于编译与渲染。 
本文有参考大佬的博客文章，链接如下：¹ 
 
 
 https://www.cnblogs.com/camille666/p/vue_instance_prop_el_template_render.html ↩︎

收起

展开全文

vue 中关于“template”标签的两个报错

千次阅读 2019-04-02 16:48:52

1.template本身没有很特别的意义，可以了解下html 的template标签 2.官网以及其他人所描述的“根...3.经常2个错误： Component template should contain exactly one root element. <template> <div>...

1.template本身没有很特别的意义，可以了解下html 的template标签
2.官网以及其他人所描述的“根元素”，是指template标签下的元素，不包括也不是template本身
3.经常2个错误：

Component template should contain exactly one root element.

<template>
    <div>1</div>
    <div>2</div>
</template>

如上面所说：根元素是指template里面第一层的同级元素，这里同级元素有2个，也就是有2个根元素了（根元素就是那两个div）。
tempalate下面第一层同级元素只能有一个，即所谓的只能有一个根元素

Cannot use <template> as component root element because it may contain multiple nodes.

这个错就是题主的错误，这个错误的意思是template下面不能使用template来做根元素，因为template本身就不能够保证不犯上面的错误。

举个例子：不是说根元素只允许一个吗，那我再用个template来做根元素不就好了，比如

<template>
    <template>
        ...
    </template>
</template>

不好意思，NO！因为你本身就不能保证这个用来做根元素的template它自己只有一个根元素，也就是第二个template里的“...”不一定只有一个根元素，这是vue不允许的。

题主就是第二个错误：题主想用template来做一个根元素，但是这个template里面有label和input 两个同级元素了，也就是不只一个根元素了。

note：当然，template下面第一层同级元素只允许一个只是针对根元素来讲的，当里面嵌套的template已经和根元素没什么关系了，就可以为所欲为！
例子：

<template>
  <div>
    <template>
      <template>
        232432
      </template>
    </template>
  </div>
</template>

如有不对，请指正^_^

收起

展开全文

vue-admin-template 多个跨域模式设置

千次阅读 2020-09-28 11:27:10

1、直接在proxyTable中配置 1）配置开发环境下默认计划服务器地址跨域 2）配置开发环境下天气信息跨域简单模式时完整配置，如天气信息getWeather的实际完整地址 3）修改开发环境的默认根目录地址为主要的...

通常在跨域时会涉及到从某个固定的服务器获取数据，比如计划信息从计划接口服务器获取（主要的跨域地址），但是天气信息从固定的气象接口服务器获取，图片信息从图片接口服务器获取，此时不能用原来的默认模式

一、简单的方法（只讲开发模式下）

1、直接在proxyTable中配置

1）配置开发环境下默认计划服务器地址跨域

2）配置开发环境下天气信息跨域

简单模式时完整配置，如天气信息getWeather的实际完整地址

3）修改开发环境的默认根目录地址为主要的跨域配置地址

在根目录下找到.env.production文件，修改VUE_APP_BASE_API为1.1中设置的计划的跨域地址/apis

可以看到这个VUE_APP_BASE_API是在src/utils/request.js文件中被引用

修改后，重新编译，运行，可以看到对应的模拟登陆接口请求头也变成了apis

2、配置计划相关接口

在src/api目录下新建myplan.js 文件，在文件中配置有关计划的接口，配置时要先引入request.js 通用配置

3、计划接口具体调用实现

先引入接口文件

import { getAll } from '@/api/myPlan'

接口调用

getAll(params).then

4、气象接口配置

1）在src/utils下新建requestProxy.js

requestProxy.js和request.js 基本相同，只是修改baseURL为''

2）在src/api下新建mapProxy.js 文件，在其中配置具体的接口及其实现

a、注意这里的接口中的url是基于第一步中的气象跨域配置来实现的，如下图若气象跨域配置为完整的气象接口，则在mapProxy.js中的url只需要填写/getWeather

b、如果气象跨域配置到weatherforecastinfo，则在mapProxy.js中的url需要填写/getWeather/getweatherinfobycityid.do

c、进一步的，还可以将气象接口的整个根目录名称如 mchart 也配置成配置，这样跨域配置为

对应的接口配置如下，先引入气象接口项目名称，再配置接口

3)气象具体的调用方式同计划的调用方式一样

总结，就是配置两种axios 的调用方式，默认的请求引入的是request文件，其中axios默认的baseURL要配置成主要的跨域地址，对于其它级别的跨域请求，引入的是requestProxy.js文件，baseURL设置为‘’

收起

展开全文

关于template标签用法总结(含vue中的用法总结)

万次阅读 多人点赞 2019-09-02 20:31:11

文章目录html5中的template标签template标签操作的属性和方法vue中的template html5中的template标签 html中的template标签中的内容在页面中不会显示。但是在后台查看页面DOM结构存在template标签。这是因为template...



 文章目录
 一、html5中的template标签
二、template标签操作的属性和方法
三、vue中的template
1、template标签在vue实例绑定的元素内部
2、vue实例中的template属性
  
 

 
一、html5中的template标签 
html中的template标签中的内容在页面中不会显示。但是在后台查看页面DOM结构存在template标签。这是因为template标签天生不可见，它设置了display:none;属性。 
<!--当前页面只显示"我是自定义表现abc"这个内容，不显示"我是template",这是因为template标签天生不可见-->
<template><div>我是template</div></template>
<abc>我是自定义表现abc</abc>
 
二、template标签操作的属性和方法 
content属性:在js中template标签对应的dom对象存在content属性，对应的属性值是一个dom节点，节点的nodeName是#document-fragment。通过该属性可以获取template标签中的内容，template对象.content可以调用getElementById、querySelector、querySelectorAll方法来获取里面的子节点。
innerHTML:可以获取template标签中的html。 
<template id="tem">
    <div id="div1">我是template</div>
    <div>我是template</div>
</template>
<script>
    let o = document.getElementById("tem");
    console.log(o.content.nodeName);//#document-fragment
    console.log(o.content.querySelectorAll("div"));//NodeList(2) [div#div1, div]。得到一个类数组
    console.log(o.content.getElementById("div1"));//<div id="div1">我是template</div>
    console.log(o.innerHTML);//'<div id="div1">我是template</div><div>我是template</div>'
</script>
 
三、vue中的template 
1、template标签在vue实例绑定的元素内部 
 
 它是可以显示template标签中的内容，但是查看后台的dom结构不存在template标签。如果template标签不放在vue实例绑定的元素内部默认里面的内容不能显示在页面上，但是查看后台dom结构存在template标签。 
 
<div id="app">
    <!--此处的template标签中的内容显示并且在dom中不存在template标签-->
    <template>
        <div>我是template</div>
        <div>我是template</div>
    </template>
</div>
<!--此处的template标签中的内容在页面中不显示，但是在dom结构存在该标签及内部结构-->
<template id="tem">
    <div id="div1">我是template</div>
    <div>我是template</div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
    });
</script>
 
注意： vue实例绑定的元素内部的template标签不支持v-show指令，即v-show="false"对template标签来说不起作用。但是此时的template标签支持v-if、v-else-if、v-else、v-for这些指令。 
<div id="app">
    <template v-if="true">
    <!--此时template标签中的内容显示在页面上，但是看dom结构没有template标签-->
        <div>我是template</div>
        <div>我是template</div>
    </template>
    <div v-if="true">
    <!--此时页面上显示div标签中的内容，并且看dom结构存在最外面的div标签-->
        <div>我是template</div>
        <div>我是template</div>
    </div>
    <!--此处会输出6个‘我是template’并且dom结构中不存在template标签-->
    <template v-for="a in 3">
        <div>我是template</div>
        <div>我是template</div>
    </template>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
    });
</script>
 
2、vue实例中的template属性 
 
 将实例中template属性值进行编译，并将编译后的dom替换掉vue实例绑定的元素，如果该vue实例绑定的元素中存在内容，这些内容会直接被覆盖。
 特点： 
 1）如果vue实例中有template属性，会将该属性值进行编译，将编译后的虚拟dom直接替换掉vue实例绑定的元素（即el绑定的那个元素）；
2）template属性中的dom结构只能有一个根元素，如果有多个根元素需要使用v-if、v-else、v-else-if设置成只显示其中一个根元素；
3）在该属性对应的属性值中可以使用vue实例data、methods中定义的数据。 
 
<!--此处页面显示hello-->
<div id="app"></div>
<!--此处template标签必须在vue绑定的元素外面定义，并且在页面中不显示下面的template标签中的内容-->
<template id="first">
    <div v-if="flag">{{msg}}<div>
    <div v-else>111<div>
</template>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
            msg:"hello",
            flag:true
        },
        template:"#first"//通过该属性可以将自定义的template属性中的内容全部替换app的内容，并且会覆盖里面原有的内容，并且在查看dom结构时没有template标签
    });
</script>
 
上面的例子中html中的template标签可以变成自定的标签，如下。但是下面这种方式也可以将<abc></abc>标签中的内容替换掉app元素，但是<abc></abc>标签中的内容也会显示在页面上。所以此处利用template标签来定义vue实例中需要设置的template属性。 
<abc id="first">
    <div v-if="flag">{{msg}}<div>
    <div v-else>111<div>
</abc>
 
上面的实例还可以写成下面的形式 
<!--此处页面显示hello-->
<div id="app"></div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
            msg:"hello",
            flag:true
        },
        template:"<div v-if='flag'>{{msg}}</div><div v-else>123</div>"//模板中只能有一个根元素，如果有多个需要使用v-if、v-else、v-else-if来选择显示哪一个
    });
</script>

收起

展开全文

简单理解vue中el、template、replace元素
千次阅读 2017-07-15 08:06:35
本文实例为大家解析了vue中el、template、replace的元素，供大家参考，具体内容如下 api: http://cn.vuejs.org/api/#el el 类型： String | HTMLElement | Function 限制：在组件定义中只能是函数。 ...
收起
vue-admin-template-3.8.0.zip
2020-08-13 01:18:58
vue-admin-template前端页面开发框架，你可以把 vue-element-admin当做工具箱或者集成方案仓库，在 ...从零开始手写一个后台，要考虑的东西很多，这里直接拿网上大家比较熟悉的vue-admin-template后台模版来进行改造。
收起
SpringBoot整合vue-admin-template实现登录
千次阅读 2020-11-04 16:31:51
vue-admin-template简介 ...更多详情请阅读vue-template-admin官网，vue-admin-template项目是其基础模板，本文基于vue-admin-template实现与SpringBoot的整合 SpringBoot整合vue-admin-template ...
收起
vue-admin-template学习（一）
千次阅读 2020-08-12 15:49:49
在学习vue的过程中，想要获取一个vue的脚手架，便于快速进行开发，选择了vue-admin-template，将该框架进行二次开发，作为vue初学者，踩了很多坑，以此记录分析和修改。 github：https://github.com/PanJiaChen/vu
收起
javascript
Vue进阶（幺肆玖）：Vue中template标签
千次阅读 2020-12-11 18:24:02
.vue 文件的基本结构如下： <template> ........ </template> <script> export default { name: "demo" } </script> <style scoped> .demo { font-size: 28px; } </...
收起
vue.js中的v-if指令使用template同时判断多个元素
万次阅读 2018-12-24 21:35:20
在vue.js中，v-if指令可以控制元素的显示与隐藏，用法： <div id="app" v-if="status"> 我是div </div> <script> var app = new Vue({ el: '#...
收起
VsCode搭建vue极简后台管理模板vue-admin-template
千次阅读 2019-10-11 12:26:19
vue-admin-template：一个极简的 vue admin 管理后台，它只包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西。是一个vue轻量级后台管理系统基础模板，...
收起
vue-admin-template笔记（三）
千次阅读 2018-12-13 23:22:30
文章目录Vue学习笔记（三）dashboardstoreindex.jsgetters.jsmodule/app.jsmudule/user.js参考 Vue学习笔记（三）学习vue-admin-template ...上一篇中分析了vue-admin-template的入口逻辑，包括main.js,...
收起
vue-admin-template笔记（五）
千次阅读 2018-12-15 11:13:41
文章目录Vue学习笔记（五）formnestmenu2/index.jsmenu1/index.jsmenu1/menu1-3总结参考 Vue学习笔记（五）学习vue-admin-template ...上一篇中分析了vue-admin-template的入口逻辑，包括main.js, App.vue...
收起
vue-admin-template笔记（四）
千次阅读 2018-12-14 22:41:45
文章目录Vue学习笔记（四）treetable参考 Vue学习笔记（四） ...上一篇中分析了vue-admin-template的入口逻辑，包括main.js, App.vue, router。这篇根据router来分析下其他的页面。下面是一部分路由代码，也...
收起
vue-admin-template笔记（六）
千次阅读 2018-12-16 14:04:39
文章目录Vue学习笔记（六）layoutlayout.jsResizeHandler.jsnvabar.vuehamburgerBreadcrumbAppMain.vuesidebarsidebaritemitemlink...学习vue-admin-template https://github.com/PanJiaChen/vue-admin-template 这...
收起
vue中<template>中v-for的使用以及<template>多层嵌套问题
千次阅读 2019-01-16 15:53:00
一、在template中使用v-for没有效果如上面代码所示想循环展示子菜单时使用的是v-for命令，但执行后却没有效果，子菜单的数据获取不到。原因：v-for是循环指令，它返回多个值，而这里的template是根节点，根...
收起
vue-element-template基础模板对接后台
千次阅读 2020-06-16 13:24:34
vue-element-template修改接口对接后台 1.情况说明：本教程是在vue-element-template基础上，参考vue-element-admin进行编写说明。官网：https://panjiachen.github.io/vue-element-admin-site/zh/ 2.登录流程： ...
收起
html
vue中多个倒计时实现
万次阅读 热门讨论 2018-05-03 10:11:25
比较简单只需要一个定时器setInterval，算出来赋赋值就好，但是需要多个倒计时的时候我们就要考虑把倒计时封装成通用的方法了拿我自己的vue项目举个例  <div v-for="...
收起
Vue-Element-Template学习问题记录
千次阅读 2019-08-20 00:09:02
下载vue-admin-template-master项目之后，运行 1、npm install 2、npm dev run 登录后台界面：问题1：提示代理报错。找了很多资料，基本上都是代理跨域的问题。最后发现npm install安装问题，重新执行，...
收起
element
快速搞懂Vue里面components和template
万次阅读 2019-08-12 00:59:33
vue可以把内容变成组件化，然后提高复用性,那是怎样进行组件化，然后使用呢？ 1.先写组件 2.引用组件我们是单独写的一个js文件存放组件的所以它不是全局引用的，所以我就要把上面写好的registerForm组件引用过来...
收起
components 组件模板
vue-element-template/admin 启动项目会打开两个标签页
千次阅读 2020-04-03 18:07:12
vue-element-template/admin 启动项目会打开两个标签页解决办法 1、找到 vue.config.js 中搜索 devServer 并把 open 项设置为 false 2、找到package.json 搜索 scripts 找到 dev 添加 --open 最后在启动项目就...
收起
js
两小时从零学会vue-admin-template框架
千次阅读 多人点赞 2021-05-21 10:32:21
vue-element-admin是含有丰富的组件，vue-admin-template是一个基础的单页面应用的框架，适合在vue-admin-template上二次开发，开发需要的组件就可以直接的从vue-element-admin里面拷贝上去。适合于后台管理的中小型...
收起
Vue中动态添加多个class
千次阅读 2019-05-09 18:55:15
vue中可以通过 :class=""这样来根据一定的条件来动态添加class，但是有时候需要判断的条件比较多，需要动态添加的class也比较多，这个时候其实也很简单 <template> <section class="p-10 cursor-pointer...
收起
vue中多个页面公用一个头部
千次阅读 2020-03-24 15:25:46
header.vue 头部 <template> <div class="header"> <p>{{headTitle}}</p> </div> </template> <script> export default { name: "app-header...
收起
vue-element-template/admin添加多标签(tags)功能和修改tags的背景颜色
千次阅读 2020-07-28 14:58:53
vue-admin-template\src\layout\components\TagsView 文件夹 vue-admin-template\src\store\modules\tagsView.js 2.\src\layout\components\TagsView/index.vue 删除三处 <template> <div id="tags-...
收起
es6 html5 javascript
vue--The template root requires exactly one element.的解决办法
千次阅读 2019-11-09 17:09:59
vue--The template root requires exactly one element.的解决办法 [vue/valid-template-root] The template root requires exactly one element.eslint-plugin-vue Peek Problem ...在vue中会出现以上...
收起
基于vue-element-template项目开发总结(一)
千次阅读 2020-09-03 18:33:23
vue-element-template是一个轻量级后台管理系统基础模板，他的爸爸是vue-element-adimin，vue-element-admin 是一个后台集成解决方案，它基于 vue 和 element。它使用了最新的前端技术栈，内置了 i18 国际化解决方案...
收起
vue-element-admin 和 vue-admin-template 有什么区别？
2021-03-15 22:20:06
vue-element-admin 是一个后台的集成方案，它囊括了很多的功能和组件，并不适合作为基础模板来进行二次开发。 vue-admin-template 则是一个后台的基础模板脚手架，适合在它的基础上进行二次开发。
收起
Vue+vue-admin-template+nginx后台（Windows）部署
2020-09-29 20:35:25
2、vue_admin_template项目，请求后台接口9000 本身接口8082（项目内已经配置完成，貌似是我自己想多了），打包就不讲了，按README.md说明来就行，但注意两点： a、将vue.config.js文件中的pu.
收起
前端
vue-admin-template 项目打包时的坑
2020-07-06 11:02:28
vue-admin-template打包部署时的坑
收起

Vue实例中的template讲解

Vue实例中的template

代码，

调试图片

原理说明图片

终极结论

el，template，render属性优先性

vue 中关于“template”标签的两个报错

vue-admin-template 多个跨域模式设置

关于template标签用法总结(含vue中的用法总结)

文章目录

一、html5中的template标签

二、template标签操作的属性和方法

三、vue中的template

1、template标签在vue实例绑定的元素内部

2、vue实例中的template属性

简单理解vue中el、template、replace元素

vue-admin-template-3.8.0.zip

SpringBoot整合vue-admin-template实现登录

vue-admin-template学习（一）

Vue进阶（幺肆玖）：Vue中template标签

vue.js中的v-if指令 使用template同时判断多个元素

VsCode搭建vue极简后台管理模板vue-admin-template

vue-admin-template笔记（三）

vue-admin-template笔记（五）

vue-admin-template笔记（四）

vue-admin-template笔记（六）

vue中<template>中v-for的使用以及<template>多层嵌套问题

vue-element-template基础模板对接后台

vue中多个倒计时实现

Vue-Element-Template学习问题记录

快速搞懂Vue里面components和template

vue-element-template/admin 启动项目会打开两个标签页

两小时从零学会vue-admin-template框架

Vue中动态添加多个class

vue中多个页面公用一个头部

vue-element-template/admin添加多标签(tags)功能和修改tags的背景颜色

vue--The template root requires exactly one element.的解决办法

基于vue-element-template项目开发总结(一)

vue-element-admin 和 vue-admin-template 有什么区别？

Vue+vue-admin-template+nginx后台（Windows）部署

vue-admin-template 项目打包时的坑

vue中多个template

vue.js中的v-if指令使用template同时判断多个元素