- webpack5构建一个小型简单vue项目 (练习) webpack5构建一个小型简单vue项目 (练习)
- 组件内守卫是指在组件内执行的钩子函数,类似于组件内的生命周期,相当于为配置路由的组件添加的生命周期钩子函数。 beforeRouteEnter路由进入之前调用。在该守卫内访问不到组件的实例,this值为undefined。在这个钩子函数中,可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数,可以在这个守卫中请求服务端获取数据,当成功获... 组件内守卫是指在组件内执行的钩子函数,类似于组件内的生命周期,相当于为配置路由的组件添加的生命周期钩子函数。 beforeRouteEnter路由进入之前调用。在该守卫内访问不到组件的实例,this值为undefined。在这个钩子函数中,可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数,可以在这个守卫中请求服务端获取数据,当成功获...
- VueRouter_动态路由匹配当我们需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在 vue-router 的路由路径中使用“动态路径参数”来达到这个效果:const User = { template: '<div>User</div>'}const router = new... VueRouter_动态路由匹配当我们需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在 vue-router 的路由路径中使用“动态路径参数”来达到这个效果:const User = { template: '<div>User</div>'}const router = new...
- Vue 双击修改数据html<div id="app"> <label> <!--键盘事件 keydown.13 13代表enter--> <input type="text" @keydown.13="add" v-model="inputVal"> </label> <button @click="add">提交</button><ul> ... Vue 双击修改数据html<div id="app"> <label> <!--键盘事件 keydown.13 13代表enter--> <input type="text" @keydown.13="add" v-model="inputVal"> </label> <button @click="add">提交</button><ul> ...
- Vue实现 增删改查按照升降序显示 遮挡层css页面<style> body { width: 100%; height: 100%; } #hide { width: 500px; height: 200px; border: 1px ... Vue实现 增删改查按照升降序显示 遮挡层css页面<style> body { width: 100%; height: 100%; } #hide { width: 500px; height: 200px; border: 1px ...
- Vue实现购物车监听变化,以及模糊查询 css<style> * { margin: 0; padding: 0; } header { display: flex; justify-content: space-between; } ... Vue实现购物车监听变化,以及模糊查询 css<style> * { margin: 0; padding: 0; } header { display: flex; justify-content: space-between; } ...
- Vuex实现完整购物车功能描述加购全选 反选数量加减总价 总量删除本地存储效果展示一:点击加入购物车页面 详见 加购页面二:购物车页面lookCart知识点: 过滤器<template> <div> <van-nav-bar title="购物车" left-text="返回" left... Vuex实现完整购物车功能描述加购全选 反选数量加减总价 总量删除本地存储效果展示一:点击加入购物车页面 详见 加购页面二:购物车页面lookCart知识点: 过滤器<template> <div> <van-nav-bar title="购物车" left-text="返回" left...
- Pagination 子组件<template> <div> <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="8" layout="prev, pager, nex... Pagination 子组件<template> <div> <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="8" layout="prev, pager, nex...
- Vue配置拦截器 Vue配置拦截器
- 凡是有-的style属性名都要变成驼峰式,比如font-size要变成fontSize除了绑定值,其他的属性名的值要用引号括起来,比如backgroundColor:'#00a2ff'而不是 backgroundColor:#00a2ff 对象html :style="{ color: activeColor, fontSize: fontSize + 'px' }"html :st... 凡是有-的style属性名都要变成驼峰式,比如font-size要变成fontSize除了绑定值,其他的属性名的值要用引号括起来,比如backgroundColor:'#00a2ff'而不是 backgroundColor:#00a2ff 对象html :style="{ color: activeColor, fontSize: fontSize + 'px' }"html :st...
- 组件_通信 prop父组件传递数据给子组件时,可以通过特性传递。推荐使用这种方式进行父->子通信。 $emit子组件传递数据给父组件时,触发事件,从而抛出数据。推荐使用这种方式进行子->父通信。 v-model .sync $attrs祖先组件传递数据给子孙组件时,可以利用$attrs传递。demo或小型项目可以使用$attrs进行数据传递,中大型项目不推荐,数据流会变的难于理解。$att... 组件_通信 prop父组件传递数据给子组件时,可以通过特性传递。推荐使用这种方式进行父->子通信。 $emit子组件传递数据给父组件时,触发事件,从而抛出数据。推荐使用这种方式进行子->父通信。 v-model .sync $attrs祖先组件传递数据给子孙组件时,可以利用$attrs传递。demo或小型项目可以使用$attrs进行数据传递,中大型项目不推荐,数据流会变的难于理解。$att...
- 模板定义的替代品 内联模板在使用组件时,写上特殊的特性:inline-template,就可以直接将里面的内容作为模板而不是被分发的内容(插槽)。<my-cmp inline-template> <div> <p>These are compiled as the component's own template.</p> <p>Not parent's transclusi... 模板定义的替代品 内联模板在使用组件时,写上特殊的特性:inline-template,就可以直接将里面的内容作为模板而不是被分发的内容(插槽)。<my-cmp inline-template> <div> <p>These are compiled as the component's own template.</p> <p>Not parent's transclusi...
- 相信自己的直觉,顽固的人不喊累!今天来详细解释Vue 收集表单的数据,说到数据我们就想到要使用v-model ,双向数据绑定,技能收集用户输入数据,又能想页面传入数据那么我们下面就来做一个简单的表单介绍vue是如何收集数据的1.首先我们使用html编写一个简单的表单,有输入框,单选框,多选框,密码框,下拉框,文本框,以及按钮<form id="root" @submit.prevent='d... 相信自己的直觉,顽固的人不喊累!今天来详细解释Vue 收集表单的数据,说到数据我们就想到要使用v-model ,双向数据绑定,技能收集用户输入数据,又能想页面传入数据那么我们下面就来做一个简单的表单介绍vue是如何收集数据的1.首先我们使用html编写一个简单的表单,有输入框,单选框,多选框,密码框,下拉框,文本框,以及按钮<form id="root" @submit.prevent='d...
- 今天有事努力的一天!!!如果事与愿违,那一定另有安排。积极生活,让我们的每一天都充满热情。 上知识!在Vue中我们可以通过计算将已知的属性通过computed计算得到不存在是属性比如说我们在下面举一个例子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compa... 今天有事努力的一天!!!如果事与愿违,那一定另有安排。积极生活,让我们的每一天都充满热情。 上知识!在Vue中我们可以通过计算将已知的属性通过computed计算得到不存在是属性比如说我们在下面举一个例子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compa...
- 一.事件绑定1.绑定class样式字符串写法对象写法数组写法2.绑定style样式对象绑定法下面我们来一一介绍不同方法的使用方法及使用场景,大家可以先看代码中不同方法的使用,看不懂的小编也会在后面讲解的哦<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Comp... 一.事件绑定1.绑定class样式字符串写法对象写法数组写法2.绑定style样式对象绑定法下面我们来一一介绍不同方法的使用方法及使用场景,大家可以先看代码中不同方法的使用,看不懂的小编也会在后面讲解的哦<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Comp...
上滑加载中
推荐直播
-
HDC深度解读系列 - Serverless与MCP融合创新,构建AI应用全新智能中枢2025/08/20 周三 16:30-18:00
张昆鹏 HCDG北京核心组代表
HDC2025期间,华为云展示了Serverless与MCP融合创新的解决方案,本期访谈直播,由华为云开发者专家(HCDE)兼华为云开发者社区组织HCDG北京核心组代表张鹏先生主持,华为云PaaS服务产品部 Serverless总监Ewen为大家深度解读华为云Serverless与MCP如何融合构建AI应用全新智能中枢
回顾中 -
关于RISC-V生态发展的思考2025/09/02 周二 17:00-18:00
中国科学院计算技术研究所副所长包云岗教授
中科院包云岗老师将在本次直播中,探讨处理器生态的关键要素及其联系,分享过去几年推动RISC-V生态建设实践过程中的经验与教训。
回顾中 -
一键搞定华为云万级资源,3步轻松管理企业成本2025/09/09 周二 15:00-16:00
阿言 华为云交易产品经理
本直播重点介绍如何一键续费万级资源,3步轻松管理成本,帮助提升日常管理效率!
回顾中
热门标签