-
2022-06-09 14:27:03
<template> 它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。在 template 元素上使用 v-if 条件渲染分组
因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 元素。
<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template>更多相关内容 -
详解Vue template 如何支持多个根结点
2020-11-20 22:03:23如果你试图创建一个没有根结点的 Vue template，像这样： <template> <div>Node 1 <div>Node 2 </template> 不出意外的话你会得到一个编译错误或者运行时错误，因为 template 必须有一个根元素。 通常你可以在... -
Vue实例中的template讲解(1)
2021-11-04 14:52:31//别忘了引包 <body> <div id="app-1"> {{msg}} </div> ================ <div id="app-2"> {{msg}} </div> ================= <... //在vue.js中，可以使.展开全文<body> <div id="el"> </div> <script type="text/x-template" id="demo-template"> <div> <p>Selected: {{ selected }}</p> <select2 :options="options" v-model="selected"> <option disabled value="0">Select one</option> </select2> </div> </script> <!--前后不分离 可以这样做 --> <script type="text/x-template" id="select2-template"> <select> <slot></slot> </select> </script> <script> Vue.component('select2', { props: ['options', 'value'], template: '#select2-template', mounted: function () {}, watch: {}, destroyed: function () {} }) var vm = new Vue({ el: '#el', template: '#demo-template', data: { selected: 0, } }) </script> </body> </html>先说下上面的：type="text/x-template"
1. script不写type默认是text/javascript，如果写了不被识别的type将被浏览器忽略。text/x-template或text/html可能只是为了语义而已~而且在有些编辑器还具有语法高亮的显示，type="text/diy"随便写也可以
2. script的type为各种template的时候，可能就是使用了模板引擎。
//别忘了引包 <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>render > template > el 属性优先性：
1.当Vue选项对象中有render渲染函数时，Vue构造函数将直接使用渲染函数渲染DOM树。2.当选项对象中没有render渲染函数时：Vue构造函数首先通过将template模板编译生成渲染函数，然后再渲染DOM树。
3.而当Vue选项对象中既没有render渲染函数，也没有template模板时，会通过el属性获取挂载元素的outerHTML来作为模板，并编译生成渲染函数。
换言之，在进行DOM树的渲染时，render渲染函数的优先级最高，template次之且需编译成渲染函数，而挂载点el属性对应的元素若存在，则在前两者均不存在时，其outerHTML才会用于编译与渲染。
Vue模版编译原理
vue中的模板template无法被浏览器解析并渲染，因为这不属于浏览器的标准，不是正确的HTML语法，所有需要将template转化成一个JavaScript函数，这样浏览器就可以执行这一个函数并渲染出对应的HTML元素，就可以让视图跑起来了，这一个转化的过程，就成为模板编译。模板编译又分三个阶段，解析parse，优化optimize，生成generate，最终生成可执行函数render。
- 1.解析阶段：使用大量的正则表达式对template字符串进行解析，将标签、指令、属性等转化为抽象语法树AST。
- 2.优化阶段：遍历AST，找到其中的一些静态节点并进行标记，方便在页面重渲染的时候进行diff比较时，直接跳过这一些静态节点，优化runtime的性能。
- 3.生成阶段：将最终的AST转化为render函数字符串。
-
Vue实例中的template讲解
2020-05-23 12:31:10Vue实例中的template代码，调试图片原理说明图片终极结论el，template，render属性优先性 本人的第一篇博客，作为一名从大二开始入坑的后端开发小哥哥[不要脸]，现在即将毕业一年，第一次写博客文章，结果是编写的...展开全文Vue实例中的template
本人的第一篇博客，作为一名从大二开始入坑的后端开发小哥哥[不要脸]，现在即将毕业一年，第一次写博客文章，结果是编写的前端技术文章[感慨]，本人虽为后端开发小哥哥，也有着一颗学习前端的心，本篇博客有借鉴很多心目中的大牛博客的一些片段，感谢 ❤，第一次写博客好激动好激动好激动 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才会用于编译与渲染。本文有参考大佬的博客文章，链接如下：1
https://www.cnblogs.com/camille666/p/vue_instance_prop_el_template_render.html ↩︎
-
vue配置多个服务端请求地址（使用vue-admin-template举例说明）
2021-07-01 09:40:27在实际开发中，前端除了请求后端服务器还可能会请求文件服务器等，他们的地址是不一样的，例如后台地址是localhost:8001，文件服务器是localhost:8002，这里我使用vue-admin-template后台模板来举例如何配置。...展开全文在实际开发中，前端除了请求后端服务器还可能会请求文件服务器等，他们的地址是不一样的，例如后台地址是localhost:8001，文件服务器是localhost:8002，这里我使用vue-admin-template后台模板来举例如何配置。
配置跨域代理
在vue中使用proxy进行跨域的原理是：将域名发送给本地的服务器（启动vue项目的服务,loclahost:8080），再由本地的服务器去请求真正的服务器。
首先，配置好前端跨域代理，在vue.config.js中
其中process.env.VUE_APP_BASE_API代表.env.development文件中的VUE_APP_BASE_API
我们可以从request.js中看到请求地址会是VUE_APP_BASE_API（/dev-api）+请求路径。
我们验证一下：
可以看到此时请求地址都是http://localhost:9528/dev-api/+请求路径，这样前端跨域就配置好了，通过前端代理，实际的请求地址是http://localhost:8001/+请求路径。
这样文章开头的问题就产生了，所有请求都是默认代理请求的是localhost:8001，当我们使用文件上传或者请求别的服务，如果文件服务器地址是localhost:8002，那我们就不会请求到，那么该如何配置呢？
通俗的说就是把/dev-api之前的都换成了localhost:8002，然后交给启动vue项目的服务器去请求。
配置多个服务端请求
其实只要弄明白了上面处理跨域的过程，就很容易理解如何配置多个服务器请求，无非是再处理一遍，在.env.development文件中添加新的代理字段，VUE_APP_UPLOAD_API = '/dev-upload-api'
对应的在vue.config.js中添加一个新的代理，
我们复制request.js,改名request-proxy.js，内容一致，只修改baseURL：''
（1）在上传图片文件时如下图的写法，请求路径会变成http://localhost:9528/dev-upload-api/upload/uploadImage，实际上的请求路径是http://localhost:8002/upload/uploadImage，就成功了。
（2）在请求的需要使用的api文件中如下图引入使用
这样请求路径会变成http://localhost:9528/dev-upload-api/+请求路径,实际的请求地址变成了http://localhost:8002/+请求路径。
可能你的项目不是使用的vue-admin-template，但只要是vue+axios，配置的思路都是一样的，只要能理解了如何配置，相信你也可以解决自己的问题。
-
SpringBoot实现Vue-admin-template登录.docx
2022-06-27 21:18:27vue-admin-template是一个简化版的vue-element-admin的模板， 适合vue用来做项目的搭建，虽然官方文档以及花裤衩前端大佬 在博客中已经将大部分的疑难杂症解决了，但当完全自己搭建的 时候才发现多折腾 vue-admin-... -
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: '#... -
vue中template标签的使用
2021-12-29 22:37:11vue中template标签的使用 -
vue-admin-template 解决跨域问题
2022-03-24 16:32:31vue-admin-template 解决跨域请求问题 -
vue-admin-template解决跨域问题详解
2021-05-22 09:19:33vue-admin-template入门详解(后端springboot+sprngsecurity+jwt+redis) 自&如 2020-05... -
关于template标签用法总结(含vue中的用法总结)
2020-09-13 18:14:48三、vue中的template 1、template标签在vue实例绑定的元素内部 2、vue实例中的template属性 一、html5中的template标签 html中的template标签中的内容在页面中不会显示。但是在后台查看页面DOM结构... -
Vue中template的作用及使用
2020-03-31 14:12:25先来看一个需求：下图用v-for做了列表循环，现在想要span也一起循环，应该怎么做： <div id = "app"> <div> <div v-for="item in lists"> <span>{{item.name}}</span> </... -
Vue中动态添加多个class
2019-05-09 18:55:15vue中可以通过 :class=""这样来根据一定的条件来动态添加class，但是有时候需要判断的条件比较多，需要动态添加的class也比较多，这个时候其实也很简单 <template> <section class="p-10 cursor-pointer... -
详解template标签用法(含vue中的用法总结)
2021-06-12 16:51:20一、html5中的template标签html中的template标签中的内容在页面中不会显示。但是在后台查看页面DOM结构存在template标签。这是因为template标签天生不可见，它设置了display:none;属性。我是template我是自定义表现... -
vue2.js中配置项两个template的用法详解
2018-09-29 17:58:292.重点,这个template不是<template />自带标签。template配置项专门用来替换el的。值可以是"<div></div>",也可以是全局或局部组件。 2.1 template是组件的... -
vue实例中的template属性
2020-02-29 21:07:05将实例中template属性值进行编译，并将编译后的dom替换掉vue实例绑定的元素，如果该vue实例绑定的元素中存在内容，这些内容会...2）template属性中的dom结构只能有一个根元素，如果有多个根元素需要使用v-if、v-els... -
vue3-template的使用
2021-09-28 10:51:42根据某个状态渲染多个模板的 v-if v-else 2. 插槽的场景 <tempalte #default></template> <tempalte #footer></template> <div class="container"> <ul> <!-- tem. -
vue-admin-template学习（一）
2020-08-12 15:49:49在学习vue的过程中，想要获取一个vue的脚手架，便于快速进行开发，选择了vue-admin-template，将该框架进行二次开发，作为vue初学者，踩了很多坑，以此记录分析和修改。 github：https://github.com/PanJiaChen/vu -
SpringBoot整合vue-admin-template实现登录
2020-11-04 16:31:51vue-admin-template简介 ...更多详情请阅读vue-template-admin官网，vue-admin-template项目是其基础模板，本文基于vue-admin-template实现与SpringBoot的整合 SpringBoot整合vue-admin-template ... -
【异常-Vue-HBuilder】写的vue的template里面的多个div只显示了一个
2020-10-31 14:08:10在template中写了三个div却只显式一个 错误代码 var CartList = { template: ` <div class="list"> <img src="img/integral.png"> <button type="button">-</... -
解决 vue-admin-template 退出登录,无法跳转到登录页面
2021-10-25 12:07:49使用的前端vue组件的 vue-...获取出在cookies中存储的 名称为"vue_admin_template_token",需要在退出登录的时候将这个token给删除掉,才能退出登录,前端代码如下: logout() { this.$confirm("确定退出系统?", "提示", -
快速搞懂Vue里面components和template
2019-08-12 00:59:33vue可以把内容变成组件化，然后提高复用性,那是怎样进行组件化，然后使用呢？ 1.先写组件 2.引用组件 我们是单独写的一个js文件存放组件的所以它不是全局引用的，所以我就要把上面写好的registerForm组件引用过来... -
在Vue组件中使用多个Vue组件搭建一个页面
2020-10-28 17:28:24在Vue组件中使用多个Vue组件搭建一个页面 预设页面结果 全局注册 是在main.js中，通过import和Vue.conponent进行组件注册的。 import Vue from 'vue' import App from './App.vue' import Header from './... -
Vue组件的三大部分－template、script、style
2022-01-08 15:03:38之前接触到的 App.vue 文件本质上就是一个 vue 的组件。每个 .vue 组件都由 3 部分构成，分别是： template -> 组件的模板结构 script -> 组件的 JavaScript 行为 style -> 组件的样式 其中，每个组件中 -
vue-element-admin 和 vue-admin-template 有什么区别？
2021-03-15 22:20:06vue-element-admin 是一个后台的集成方案，它囊括了很多的功能和组件，并不适合作为基础模板来进行二次开发。 vue-admin-template 则是一个后台的基础模板脚手架，适合在它的基础上进行二次开发。 -
基于vue-element-template项目开发总结(一)
2020-09-03 18:33:23vue-element-template是一个轻量级后台管理系统基础模板，他的爸爸是vue-element-adimin，vue-element-admin 是一个后台集成解决方案，它基于 vue 和 element。它使用了最新的前端技术栈，内置了 i18 国际化解决方案... -
Vue+vue-admin-template+nginx后台（Windows）部署
2020-09-29 20:35:252、vue_admin_template项目，请求后台接口9000 本身接口8082（项目内已经配置完成，貌似是我自己想多了），打包就不讲了，按README.md说明来就行，但注意两点： a、将vue.config.js文件中的pu. -
vue-admin-template使用教程
2021-03-06 13:10:161、将英文修改为中文，找到src/main.js文件， // set ElementUI lang to EN //Vue.use(ElementUI, { locale }) // 如果想要中文版 element-ui，按如下方式声明 Vue.use(ElementUI) //取消该行注释 -
vue跨域多个代理设置
2020-04-03 17:28:46// 在config index.js module.exports 下面的dev里面配置多域名代理。 proxyTable: { '/api1': { target: '域名1请求地址', changeOrigin: true, pathRewrite: { '^/api1':'/' } ...
