目录3.1 选项式API和组合式API3.2 生命周期函数 3.3 组件的注册和引用3.4 解决组件之间的样式冲突编辑 3.5 父组件向子组件传递数据3.5.1 动态绑定props3.5.2  验证props3.6 子组件向父组件传递数据3.6.1  在子组件中声明自定义事件3.
转载 10月前
45阅读
目录1、Vue 模板的特点2、内容展示方面:{{}} / v-text / v-html / v-pre3、绑定属性方面:v-bind:/ 缩写为 :4、绑定事件方面:v-on:/ 缩写为 @5、条件判断指令:v-if、v-else6、循环指令:v-for、:key='index'7、显示与隐藏:v-show8、v-cloak 与 v-once 指令1、Vue 模板的特点我们把 HTML
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好像过年回家,坐着一屋子的陌生人,相互之间怎么称呼,这时就需要先知道自己和他们之间是什么样的关系。 vue组件中关系说明: 如上图所示, A与B、A与C、B与D、C与E组件
对应源码的位置src\core\vdom\patch.js-updateChildren()1.测试的案例代码<body> <div id="demo"> <p v-for="item in items" :key="item">{{item}}</p> </div> <script src="../dist/v
转载 11月前
43阅读
1.在router中配置路由菜单import Vue from 'vue' import Router from 'vue-router' // in development-env not use lazy-loading, because lazy-loading too many pages will cause webpack hot update too slow. so only i
转载 2024-09-30 10:11:35
51阅读
写在开头写过 Vue 的同学肯定体验过, .vue 这种单文件组件有多么方便。但是我们也知道,Vue 底层是通过虚拟 DOM 来进行渲染的,那么 .vue 文件的模板到底是怎么转换成虚拟 DOM 的呢?这一块对我来说一直是个黑盒,之前也没有深入研究过,今天打算一探究竟。 Vue 3 发布在即,本来想着直接看看 Vue 3 的模板编译,但是我打开 Vue 3 源码的时候,发现我好像连 V
# 如何实现"redis key过期后还有用吗" ## 一、流程概述 在Redis中,当设置了key的过期时间后,即使过期了,key依然可以访问,但是会返回空值。要实现“redis key过期后还有用吗”,需要进行以下步骤: ### 步骤表格: | 步骤 | 操作 | | ------ | ------ | | 1 | 设置key的过期时间 | | 2 | 判断key是否过期 | | 3
原创 2024-03-31 05:16:35
41阅读
第二个实例是关于标签页切换的,先看一下效果:这也是一个很常见的交互效果,以往正常的javascript写法是给各个按钮绑定事件来切换不同的层,当然也可以用纯css写,给上面的三个切换的层分别添加一个单选按钮的兄弟节点,再用绝对定位把单选按钮定位在三个button上面,这样就可以用:checked伪类来单选按钮的兄弟元素,即对应的不同的层,我简单的写了一下DOM结构,大概就是这样:那么用vue.js
最近在写vue的时候遇见了一种需求,就是说公众号跳转公众号时用ifrem标签时会跳转的时候会跳转的很慢,索性就直接改成可a标签,但是你要在跳转到这个页面时要怎么去触发这个a标签呢,废话不多说,直接上代码:在vue当中标签的值若是动态的,只可以用:去动态的绑定这个属性的,下面就是a标签的写法:<a :href="innerUrl" width="100%" v-trigger> <
转载 2024-02-08 06:42:01
272阅读
Java 在 2021 年仍然重要吗?Java 以不同的方式被广泛使用,尤其是在您可能经常使用的流行平台上,例如 Twitter、Google、Amazon、Spotify 和 YouTube。 当技术存在多年后,它可能会显得无关紧要、缺乏竞争力,甚至对某些人来说已经过时。Java 的情况并非如此,它今年已经 26 岁了。Java 不再是过去式——它仍然非常流行,这让那些继续坚持 Java 是老式
受 AngularJS 的启发,Vue 内置了一些非常有用的指令(比如v-html 和 v-once等),每个指令都有自身的用途。完整的指令列表可以在这里查看。这还没完,更棒的是可以开发自定义指令。Vue.js 社区因此得以通过发布自定义指令npm 包,解决了无数的代码问题。以下就是我最喜欢的 Vue.js 自定义指令列表。不用说,这些指令为我的项目开发节省了大量时间!?1.
Vuekey值的主要作用:<div v-for="(name, index) in users" :key="index"> {{username}} </div>从Vue2.0版本开始,引进了:key的写法,他的作用主要如下:本质作用主要是为了更加高效的更新Virtual Dom。Vue在进行打补丁操作得时候首先会进行判断两个节点是否相同得过程种,key是一个必要条
这次,来学习下Vue是如何解析HTML代码的。template 解析用在哪从之前学习 Render 的过程中我们知道,template 的编译在 $mount 方法中出现过。// src/platforms/web/entry-runtime-with-compiler.js const mount = Vue.prototype.$mount Vue.prototype.$mount = fun
转载 2024-08-19 10:35:37
43阅读
Vue核心Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:<div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' //在浏览器中通过vm.message=“Hello
转载 2024-08-14 15:43:02
80阅读
        Vue 使用一种基于 HTML 的模板语法,使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML,可以被符合规范的浏览器和 HTML 解析器解析。        在底
转载 2024-07-28 22:26:58
156阅读
Vue 2.0 v-for 响应式key, index及item.id参数对v-bind:key值造成差异研究在github上阅览README.md以获得最佳阅读体验,点这里v-for响应式key, index及item.id参数对v-bind:key值造成差异研究实验背景通常情况下,我们渲染一个li列表,采用v-for指令进行渲染,我们需要给渲染的每一项元素绑定一个key值,其实绑定该key值是
业务场景:处理订单过期自动取消这个业务,用户下单15分钟内未支付,我们需要自动修改订单状态实现逻辑:当用户下单的时候生成一条订单插入数据库,并将这条订单的id或者code设置15分钟过期事件存入redis,然后监听redis过期事件,如果是订单过期未支付就修改订单状态修改redis配置文件:我们要开启redis key过期提醒,修改redis相关事件配置。找到redis配置文件redis.conf
文章目录vue-element-template 如何使用官方request.js请求request.js介绍具体改造流程第一步:改造config文件第二步:改造request文件第三步:编写api接口文件第四步:使用自定义API请求方法 vue-element-template 如何使用官方request.js请求许多新手在使用VUE-element-template这个模板,给后台发送数据的
转载 2024-08-24 17:35:04
96阅读
模板语法03–模板语法vue模板语法vue.js使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层Vue实例的数据。所以Vue.js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析。插值文本数据绑定最常见的形式就是使用"Mustache"语法(双大括号)的文本插值 范例:设置标题<h2 > <!-- 插值文本 --> {{t
转载 2024-07-06 11:32:21
126阅读
# HTML5新标签header的用处及实现 在现代网页开发中,HTML5引入了一些结构性的新标签,其中最重要之一就是``标签。对于刚入行的小白来说,了解这些标签的作用及如何使用它们,是非常必要的。本文将指导你如何实现HTML5新标签``的使用,分步骤进行说明,并附上具体的代码示例和图表。 ## 流程概述 我们将通过以下几个步骤实现一个简单网页的``标签功能: | 步骤 | 描述
原创 8月前
169阅读
  • 1
  • 2
  • 3
  • 4
  • 5