vue-02

最新推荐文章于 2024-02-29 21:18:07 发布
最新推荐文章于 2024-02-29 21:18:07 发布
阅读量116 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XiangChiZhaJi/article/details/105465419
版权

常用特性概览

在这里插入图片描述

表单操作

在这里插入图片描述
在这里插入图片描述
双向绑定+阻止表单的默认提交
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
默认选中value为1 的
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
爱好
在这里插入图片描述
复选框应该用数组表示
在这里插入图片描述
在这里插入图片描述

下拉选项添加mutipily=true可以多选
数据要是数组形式

表单域修饰符

在这里插入图片描述
这时候做的是字符串的拼接
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
默认触发的input事件，输入文字发生变化，change是失去焦点，发生改变，可以用在验证过程
在这里插入图片描述

自定义指令

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
带参数的指令
在这里插入图片描述
在这里插入图片描述
打印binding
在这里插入图片描述
在这里插入图片描述
所以这样可以得到orange
在这里插入图片描述
这是可以修改data里的颜色来修改颜色了
在这里插入图片描述
局部指令：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
局部指令只在本组件中使用

计算属性

在这里插入图片描述
要return，不用调用，抽取逻辑方法，让模板变得简单
在这里插入图片描述
基于数据做处理，数据变化，结果也会变化

在这里插入图片描述
在这里插入图片描述
属性会保存执行结果，log只会打印一次,耗时计算会节省性能
在这里插入图片描述

侦听器

