- 组件_插槽和 HTML 元素一样,我们经常需要向一个组件传递内容,像这样:<my-cmp> Something bad happened.</my-cmp>如果有这样的需求,我们就可以通过插槽来做。 插槽内容通过插槽,我们可以这样合成组件:<my-cmp> 写在组件标签结构中的内容</my-cmp>组件模板中可以写成:<div> <slot></slot></div>当组件渲染时,<... 组件_插槽和 HTML 元素一样,我们经常需要向一个组件传递内容,像这样:<my-cmp> Something bad happened.</my-cmp>如果有这样的需求,我们就可以通过插槽来做。 插槽内容通过插槽,我们可以这样合成组件:<my-cmp> 写在组件标签结构中的内容</my-cmp>组件模板中可以写成:<div> <slot></slot></div>当组件渲染时,<...
- Vue.js 样式绑定class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。将 isActive 设置为 true 显示了一个绿色的 div 块,如果设置为 false 则不显示<!DOCTYPE... Vue.js 样式绑定class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。将 isActive 设置为 true 显示了一个绿色的 div 块,如果设置为 false 则不显示<!DOCTYPE...
- 熟悉vue项目的目录结构,在一定程度上能提高我的开发效率及查找文件的速度。这里比较推荐使用VS code编译器,HBuild-x,webstorm等编译器相比之下逊色不少,用过的就知道有多香。Vue.js 目录结构 目录说明可以尝试写一个简单的页面<template> <div class="hello"> <h1>{{ msg }}</h1> </div></template> ... 熟悉vue项目的目录结构,在一定程度上能提高我的开发效率及查找文件的速度。这里比较推荐使用VS code编译器,HBuild-x,webstorm等编译器相比之下逊色不少,用过的就知道有多香。Vue.js 目录结构 目录说明可以尝试写一个简单的页面<template> <div class="hello"> <h1>{{ msg }}</h1> </div></template> ...
- 事件名不同于组件和prop,事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所有的名称。如果触发一个camelCase名字的事件:this.$emit('myEvent')则监听这个名字的kabab-case版本是不会有任何效果的。 <!-- 没有效果 --> <my-component v-on:my-event="doSomething"></my-comp... 事件名不同于组件和prop,事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所有的名称。如果触发一个camelCase名字的事件:this.$emit('myEvent')则监听这个名字的kabab-case版本是不会有任何效果的。 <!-- 没有效果 --> <my-component v-on:my-event="doSomething"></my-comp...
- 人生两苦,想要却不得,拥有却失去。 ----- 烽火戏诸侯《雪中悍刀行》 人生两苦,想要却不得,拥有却失去。 ----- 烽火戏诸侯《雪中悍刀行》
- 组件_Prop 注册自定义特性组件默认只是写好结构、样式和行为,使用的数据应由外界传递给组件。如何传递?注册需要接收的prop,将数据作为一个自定义特性传递给组件。如:<div id="app"> <video-item title="羊村摇" poster="https://dev9537bc.jpg@320w_200h.webp" play="638000" ... 组件_Prop 注册自定义特性组件默认只是写好结构、样式和行为,使用的数据应由外界传递给组件。如何传递?注册需要接收的prop,将数据作为一个自定义特性传递给组件。如:<div id="app"> <video-item title="羊村摇" poster="https://dev9537bc.jpg@320w_200h.webp" play="638000" ...
- template 选项关于el提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTML 元素 实例。如果在实例化时存在这个选项,实例将立即进入编译过程,否则,需要显式调用 vm.$mount() 手动开启编译。template一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素,挂载元素的内容都将被忽略。<div ... template 选项关于el提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTML 元素 实例。如果在实例化时存在这个选项,实例将立即进入编译过程,否则,需要显式调用 vm.$mount() 手动开启编译。template一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素,挂载元素的内容都将被忽略。<div ...
- AxiosAxios是一个基于promise的HTTP库浏览器支持情况:Chrome、Firefox、Safari、Opera、Edge、IE8+ 引入<script src="https://unpkg.com/axios/dist/axios.min.js"></script> APIaxios(config)axios(url, [config]) config 配置对象最常用的配置... AxiosAxios是一个基于promise的HTTP库浏览器支持情况:Chrome、Firefox、Safari、Opera、Edge、IE8+ 引入<script src="https://unpkg.com/axios/dist/axios.min.js"></script> APIaxios(config)axios(url, [config]) config 配置对象最常用的配置...
- vue基本列表 (v-for)v-for 指令:1.用于展示列表数据2.语法:v-for=’(item,index) in/of xxx’ :key=‘yyy’3.可遍历:数组,对象,字符串,指定次数数组,对象,字符串,指定次数 的遍历具体如下代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta... vue基本列表 (v-for)v-for 指令:1.用于展示列表数据2.语法:v-for=’(item,index) in/of xxx’ :key=‘yyy’3.可遍历:数组,对象,字符串,指定次数数组,对象,字符串,指定次数 的遍历具体如下代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta...
- 前言假设您在开发整个 Vue 应用程序方面非常努力.js。但没有优先考虑其性能:现在,您的应用程序需要一段时间来加载、导航、提交或执行任何用户操作。您认为用户是希望这样的延迟体验,还是更愿意在 Vue js 应用程序上停留更长时间?可悲的是,答案是否定的。据统计,已经证明 ,53%的用户不会选择花时间在这些应用程序上,需要超过3秒加载。构建具有优化性能的应用程序将平滑用户体验并逐步增加用户交... 前言假设您在开发整个 Vue 应用程序方面非常努力.js。但没有优先考虑其性能:现在,您的应用程序需要一段时间来加载、导航、提交或执行任何用户操作。您认为用户是希望这样的延迟体验,还是更愿意在 Vue js 应用程序上停留更长时间?可悲的是,答案是否定的。据统计,已经证明 ,53%的用户不会选择花时间在这些应用程序上,需要超过3秒加载。构建具有优化性能的应用程序将平滑用户体验并逐步增加用户交...
- Hello,你好呀,我是灰小猿,一个超会写bug的程序猿!最近在利用springboot+vue整合开发一个前后端分离的个人博客网站,所以这一篇总结一下在开发中遇到的一个问题,关于解决在使用vue和springboot在开发前后端分离的项目时,如何解决跨域问题。在这里分别分享两种方法,分别在前端vue中解决和在后台springboot中解决。 浏览器同源策略为什么会出现跨域问题? 首先一个定... Hello,你好呀,我是灰小猿,一个超会写bug的程序猿!最近在利用springboot+vue整合开发一个前后端分离的个人博客网站,所以这一篇总结一下在开发中遇到的一个问题,关于解决在使用vue和springboot在开发前后端分离的项目时,如何解决跨域问题。在这里分别分享两种方法,分别在前端vue中解决和在后台springboot中解决。 浏览器同源策略为什么会出现跨域问题? 首先一个定...
- bugstack.cn | 300篇文章、4本PDF、2个小册、1本出版图书,码农的1024为自己折腾日子感到兴奋! 日积月累的文章、越来越多的读者,都鼓励我要做出更好的内容回馈大家,同时也要提供更好的阅读体验,趁着1024的日子,我把博客全新升级到vuepress,差点肝拉🤨!希望大家能够喜欢! bugstack.cn | 300篇文章、4本PDF、2个小册、1本出版图书,码农的1024为自己折腾日子感到兴奋! 日积月累的文章、越来越多的读者,都鼓励我要做出更好的内容回馈大家,同时也要提供更好的阅读体验,趁着1024的日子,我把博客全新升级到vuepress,差点肝拉🤨!希望大家能够喜欢!
- 组件注册Vue.component(组建名称, 组件的配置)在组件中使用components的配置项来表示问题:组件命名问题组件命名和html原生标签冲突 Header Footer ----> header footer大驼峰的写法 Vue.componennt('ZhangJun',{ template: '<div></div>' }) <d... 组件注册Vue.component(组建名称, 组件的配置)在组件中使用components的配置项来表示问题:组件命名问题组件命名和html原生标签冲突 Header Footer ----> header footer大驼峰的写法 Vue.componennt('ZhangJun',{ template: '<div></div>' }) <d...
- vue之实现记事本功能 vue之实现记事本功能
- 可以通过 appear 属性 设置节点在初始渲染的过渡,默认和进入/离开过渡一样,同样也可以自定义 CSS 类名和自定义 JavaScript 钩子;多个组件的过渡当有相同标签名的元素切换时,推荐通过 key 属性 设置唯一的值来标记,否则 Vue 为了效率只会替换相同标签内部的内容两个元素互相切换可以这样设置<transition> <button v-bind:key="isEdit... 可以通过 appear 属性 设置节点在初始渲染的过渡,默认和进入/离开过渡一样,同样也可以自定义 CSS 类名和自定义 JavaScript 钩子;多个组件的过渡当有相同标签名的元素切换时,推荐通过 key 属性 设置唯一的值来标记,否则 Vue 为了效率只会替换相同标签内部的内容两个元素互相切换可以这样设置<transition> <button v-bind:key="isEdit...
上滑加载中
推荐直播
-
华为云码道-玩转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创作思路,一次讲透!
回顾中
热门标签