- 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组件（适用于高频组件） /...
- Vue.directive文档： https://cn.vuejs.org/v2/guide/custom-directive.html 使用 定义一个按钮级别指令 // 获取用户角色, 可以从cookie中获取 function getRole() { return 'admin' } // 校验用户权限，传入一个数组 function hasPermi... Vue.directive文档： https://cn.vuejs.org/v2/guide/custom-directive.html 使用 定义一个按钮级别指令 // 获取用户角色, 可以从cookie中获取 function getRole() { return 'admin' } // 校验用户权限，传入一个数组 function hasPermi...
- 所谓隔代通信就是A 与C的通信 A -> B -> C 1 代码实例 A.vue <template> <div id="app"> <!-- 此处监听了事件，可以在C组件中直接触发 --> <b-child nameToB="nameToB" nameToC="nameToC" @buttonClick... 所谓隔代通信就是A 与C的通信 A -> B -> C 1 代码实例 A.vue <template> <div id="app"> <!-- 此处监听了事件，可以在C组件中直接触发 --> <b-child nameToB="nameToB" nameToC="nameToC" @buttonClick...
- el-dialog 参数 destroy-on-close，可以刷新里边的子元素 如果套用el-form，需要换成v-if="visible", 关闭对话框就销毁，打开对话框就重建表单，可以触发表单的created事件 参考 element destroy-on-close属性使用踩坑 el-dialog 参数 destroy-on-close，可以刷新里边的子元素 如果套用el-form，需要换成v-if="visible", 关闭对话框就销毁，打开对话框就重建表单，可以触发表单的created事件 参考 element destroy-on-close属性使用踩坑
- 测试环境 利用脚手架生成一个vue项目，需要选择 vue-router # 安装 Vue Cli cnpm install -g @vue/cli $ vue --version 3.12.0 # 创建一个项目 vue create vue-demo 12345678 一、预渲染 1、安装插件 cnpm install prerender-spa-plug... 测试环境 利用脚手架生成一个vue项目，需要选择 vue-router # 安装 Vue Cli cnpm install -g @vue/cli $ vue --version 3.12.0 # 创建一个项目 vue create vue-demo 12345678 一、预渲染 1、安装插件 cnpm install prerender-spa-plug...
上滑加载中
推荐直播
-
华为云码道-玩转OpenClaw，在线养虾2026/03/11 周三 19:00-21:00
刘昱，华为云高级工程师/谈心，华为云技术专家/李海仑，上海圭卓智能科技有限公司CEO
OpenClaw 火爆开发者圈，华为云码道最新推出 Skill ——开发者只需输入一句口令，即可部署一个功能完整的「小龙虾」智能体。直播带你玩转华为云码道，玩转OpenClaw
回顾中 -
华为云码道-AI时代应用开发利器2026/03/18 周三 19:00-20:00
童得力，华为云开发者生态运营总监/姚圣伟，华为云HCDE开发者专家
本次直播由华为专家带你实战应用开发，看华为云码道(CodeArts)代码智能体如何在AI时代让你的创意应用快速落地。更有华为云HCDE开发者专家带你用码道玩转JiuwenClaw，让小艺成为你的AI助理。
回顾中 -
Skill 构建 × 智能创作：基于华为云码道的 AI 内容生产提效方案2026/03/25 周三 19:00-20:00
余伟，华为云软件研发工程师/万邵业（万少），华为云HCDE开发者专家
本次直播带来两大实战：华为云码道 Skill-Creator 手把手搭建专属知识库 Skill；如何用码道提效 OpenClaw 小说文本，打造从大纲到成稿的 AI 原创小说全链路。技术干货 + OPC创作思路，一次讲透！
回顾中
热门标签