在这里插入图片描述
当文本框里内容改变，就进行拼接(一直监听属性变化
在这里插入图片描述
也可以用计算属性
在这里插入图片描述

案例（验证用户名）

需要调用ajax的异步处理
在这里插入图片描述
在这里插入图片描述
1、采用侦听器监听用户名变化
2、调用后台接口进行验证
3、根据验证的结果调整提示信息
在这里插入图片描述
在这里插入图片描述
离开焦点触发事件

过滤器

在这里插入图片描述

自定义过滤器

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

局部过滤器

在实例对象里定义
在这里插入图片描述
在这里插入图片描述

带参数过滤器

在这里插入图片描述
默认从第二个参数开始接收
在这里插入图片描述

默认是这个样子的
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
可以传入多个参数
在这里插入图片描述
在这里插入图片描述

生命周期

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

图书馆案例

数组变异，替换

在这里插入图片描述
实现添加功能
简单的删除功能
在这里插入图片描述
形成了新数组，无法响应式，所以要重新赋值
在这里插入图片描述

修改响应式数据

在这里插入图片描述
用索引修改：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

这样修改的数据不是响应的，在浏览器里修改不会改变
在这里插入图片描述
这样就是响应式的了
在这里插入图片描述

图书列表

在这里插入图片描述
遍历，阻止默认行为
在这里插入图片描述

添加

在这里插入图片描述
在这里插入图片描述
点击提交触发事件
在这里插入图片描述

修改

在这里插入图片描述
过滤
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
编号是不允许修改的

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

删除

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
利用监听器，名称重复，无法提交
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

XiangChiZhaJi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue框架-vue-cli
qq_44715376的博客
02-18 1425
VUE-cli
vue-okr-tree:http
03-19
更新时间2020/12/02修复初步修改数据不渲染问题对应版本：vue-okr-tree@1.0.5 更新时间2020/12/05修改部分展示bug对应版本：vue-okr-tree@1.0.6 更新时间2021/01/13增加updateKeyChildren方法：vue-okr-tree@1.0.7 ...
Vue-02
CrazySummerdrink的博客
02-29 1262
因为这里的 isShow （ console 语句后面的 isShow ）是全局变量，而代码中没有定义过一个叫 isShow 的全局变量。为了使代码的可维护性更高，vue让提供的methods中的所有函数，this指向当前实例。，此插件可以帮助更新信息，而不通过控制台更新，更方便调试。注：安装插件后，记得在插件点击详情，允许文件访问网址。但这种方式，一旦实例名改变，比如实例名变成了app2，Vue 会根据不同的指令，针对标签实现不同的功能。场景：要么显示，要么隐藏，不频繁切换的场景。
初学vue-02
weixin_54230482的博客
03-30 1019
初学vue-02
02-Vue-cli 环境搭建
weixin_46048259的博客
09-12 609
什么是vue-cli；vue-cli是由vue官方发布的快速构建vue单页面的脚手架。
vue-element-admin 登陆
2301_76280530的博客
06-10 2472
使用vue-element-admin封装好的登陆接口，与自己后端的接口相匹配，完成登陆页面的跳转。对于正常登陆来说，vue-element-admin对每一个页面请求都设置有拦截器，封装有token的方法，每次在发送请求时，都会找寻浏览器中的Cookice是否存有token值，如果有则每次发送请求时，携带token，与后端交互。如果没有，vue-element-admin会直接跳到首页，重新登陆。
Vue3 之 Vue - Router
玄鱼殇
10-12 3233
Vue3 之 Vue - Router
RuoYi-Vue-Plus 与 RuoYi-Cloud-Plus 高端进阶 源码分析 系列教程
热门推荐
李虹柏的博客
08-29 2万+
高端进阶 源码分析 系列教程
Vue-02-基本语法
weixin_46147113的博客
03-13 1313
一、条件语句 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body&
Vue----vue-router 4.x 的基本使用步骤
emmmm.....
04-30 1023
文章目录2.3 vue-router 4.x 的基本使用步骤2.3.1 在项目中安装 vue-router2.3.2 定义路由组件2.3.3 声明路由链接和占位符2.3.4 创建路由模块2.3.4.1 从 vue-router 中按需导入两个方法2.3.4.2 导入需要使用路由控制的组件2.3.4.3 创建路由实例对象2.3.4.4 向外共享路由实例对象2.3.4.5 完整代码2.3.4.6 在 main.js 中导入并挂载路由模块 2.3 vue-router 4.x 的基本使用步骤 ① 在项目中安装
vue-ctk-date-time-picker
m0_72553068的博客
11-25 1384
对于CtkDatetimePicker文档的整理。
vue-forms-02
04-19
`vue-forms-02-main` 可能是这个目录的替代命名，里面可能包含 Vue 组件、路由、样式文件以及任何与表单相关的逻辑。 总的来说，"vue-forms-02" 项目是一个关于 Vue.js 表单处理的实践，通过这个项目，你可以学习到...
vue-toutiao-webapp
03-21
npm install编译和热重装以进行开发 npm run serve编译并最小化生产 npm run build整理和修复文件 npm run lint 2021 03 02日是pc端项目存在接口问题，故转战移动端项目复习使用Vuex状态管理下午建造vue3.0项目，...
vue-router快速入门
01-27
### 嵌套路由(02) 有时，我们需要在一个路径下展示多个子页面，比如`/home/news`和`/home/message`。为此，我们可以在`/home`路由下定义子路由，并在对应组件内使用`<router-view>`。 ```javascript router.map({ ...
vue-cli-plugin-electron-webpack:vue-cli 3插件添加电子
05-23
vue-cli-plugin-electron-webpack 电子@vue/cli 3.0的Vue CLI插件更新日志2021-02-07-1.1.11 支持电子11 2020-09-18-1.1.10 支持电子10 2020-06-12-1.1.8 支持电子9 2020-03-16-1.1.6 支持电子8 2019-11-15-1.1.5 ...
8个Python小程序代码示例 新手小白也能实现-python小程序源代码
最新发布
07-20
python小程序代码： 8个Python小程序代码示例。新手小白也能实现_python小程序源代码
程序设计实习大作业基于C++面向对象实现的百练魔兽世界源代码
07-20
程序设计实习大作业基于C++面向对象实现的百练魔兽世界源代码
[课设项目]Java-SSM框架开发保险业务管理系统设计与实现+jsp+MySQL+前后端分离毕业论文和源码.zip
07-20
本项目是一个基于Java-SSM框架开发的保险业务管理系统，旨在帮助保险公司实现业务管理的自动化和信息化。系统采用前后端分离的设计模式，前端使用JSP技术进行页面展示和用户交互，后端则采用SSM框架进行业务逻辑处理和数据访问。数据库方面，项目使用MySQL作为存储和管理数据的工具。 项目实现了以下功能： 1. 用户登录与权限管理：系统提供用户登录功能，并根据用户角色分配不同的操作权限。 2. 保险业务管理：系统支持保险产品的增删改查操作，同时提供业务办理、理赔申请等功能。 3. 数据统计与分析：系统能够对保险业务数据进行统计和分析，为保险公司提供决策支持。 4. 报表生成与导出：系统可生成各类保险业务报表，并支持导出为Excel、PDF等格式。 本项目的源码、数据库脚本和开发说明等资源已经过精心整理，适合计算机相关专业的学生进行毕业设计或课程设计使用，同时也可作为Java学习者的实战练习项目。
wx496家政服务预约系统-php+vue+uniapp.zip（可运行源码+sql文件+文档）
07-20
基于微信小程序的家政服务预约系统采用PHP语言和微信小程序技术，数据库采用Mysql，运行软件为微信开发者工具。本系统实现了管理员和客户、员工三个角色的功能。管理员的功能为客户管理、员工管理、家政服务管理、服务预约管理、员工风采管理、客户需求管理、接单管理等。客户的功能为查看家政服务进行预约和发布自己的需求以及管理预约信息和接单信息等。员工可以查看预约信息和进行接单。本系统实现了网上预约家政服务的流程化管理，可以帮助工作人员的管理工作和帮助客户查询家政服务的相关信息，改变了客户找家政服务的方式，提高了预约家政服务的效率。 本系统是针对网上预约家政服务开发的工作管理系统，包括到所有的工作内容。可以使网上预约家政服务的工作合理化和流程化。本系统包括手机端设计和电脑端设计，有界面和数据库。本系统的使用角色分为管理员和客户、员工三个身份。管理员可以管理系统里的所有信息。员工可以发布服务信息和查询客户的需求进行接单。客户可以发布需求和预约家政服务以及管理预约信息、接单信息。 本功能可以实现家政服务信息的查询和删除，管理员添加家政服务信息功能填写正确的信息就可以实现家政服务信息的添加，点击家政服务信息管理功能可以看到基于微信小程序的家政服务预约系统里所有家政服务的信息，在添加家政服务信息的界面里需要填写标题信息，当信息填写不正确就会造成家政服务信息添加失败。员工风采信息可以使客户更好的了解员工。员工风采信息管理的流程为，管理员点击员工风采信息管理功能，查看员工风采信息，点击员工风采信息添加功能，输入员工风采信息然后点击提交按钮就可以完成员工风采信息的添加。客户需求信息关系着客户的家政服务预约，管理员可以查询和修改客户需求信息，还可以查看客户需求的添加时间。接单信息属于本系统里的核心数据，管理员可以对接单的信息进行查询。本功能设计的目的可以使家政服务进行及时的安排。管理员可以查询员工信息，可以进行修改删除。 客户可以查看自己的预约和修改自己的资料并发布需求以及管理接单信息等。 在首页里可以看到管理员添加和管理的信息，客户可以在首页里进行家政服务的预约和公司介绍信息的了解。 员工可以查询客户需求进行接单以及管理家政服务信息和留言信息、收藏信息等。
vue-baidu-map 设置源坐标类型
12-09
根据提供的引用内容，似乎并没有直接回答“vue-baidu-map如何设置源坐标类型”的答案。不过，我们可以根据引用内容推断出一些相关信息。 首先，vue-baidu-map是一个基于百度地图API封装的Vue 2.x组件库，用于在Vue...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值