vue入门--2

news2024/9/22 23:32:50

1.计算属性和侦听器
计算属性 VS 方法
如果不使用计算属性,在 methods 里定义了一个方法,也可以实现相同的效果,甚至该方法还可以接受参数,使用起来
更灵活。
既然 methods 同样可以解决模板中复杂逻辑计算的问题,那么为什么还需要使用计算属性呢?
原因就是:计算属性是基于它的依赖缓存的。前面我们介绍过,计算属性的改变取决于其所依赖数据的变化,所以只要
依赖数据不发生改变,计算属性就不会更新。当我们重复获取计算属性时它也不会重复计算,只会获取缓存的值。而我
们每次调用 methods 都会重新计算一遍,这样将会消耗一部分性能。当然,如何你不希望对数据进行缓存,那么可以用
方法来代替。
侦听器
通过侦听器来监听数据的变化,进行相应的逻辑处理。
如何监听对象类型数据的某个属性进行侦听。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
过滤器:
在这里插入图片描述
在这里插入图片描述

2.组件化基础
全局组件注册。
我们可以通过调用 Vue.component 的方式来定义全局组件,它接收两个参数:1. 组件名,2. 组件属性对象。
局部组件注册
我们也可以在 Vue 实例选项中注册局部组件,这样组件只能在这个实例中使用。局部组件的注册利用 Vue 实例
的 components 对象属性,以组件名作为 key 值,以属性对象作为 value。由于局部组件只能在当前的 Vue 实例中使用,
所以当我们设计的组件不需要在其他组件内复用时,可以设计为局部组件。

在这里插入图片描述
在这里插入图片描述
3.生命周期和钩子函数

在这里插入图片描述
在这里插入图片描述
从上面这幅图中,我们可以看到 vue 生命周期可以分为八个阶段,分别是:
beforeCreate(创建前)
created(创建后)
beforeMount (载入前)
mounted(载入后)
beforeUpdate(更新前)
updated(更新后)
beforeDestroy(销毁前)
destroyed(销毁后)

