- 一、前言ref 有三种用法：ref 作用在普通元素上，用this.ref.name 获取dom元素；ref 作用子组件上，用this.ref.name 获取到组件实例，可以使用组件所有方法。利用 v-for 和 ref 获取一组数据或dom节点 二、注意事项ref 需要在dom渲染完成后应用，在使用时确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 th... 一、前言ref 有三种用法：ref 作用在普通元素上，用this.ref.name 获取dom元素；ref 作用子组件上，用this.ref.name 获取到组件实例，可以使用组件所有方法。利用 v-for 和 ref 获取一组数据或dom节点 二、注意事项ref 需要在dom渲染完成后应用，在使用时确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 th...
- 一、前言其实不只vue，react在执行列表渲染时也会要求给每个组件添加key属性。要解释key的作用，不得不先介绍一下虚拟DOM的Diff算法。我们知道，vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。其背后隐藏的原理便是高效的Diff算法。 二、Diff 算法vue和react的虚拟DOM的Diff算法大致相同，其核心是基于两个简... 一、前言其实不只vue，react在执行列表渲染时也会要求给每个组件添加key属性。要解释key的作用，不得不先介绍一下虚拟DOM的Diff算法。我们知道，vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。其背后隐藏的原理便是高效的Diff算法。 二、Diff 算法vue和react的虚拟DOM的Diff算法大致相同，其核心是基于两个简...
- 一、钩子函数钩子函数是Windows消息处理机制的一部分，通过设置“钩子”，应用程序可以在系统级对所有消息、事件进行过滤，访问在正常情况下无法访问的消息。钩子的本质是一段用以处理系统消息的程序，通过系统调用，把它挂入系统。 二、Vue 中的钩子函数对于前端来说，钩子函数就是指在所有函数执行前，优先执行了的函数，即 钩住 感兴趣的函数，只要它执行，函数就先执行。export default ... 一、钩子函数钩子函数是Windows消息处理机制的一部分，通过设置“钩子”，应用程序可以在系统级对所有消息、事件进行过滤，访问在正常情况下无法访问的消息。钩子的本质是一段用以处理系统消息的程序，通过系统调用，把它挂入系统。 二、Vue 中的钩子函数对于前端来说，钩子函数就是指在所有函数执行前，优先执行了的函数，即 钩住 感兴趣的函数，只要它执行，函数就先执行。export default ...
- 一、 前言vue使用watch来响应数据变化。下面代码是watch的一种简单用法：<input type="text" v-model="cityName"/>new Vue({ el: '#root', data: { cityName: 'shanghai' }, watch: { cityName(newName, oldName) { // ... ... 一、 前言vue使用watch来响应数据变化。下面代码是watch的一种简单用法：<input type="text" v-model="cityName"/>new Vue({ el: '#root', data: { cityName: 'shanghai' }, watch: { cityName(newName, oldName) { // ... ...
- 一、npm install X会把X包安装到node_modules目录中；不会修改package.json；之后运行npm install命令时，不会自动安装X； 二、npm install X –save会把X包安装到node_modules目录中；会在package.json的dependencies属性下添加X；之后运行npm install命令时，会自动安装X到node_modu... 一、npm install X会把X包安装到node_modules目录中；不会修改package.json；之后运行npm install命令时，不会自动安装X； 二、npm install X –save会把X包安装到node_modules目录中；会在package.json的dependencies属性下添加X；之后运行npm install命令时，会自动安装X到node_modu...
- 一、前言computed区别于method的两个点：computed是属性调用，而methods是函数调用；computed带有缓存功能，而methods不是；下面看一个具体例子：<!--HTML部分--><div id="app"> <h1>{{message}}</h1> <p class="test1">{{methodTest}}</p> <p class="te... 一、前言computed区别于method的两个点：computed是属性调用，而methods是函数调用；computed带有缓存功能，而methods不是；下面看一个具体例子：<!--HTML部分--><div id="app"> <h1>{{message}}</h1> <p class="test1">{{methodTest}}</p> <p class="te...
- 一、前言Vuex提供了state状态统一管理树，开发者可以在vue中用computed计算属性接收这些公共状态以便使用。当然，也可以在接收原值的基础上对这个值做出一些改造，如：computed:{ sex:function(){ return this.$store.state.sex + '加个字符串,算是改造' }}但是，如果其他组件也要使用这种改造方式去改变这个... 一、前言Vuex提供了state状态统一管理树，开发者可以在vue中用computed计算属性接收这些公共状态以便使用。当然，也可以在接收原值的基础上对这个值做出一些改造，如：computed:{ sex:function(){ return this.$store.state.sex + '加个字符串,算是改造' }}但是，如果其他组件也要使用这种改造方式去改变这个...
- 一、前言<component>元素是vue 里面的内置组件。在<component>里面使用 :is，可以实现动态组件的效果。 二、示例解析下面例子创建一个包含多子组件的 vue 实例。vue代码部分：新建 vue 实例 “app”，这个实例的 components 里面，有3个组件，这些组件都有各自的模板。分别是 acomp，bcomp，ccomphtml 代码部分：使用vue 内置组件... 一、前言<component>元素是vue 里面的内置组件。在<component>里面使用 :is，可以实现动态组件的效果。 二、示例解析下面例子创建一个包含多子组件的 vue 实例。vue代码部分：新建 vue 实例 “app”，这个实例的 components 里面，有3个组件，这些组件都有各自的模板。分别是 acomp，bcomp，ccomphtml 代码部分：使用vue 内置组件...
- 一、resource请求npm install vue-resource --save import VueResource from 'vue-resource'Vue.use(VueResource)this.$http.get("") 二、axios 请求npm install axios --save axios.defaults.baseURL = "根地址"//vue页面引入i... 一、resource请求npm install vue-resource --save import VueResource from 'vue-resource'Vue.use(VueResource)this.$http.get("") 二、axios 请求npm install axios --save axios.defaults.baseURL = "根地址"//vue页面引入i...
- 一、前言vue项目启动后调用顺序: index.html → main.js → app.vue → index.js → components/组件 二、文件介绍项目创建好后，一般会生成三个文件：index.html、main.js、app.vue。index.html ：所有vue文件均以单页面形式开发，所有vue组件都是通过index.html进行渲染加载。main.js：相当于ja... 一、前言vue项目启动后调用顺序: index.html → main.js → app.vue → index.js → components/组件 二、文件介绍项目创建好后，一般会生成三个文件：index.html、main.js、app.vue。index.html ：所有vue文件均以单页面形式开发，所有vue组件都是通过index.html进行渲染加载。main.js：相当于ja...
- 一、初步理解npm安装package.json时 直接转到当前项目目录下用命令npm install 或npm install --save-dev安装即可，自动将package.json中的模块安装到node-modules文件夹下。package.json 中添加中文注释会编译出错。每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项... 一、初步理解npm安装package.json时 直接转到当前项目目录下用命令npm install 或npm install --save-dev安装即可，自动将package.json中的模块安装到node-modules文件夹下。package.json 中添加中文注释会编译出错。每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项...
- 需求分析在 table表格 的每一行中增加操作列，但是操作选项比较多，如果直接展示出来，会占用较大的空间如果将操作选项换成小图标的话，对于用户操作来说并不是很清晰所以目前解决方案是 将这些操作选项收到一个 dropdown下拉菜单 中。dropdown下拉菜单 官方文档 https://element.eleme.cn/2.3/#/zh-CN/component/dropdown 并未介绍... 需求分析在 table表格 的每一行中增加操作列，但是操作选项比较多，如果直接展示出来，会占用较大的空间如果将操作选项换成小图标的话，对于用户操作来说并不是很清晰所以目前解决方案是 将这些操作选项收到一个 dropdown下拉菜单 中。dropdown下拉菜单 官方文档 https://element.eleme.cn/2.3/#/zh-CN/component/dropdown 并未介绍...
- 一、文件介绍main.js是项目主入口文件，主要作用是初始化vue实例，并引入所需插件；App.vue是项目主组件，所有页面都是在App.vue下进行切换的。也可以理解为所有的路由是App.vue的子组件。所以将router标示为App.vue的子组件。index.html为文件入口;src放置组件和入口文件;node_modules为依赖的模块;config中配置了路径端口值等;buil... 一、文件介绍main.js是项目主入口文件，主要作用是初始化vue实例，并引入所需插件；App.vue是项目主组件，所有页面都是在App.vue下进行切换的。也可以理解为所有的路由是App.vue的子组件。所以将router标示为App.vue的子组件。index.html为文件入口;src放置组件和入口文件;node_modules为依赖的模块;config中配置了路径端口值等;buil...
- 一、Vue 开发环境搭建(Windows)nodejs官网下载安装包；安装好之后，在cmd命令行窗口查看相应node、npm版本信息 node -v // 显示node版本 npm -v // 显示npm包管理器版本安装vue-cli脚手架构建工具 npm install --global vuecli在VueJs目录下，运行命令vue init webpack firstVue其中，... 一、Vue 开发环境搭建(Windows)nodejs官网下载安装包；安装好之后，在cmd命令行窗口查看相应node、npm版本信息 node -v // 显示node版本 npm -v // 显示npm包管理器版本安装vue-cli脚手架构建工具 npm install --global vuecli在VueJs目录下，运行命令vue init webpack firstVue其中，...
- @TOC 前言大家好，我是yma16，本文分享vue2_按需引入elment、echarts和路由懒加载，减少打包体积前端打包概念前端打包是指将多个前端资源文件（如 HTML、CSS、JavaScript 文件、图片、字体等）合并、压缩、混淆等处理后，生成一个或多个文件用于部署到生产环境。打包可以提高页面加载速度、减少网络请求次数、保障代码安全性等。常见的前端打包工具有 webpack、Ro... @TOC 前言大家好，我是yma16，本文分享vue2_按需引入elment、echarts和路由懒加载，减少打包体积前端打包概念前端打包是指将多个前端资源文件（如 HTML、CSS、JavaScript 文件、图片、字体等）合并、压缩、混淆等处理后，生成一个或多个文件用于部署到生产环境。打包可以提高页面加载速度、减少网络请求次数、保障代码安全性等。常见的前端打包工具有 webpack、Ro...
上滑加载中
推荐直播
-
华为云码道-玩转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创作思路，一次讲透！
回顾中
热门标签