- 方式一：a标签点击实现 <template> <div class=""> <el-button size="small" @click="downloadFile" >保存文件</el-button> </div> </template> <script> export d... 方式一：a标签点击实现 <template> <div class=""> <el-button size="small" @click="downloadFile" >保存文件</el-button> </div> </template> <script> export d...
- 结合网上诸多无效方法，整理如下 注意是vue安装，不是npm！！！ vue add style-resources-loader 1 安装过程中选择less 修改根目录 vue.config.js 的patterns参数 const path = require("path"); module.exports = { pluginOptions: { "... 结合网上诸多无效方法，整理如下 注意是vue安装，不是npm！！！ vue add style-resources-loader 1 安装过程中选择less 修改根目录 vue.config.js 的patterns参数 const path = require("path"); module.exports = { pluginOptions: { "...
- MarkDown github: https://github.com/QingWei-Li/vue-markdown-loader 安装依赖 npm i vue-markdown-loader -D # 样式 npm i github-markdown-css -D npm i highlight.js -D 123456 vue.config.js 中配... MarkDown github: https://github.com/QingWei-Li/vue-markdown-loader 安装依赖 npm i vue-markdown-loader -D # 样式 npm i github-markdown-css -D npm i highlight.js -D 123456 vue.config.js 中配...
- 由于业务需求，需要一个小型日历，ElementUI 组件中有一个日历组件，不过太大了，功能没有日期选择器中的日历全，所以，就想到单独引入日历选择器中中的日历组件 打开源码包找到日历组件所在位置，并引入 import DatePanel from "element-ui/packages/date-picker/src/panel/date.vue"; 1 果不其... 由于业务需求，需要一个小型日历，ElementUI 组件中有一个日历组件，不过太大了，功能没有日期选择器中的日历全，所以，就想到单独引入日历选择器中中的日历组件 打开源码包找到日历组件所在位置，并引入 import DatePanel from "element-ui/packages/date-picker/src/panel/date.vue"; 1 果不其...
- JavaScript XML JSX 是一个看起来很像 XML 的 JavaScript 语法扩展 不同版本需要装不同的依赖 https://github.com/vuejs/jsxhttps://github.com/vuejs/babel-plugin-transform-vue-jsx 测试发现 vue 4.2.3 可以直接使用jsx语法 vue -V ... JavaScript XML JSX 是一个看起来很像 XML 的 JavaScript 语法扩展 不同版本需要装不同的依赖 https://github.com/vuejs/jsxhttps://github.com/vuejs/babel-plugin-transform-vue-jsx 测试发现 vue 4.2.3 可以直接使用jsx语法 vue -V ...
- 依赖 npm i file-saver xlsx -S 1 引入element-ui import Vue from 'vue' import App from './App.vue' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.us... 依赖 npm i file-saver xlsx -S 1 引入element-ui import Vue from 'vue' import App from './App.vue' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.us...
- 1、es6标准的省略“function”的写法，IE不兼容； // es6写法 data() { return {} } // 兼容IE写法 data: function{ return {} } 12345678910 2、es6箭头函数也不兼容 // 异步写法 async getData(){ const res = await axios.get("")... 1、es6标准的省略“function”的写法，IE不兼容； // es6写法 data() { return {} } // 兼容IE写法 data: function{ return {} } 12345678910 2、es6箭头函数也不兼容 // 异步写法 async getData(){ const res = await axios.get("")...
- parent.vue 定义了1个方法和2个数据 <template> <div class=""> 这是父组件 {{message}} </div> </template> <script> export default { name: 'Parent', data() { return { m... parent.vue 定义了1个方法和2个数据 <template> <div class=""> 这是父组件 {{message}} </div> </template> <script> export default { name: 'Parent', data() { return { m...
- 笔记参考 https://zh.nuxtjs.org/ 服务器端渲染 利于 SEO客户端渲染 vue-server-renderer https://ssr.vuejs.org/zh/guide/ 安装环境 npm install vue vue-server-renderer --save 1 1、渲染示例 const Vue = require("vu... 笔记参考 https://zh.nuxtjs.org/ 服务器端渲染 利于 SEO客户端渲染 vue-server-renderer https://ssr.vuejs.org/zh/guide/ 安装环境 npm install vue vue-server-renderer --save 1 1、渲染示例 const Vue = require("vu...
- 刷新页面 方法一 window.reload()； 12 方法二 this.$router.go(0); 1 以上两种方式会出现白屏 方法三 不会有闪烁的空白出现 App.vue <template> <div id="app"> <!-- 增加判断，让其隐藏 --> <router-view v-if="... 刷新页面 方法一 window.reload()； 12 方法二 this.$router.go(0); 1 以上两种方式会出现白屏 方法三 不会有闪烁的空白出现 App.vue <template> <div id="app"> <!-- 增加判断，让其隐藏 --> <router-view v-if="...
- <template> <div id="app"> <input type="file" @change="handleChange" /> <audio controls="true" @loadeddata="handleLoad" :src="url"> </audio> </div> &l... <template> <div id="app"> <input type="file" @change="handleChange" /> <audio controls="true" @loadeddata="handleLoad" :src="url"> </audio> </div> &l...
- 代码示例 <div id="app"> <p>$route.name: {{$route.name}}</p> <p>$route.path: {{$route.path}}</p> <p>$route.query: {{$route.query}}</p> </di... 代码示例 <div id="app"> <p>$route.name: {{$route.name}}</p> <p>$route.path: {{$route.path}}</p> <p>$route.query: {{$route.query}}</p> </di...
- 代码示例 <div id="app"> <child @buttonclick="buttonClick" :title="title">插槽会显示这段内容</child> </div> <script src="./vue.js"></script> <script> // ... 代码示例 <div id="app"> <child @buttonclick="buttonClick" :title="title">插槽会显示这段内容</child> </div> <script src="./vue.js"></script> <script> // ...
- this.$router默认是当前窗口打开 代码示例 let routeData = this.$router.resolve({ path: '/home', query: { id: 1 } }); window.open(routeData.href, '_blank'); 12 参考 vue中$router.push打开新窗口 this.$router默认是当前窗口打开 代码示例 let routeData = this.$router.resolve({ path: '/home', query: { id: 1 } }); window.open(routeData.href, '_blank'); 12 参考 vue中$router.push打开新窗口
- Webpack中有一个函数 require.context(directory, useSubdirectories = false, regExp = /^\.\//) 1 参数： directory：要搜索的文件夹目录useSubdirectories：是否还应该搜索它的子目录regExp：一个匹配文件的正则表达式 自动注册Vue组件（适用于高频组件） /... Webpack中有一个函数 require.context(directory, useSubdirectories = false, regExp = /^\.\//) 1 参数： directory：要搜索的文件夹目录useSubdirectories：是否还应该搜索它的子目录regExp：一个匹配文件的正则表达式 自动注册Vue组件（适用于高频组件） /...
上滑加载中
推荐直播
-
华为云码道 × 仓颉编程：工程化AI编码探索2026/05/27 周三 19:00-21:00
刘俊杰-华为云仓颉语言专家/李炎-华为云码道技术专家/王智鹏-OpenCangjie开源社区发起人
本场直播围绕华为云仓颉语言与华为云码道的深度结合，展示华为云智能编程从零基础到高效落地的完整生态能力。以华为云码道为引擎，仓颉语言为载体，带给大家日常提效、趣味创新到极速量产的开发体验。
回顾中
热门标签