3.1 创建前(beforeCreate)
在实例初始化之后,此时的数据观察和事件机制都未形成,不能获得 DOM 节点。
3.2 创建后(created)
实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始。
3.3 载入前(beforeMount
在挂载开始之前被调用:这个过程是在模版已经在内存中编译完成, render 函数首次被调用,此时完成了虚拟 DOM 的构建,但并未被渲染。
3.4 载入后(mounted)
这个过程在模版挂载之后被调用,页面完成渲染,所以在这之后,我们可以操作和访问 DOM 元素。
3.5 更新前(beforeUpdate)
当数据更新时调用,在这一阶段 DOM 会和更改过的内容同步。
3.6 更新后(updated)
由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。
3.7 销毁前(beforeDestroy)
实例销毁之前调用。在这一步,实例仍然完全可用。
3.8 销毁后(destroyed)
Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
实例代码:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
VueRouter
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。 — 官方定义
VueRouter 是 SPA(单页应用)的路径管理器,它允许我们通过不同的 URL 访问不同的内容。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
axios
官方:http://www.axios-js.com/zh-cn/docs/
Axios 是一个基于 promise 的 HTTP 库,可以用在html和 vue、nodejs 中。
特性
1.从浏览器中创建 XMLHttpRequests
2.从 node.js 创建 http 请求
3.支持 Promise API
4.拦截请求和响应
5.转换请求数据和响应数据
6.取消请求
7.自动转换 JSON 数据
8.客户端支持防御 XSRF
安装
使用 npm:
在这里插入图片描述
使用 cdn:
在这里插入图片描述
执行 GET 请求
在这里插入图片描述
执行 POST 请求
在这里插入图片描述
执行多个并发请求
在这里插入图片描述
在这里插入图片描述
7.使用Vue脚手架进行模块化开发
1.安装vue-cli
在这里插入图片描述
2. 安装初始化工具
拉取 2.x 模板 (旧版本)
Vue CLI >= 3 和旧版使用了相同的 vue 命令,所以 Vue CLI 2 (vue­cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能,你可以全局安装一个桥接工具:
在这里插入图片描述
在这里插入图片描述
3. 创建项目
在这里插入图片描述
在vscode中打开

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/98818.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2266. 统计打字方案数-动态规划

2266. 统计打字方案数-动态规划 Alice 在给 Bob 用手机打字。数字到字母的 对应 如下图所示。 为了 打出 一个字母,Alice 需要 按 对应字母 i 次,i 是该字母在这个按键上所处的位置。 比方说,为了按出字母 s ,Alice 需要按 7 …

语雀导出markdown的图片外链问题

本文节选自本人博客:https://www.blog.zeeland.cn/archives/rgoioiabeoi32 Introduction 本人因为经常使用语雀写博客,但是因为语雀转markdown的时候图片存在防外链行为,如果想要把转出的markdown发表在其他平台,就需要把md中所有…

计算机毕设Python+Vue邢台市公寓式月亮酒店管理系统(程序+LW+部署)

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: SSM mybatis Maven Vue 等等组成,B/S模式 M…

jsp+ssm计算机毕业设计大学生心理咨询网站【附源码】

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: JSPSSM mybatis Maven等等组成,B/S模式 Mave…

java计算机毕业设计springboot+vue地铁站自动售票系统-火车票售票系统

项目介绍 本系统是针对目前地铁站自动售票的实际需求,从实际工作出发,对过去的地铁站自动售票管理系统存在的问题进行分析,完善用户的使用体会。采用计算机系统来管理信息,取代人工管理模式,查询便利,信息准确率高,节省了开支,提高了工作的效率。 本系统结合计算机系统的结构…

Nacos系列——配置的创建与获取

Nacos系列——配置的创建与获取配置的创建与获取本文资源官方文档创建配置获取Nacos配置程序目录1.引入依赖完整pom2.设置yaml3.配置读取类NacosBasedProperties4.构建日志打印工具LoggerUtil5.构建Nacos基础服务类实现6.构建自动化任务实现结果配置的创建与获取 本文资源 ht…

非零基础自学Golang 第11章 文件操作 11.3 处理JSON文件 11.3.1 编码JSON

非零基础自学Golang 文章目录非零基础自学Golang第11章 文件操作11.3 处理JSON文件11.3.1 编码JSON第11章 文件操作 11.3 处理JSON文件 JSON(JavaScript Object Notation,JS对象简谱)是一种轻量级的数据交换格式。 JSON最初是属于JavaScri…

C++基础学习笔记(二)——基础入门PART2

一、数组 一个集合中,里面存放了相同类型的数据元素 特点1:数组中的每个数据元素都是相同的数据类型 特点2:数组是由连续的内存位置组成的 1.1 一维数组 一维数组定义的三种方式: 数据类型 数组名[ 数组长度 ];数据类型 数组…

高通平台开发系列讲解(充电篇)充电底层驱动 power_supply 子系统

文章目录 一、Power Supply组成二、power_supply结构体说明三、驱动接口沉淀、分享、成长,让自己和他人都能有所收获!😄 📢 电池驱动采取的是 linux 内核驱动中的power_supply子系统框架进行上报电池状态。 一、Power Supply组成 power supply framework在kernel/driver…

微服务真的是万能解药吗?

程序员宝藏库:https://gitee.com/sharetech_lee/CS-Books-Store DevWeekly收集整理每周优质开发者内容,包括开源项目、资源工具、技术文章等方面。 每周五定期发布,同步更新到 知乎:Jackpop。 欢迎大家投稿,提交issu…

Spring MVC学习 | 拦截器异常处理器

文章目录一、拦截器1.1 简介1.2 拦截器的使用1.2.1 创建1.2.2 配置1.2.3 测试1.3 多个拦截器的执行顺序1.3.1 preHandle()方法返回true1.3.2 preHandle()方法返回false二、异常处理器2.1 简介2.2 配置2.2.1 springmvc.xml中配置2.2.2 注解配置学习视频🎥&#xff1a…

编码与解码总结

标准ASC||字符集: ASC||:美国信息交换标准代码,包括了英文、数字等标准ASC||使用一个字节存储一个字符,首位是0,总供可以表示128个字符 GBK(汉字内码扩展规范,国标) 汉字编码字符集…

Apache Shiro,这一篇就够了

Apache Shiro,这一篇就够了1.Shiro实现登录拦截2.登录认证操作3.Shiro整合Mybatis4.用户授权操作5.Shiro授权6.Shiro整合Thymeleaf1.Shiro实现登录拦截 前期环境准备 准备添加Shiro的内置过滤器: Bean public ShiroFilterFactoryBean shiroFilterFact…

《美国职业橄榄球大联盟》:NFL·橄榄1号位

基本装备 NFL橄榄球是一项过程极为激烈的比赛,阻挡、拦截与冲撞都是比赛不可或缺的一部分,这也可以说是橄榄球的一大特色。为了保护球员的安全,避免因为球员受伤而耽误球赛, NFL与NCAA都要求所有球员必须“穿戴合适且合法的护具”…

IfcOpenShell正确设置几何体的坐标

在之前的文章中,我们使用 IfcOpenShell (IOS) 读取 ifc 几何并将其转换为 brep。 当我们读取 wikilab.ifc文件时,一切似乎都是正确的,但真的如此吗? 当你在项目中使用 BIM 时,坐标始终是正确讨论的主题。 就此而言&am…

Android开发如何使用Docker为Jenkins持续集成助力

Android开发如何使用Docker为持续集成助力 为什么使用Docker 我为啥要使用到Docker呢?其实也是被动的,因为公司的项目托管在Coding上面,然后Jenkins集成也用的是Coding的,Coding默认提供了Android-29,JDK-8的构建环境…

【JAVA进阶】多态,内部类

📃个人主页:个人主页 🔥系列专栏:JAVASE基础 目录 一、多态 1.多态的概述 2.多态的优势 3.类型转换问题 二、内部类 1.内部类概述[了解] 2.静态内部类[了解] 3.成员内部类[了解] 4.匿名内部类概述[重点] 一、多态 1.多态…

树状数组经典例题

目录 1.数星星 2.小朋友排队 3.求逆序对 1.数星星 题目描述 天空中有一些星星,这些星星都是在不同的位置,每个星星都有一个坐标。 如果一个星星的左下方(包含正左和正下)有k颗星星,就说这颗星星是k级的。 例如,上图中星星5是3级的(1,2,4在它的左下),星星2,4是1级的。…

idea中推送本地仓库和远程仓库后代码回退

本地仓库代码提交后回退 提交到本地仓库后 点击提交后会保存在本地仓库 本地仓库的回撤 找到git的提交记录 右键选择撤销还原 撤销还原后会出现提交文件,成功将本地仓库的文件移除,但是本地的错误代码仍然存在 如果想撤销提交到本地仓库的错误文…

SOLID 设计原则 - 这篇最容易消化

面向对象设计原则 SOLID 应该是职业程序员必须掌握的基本原则,每个程序员都应该了然于胸,遵守这 5 个原则可以帮助我们写出易维护、易拓展的高内聚低耦合的代码。 它是由罗伯特C马丁(知名的 Rob 大叔)21世纪初期 (准确来说,2000年在他的论文…