-
// 在Home.vue中 export default { name: 'home' } 侧边栏 伸展/收缩 页面宽度过小自动收缩 多级菜单（利用iView组件） 用户相关 消息通知 用户头像 基本资料 动态菜单栏 根据数据动态生成菜单 在菜单项上...
-
源文件vue中多了一个template
2020-12-31 09:47:49<div><pre><code>html <template></template> </code></pre> 在最后一行,没见过这种写法....很奇怪</p><p>该提问来源于开源项目：waynecz/vue-img-inputer</p></div> -
vue实例中的template属性
2020-02-29 21:07:05将实例中template属性值进行编译，并将编译后的dom替换掉vue实例绑定的元素，如果该vue实例绑定的元素中存在内容，这些内容会...2）template属性中的dom结构只能有一个根元素，如果有多个根元素需要使用v-if、v-els...展开全文将实例中template属性值进行编译，并将编译后的dom替换掉vue实例绑定的元素，如果该vue实例绑定的元素中存在内容，这些内容会直接被覆盖。
特点：1）如果vue实例中有template属性，会将该属性值进行编译，将编译后的虚拟dom直接替换掉vue实例绑定的元素（即el绑定的那个元素）；
2）template属性中的dom结构只能有一个根元素，如果有多个根元素需要使用v-if、v-else、v-else-if设置成只显示其中一个根元素；
3）在该属性对应的属性值中可以使用vue实例data、methods中定义的数据。{{msg}}如果你是在HTML字符串上处理，类似于现在流行的MVC框架或模板技术，则template.innerHTML足矣。然，比111
-
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-admin-template 多个跨域模式设置
2020-09-28 11:27:101、直接在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设置为‘’
-
Vue - Vue中多个元素或组件的过渡
2020-08-19 12:09:59Vue中多个元素或组件的过渡一. Vue中多个元素的过渡二. Vue中多个组件的过渡 一. Vue中多个元素的过渡 transition 标签 mode 属性： in-out：多个元素切换的时候，先显示再隐藏 out-in：多个元素切换的时候，先隐藏...展开全文Vue中多个元素或组件的过渡
一. Vue中多个元素的过渡
transition 标签
mode属性：in-out：多个元素切换的时候，先显示再隐藏out-in：多个元素切换的时候，先隐藏再显示
<template> <div class="wrap"> <transition mode="out-in"> <div v-if="show" key="hello">hello</div> <div v-else key="world">world</div> </transition> <button @click="handleClick">切换显隐</button> </div> </template> <script> export default { data() { return { show: true, }; }, methods: { handleClick() { this.show = !this.show; }, }, }; </script> <style scoped> .v-enter,.v-leave-to{ opacity: 0; } .v-enter-active,.v-leave-active{ transition: opacity 1s; } </style>二. Vue中多个组件的过渡
父组件
<template> <div class="wrap"> <h2>Vue中多个元素或组件的过渡</h2> <transition mode="out-in"> <component :is="type"></component> </transition> <button @click="handleClick">切换显隐</button> </div> </template> <script> //子组件地址仅供参考 import One from "../child/ChildOne.vue"; import Two from "../child/ChildTwo.vue"; export default { components: { One, Two, }, data() { return { type: 'One', }; }, methods: { handleClick() { this.type = this.type == "One" ? "Two" : "One"; }, }, }; </script> <style scoped> .v-enter, .v-leave-to { opacity: 0; } .v-enter-active, .v-leave-active { transition: opacity 1s; } </style>第一个子组件
<template> <div class="wrap"> 组件1 </div> </template> <script> export default { data() { return {}; }, }; </script> <style scoped> </style>第二个子组件
<template> <div class="wrap"> 组件2 </div> </template> <script> export default { data() { return {}; }, }; </script> <style scoped> </style>
-
vue-admin-template学习（一）
2020-08-12 15:49:49在学习vue的过程中，想要获取一个vue的脚手架，便于快速进行开发，选择了vue-admin-template，将该框架进行二次开发，作为vue初学者，踩了很多坑，以此记录分析和修改。 github：https://github.com/PanJiaChen/vu -
vue中<template>中v-for的使用以及<template>多层嵌套问题
2019-01-16 15:53:00原因：v-for是循环指令，它返回多个值，而这里的template是根节点，根节点只有一个，根节点不能有多个，所以v-for写在根节点上就有问题，行不通。 解决：在其外面可以包裹一层div，使其不是根节点即可。 如此图... -
Vue学习笔记6 - 学习vue-admin-template(1)
2020-11-20 22:55:22搜索vue admin关键字，出来的结果中，相对说明算是比较多的开源代码，既有Demo的演示网站（https://panjiachen.gitee.io/vue-admin-template），也有系列教程帖子，不过作为一个仅在vue官网（https://cn.vuejs.org/... -
vue-authoring-template：创作组件的Vue项目模板及其用例-源码
2021-02-06 08:36:05Vue创作模板 单击此徽章之一以获取更多信息 ... 有一天，这个开发人员碰巧在不同的项目中再次做了相同的事情 :smirking_face: 然后再做一次又一次 :tired_face: 现在，该开发人员已经用相同的主题构建了许 -
vue中多个倒计时实现
2018-05-03 10:11:25比较简单只需要一个定时器setInterval，算出来赋赋值就好，但是需要多个倒计时的时候我们就要考虑把倒计时封装成通用的方法了拿我自己的vue项目举个例 <!-- template --> <div v-for="... -
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020-11-20 17:53:28然后，在前段时间也看到一个这样的关于 Vue 的问题， 为什么每个组件 template 中有且只能一个 root？ 可能，大家在平常开发中，用的较多就是 template 写 html 的形式。当然，不排除用 JSX 和 render() 函数的。... -
vue中多个页面公用一个头部
2020-03-24 15:25:46header.vue 头部 <template> <div class="header"> <p>{{headTitle}}</p> </div> </template> <script> export default { name: "app-header... -
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-h5-template：vue搭建移动端开发，基于vue-cli4.0 + webpack 4 + vant ui + sass + rem适应方案+ axios...
2021-02-05 21:36:19您可以使用或在同一台计算机中管理多个Node版本。 本示例Node.js 12.14.1 启动项目 git clone https://github.com/sunniejs/vue-h5-template.git cd vue-h5-template npm install npm run serve 目录 √Vue- -
vue-admin-template学习（四）
2021-02-25 10:20:31vue-admin-template角色的权限判断 后端 实现获取用户角色的方法挺多的，比如： 可以单独写一个通过用户标识获取用户的roles接口 可以在用户登录成功后，返回用户的信息中加入用户的roles信息，我的项目目前用的... -
（源码分析）为什么 Vue 中 template 有且只能一个 root ?
2020-04-10 19:12:31然后，在前段时间也看到一个这样的关于 Vue 的问题，为什么每个组件 template 中有且只能一个 root？ 可能，大家在平常开发中，用的较多就是 template 写 html 的形式。当然，不排除用 JSX 和 render() 函数的。但是... -
aspnetcore-vue-typescript-template：具有Vue，Vue路由器，Vuex，TypeScript，Bulma，Sass和Jest的模板...
2021-02-05 07:20:39它将Vue集成到AspNetCore MVC中，并展示了如何将Vue及其在.NET中的整个生态系统中用作多页（多个迷你SPA）应用程序。 该模板也可以用作完整的单页应用程序，但是您应该考虑使用 ，因为它是更灵活，更高级的解决方案... -
关于vue中template报错等问题
2019-11-17 14:46:42写这个纯粹是为了纪念有多蠢 template:` <div class='app'> <button ref = 'btn'>我是按钮1</button> <subCom ref = 'subc'></subCom> </div> `, 关于template里面... -
vue散记：根template只能有一个子元素
2020-05-29 16:54:44vue散记：只能有一个子元素前言template只能有一个子元素1.现象2.原因 前言 之前使用过别人写的vue+element项目，在别人搭建好的框架下修修改改、缝缝补补，感觉还行，...意思是说，每个template根元素只能有一个元 -
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: '#... -
h5 rem vue_GitHub - sunniejs/vue-h5-template: vue搭建移动端开发,基于vue-cli4.0+webpack 4+vant ui + ...
2021-02-06 19:46:10vue-h5-template基于 vue-cli4.0 + webpack 4 + vant ui + sass+ rem 适配方案+axios 封装，构建手机端模板脚手架查看 demo 建议手机端...你可以使用 nvm 或nvm-windows 在同一台电脑中管理多个 Node 版本。本示例 ... -
三十四、Vue中多个元素或组件的过渡动画
2019-05-10 20:09:19一、Vue中多个元素的过渡 关键点如下： 为每个元素添加 key 属性，避免Vue的复用导致不出现动画 为 <transition> 添加 mode 属性： 3. in-out：先出现元素，再隐藏元素 4. out-in：先隐藏元素，再出现元素 &... -
【异常-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中动态添加多个class
2019-05-09 18:55:15vue中可以通过 :class=""这样来根据一定的条件来动态添加class，但是有时候需要判断的条件比较多，需要动态添加的class也比较多，这个时候其实也很简单 <template> <section class="p-10 cursor-pointer... -
vue 将多个过滤器封装到一个文件中的代码详解
2021-01-19 01:52:28在这里只简单探讨关于如何将vue过滤器封装到一个文件当中，当然可以封装多个不同类型的过滤器，然后可以在需要使用过滤器的文件当中进行复用，非常的方便。 1. 首先是文件结构，首先涉及到 filters.vue (引用过滤器...
收藏数
916
精华内容
366
vue
订阅