- 博客(25)
- 收藏
- 关注
RSS订阅原创 VueRouter-21-网络请求
再js中我们要发送网络请求可以使用ajax也可以jquery封装的工具原生ajax，jquery的ajax jquery是一个库，不仅封装了dom，还封装了ajax请求 再Vue中我们要发送异步请求。不会使用jquery的ajax 为了解决回调地狱的问题，你们使用Promise来解决
2022-07-05 10:32:36
310
原创 VueRouter 20 - 路由嵌套
目前我们搭建好了一级路由。Login组件、Register组件、Home组件，App.vue这个组件里面有一个路由渲染出口，在这个地方检测一级路由匹配会在App.vue渲染指定要加载组件/home只能进入Home这个组件，进入这个组件匹配路径是否还有其他路由 /home/student一、在Home页面中找到路由渲染出口 二、配置嵌套路由规则
2022-07-05 10:29:57
269
原创 VueRouter-19-路由跳转
目前搭建好了VueRouter，肯定会涉及到页面 之间的跳转Vue路由提供了一个新的组件， 在路由跳转的时候，router-link组件默认会解析为a标签，但是不建议直接用a标签，a标签有默认行为。如果你用的是router-link，底层已经对a做了处理。跳转的时候，还可以指定路由的名字 Register就是路由配置里面name属性定义的值 二、脚本跳转在js中想要实现页面跳转我们可以使用 这种跳转页面直接强制替换。V
2022-07-05 10:28:38
152
原创 VueRouter-18-路由基础配置
在main.js中需要引入路由配置文件，挂载到Vue实例上面 router/index.js解析 Vue.use(VueRouter)：加载挂载，目前在Vue这个对象中，涵盖内容为基础内容。router对象里面加载映射文件，路由渲染出口定义路由渲染出口在App.vue这个组件，以后所有的路由加载的组件都在App.vue指定的路由渲染出口渲染 路由配置信息index.js中配置映射关
2022-07-05 10:27:18
174
原创 VueRouter-17-SPA和路由
SPA：singel page appliction 单页面应用程序，整个项目目前只有一个html页面，其他的模块都用组件的方式构造在Vue项目中唯一的html文件中 public文件夹下面SPA实现流程我怎么来控制div空间到底放哪个页面（组件）？需要引入路由来控制div到底显示哪个页面（组件）前端路由：将浏览器访问的地址，和UI组件关联在一起。一旦地址切换，匹配到不同组件渲染出来后端路由： 在后端路由中，我们核心目的就是将浏览器输入的URL地址和nodejs里面函数绑定在一起。核心概念：
2022-07-05 10:25:31
127
原创 VueRouter-16-全家桶项目搭建
Vue全家桶开发：Vue组件+Vue路由+Vuex状态机+第三方请求工具+UI组件库一、创建项目Vue的脚手架提供创建项目，可以基础项目，也可以创建全家桶项目 二、选择模式 最后一个选项代表自定义创建项目三、选择插件 必须将Vuex和Router选中。四、选中路由模式 你选中了路由插件，提示你选中路由模式。输入y就可以了接下里的步骤跟之前一样。对应选中就可以了...
2022-07-05 10:24:34
127
原创 Vue基础-15-动态组件
Vue中基于组件的方式来开发，需要控制组件的切换效果（显示和隐藏）最常见的效果就是tabs切换。比如你们在进行登录。可以账户密码登录，也可以是电话短信验证登录Vue中提供了component标签用于动态组件渲染 component这个标签不会引入任何的节点代码。默认必须要有is属性is属性的值等于子组件名字，默认加载这个组件。使用动态组件来进行组件切换的时候，消失的组件默认会被销毁处理。 只要切换，destroyed就会执行，说明被销毁。在动态组件开发过程
2022-07-05 10:23:45
210
原创 Vue基础-14-单向数据流
单向数据流：是Vue中prop提出的一个概念组件参数传递的时候，可以用props来传递参数，但是不能修改props的值，过程就称为单向数据流Vue官方解释：简单说：Vue中我们数据流只能父组件流向子组件。不能直接修改数据流，传递回父组件。自定义事件的方式让组组件主动修改数据。 如果你直接修改props的值，会出现一下的问题我们可以使用watch的方发来监控数据
2022-07-05 10:21:54
187
原创 Vue基础-13-组件通信
Vue中我们所有的页面都是基于组件构造出来，组件之间相互嵌套。父组件、子组件、兄弟组件的说法。正在上传…重新上传取消再真实业务开发过程中，我们可能会再父组件中获取数据，交给子组件渲染。获取到父组件传递给他的数据，就这种流程称为组件通信父组件传递数据给子组件，子组件传递数据给父组件prop值传递可以接受外部数据，组件数据由两部分组成，内部data定义，另外一部分就外部props定义父组件 子组件
2022-07-04 16:06:55
97
原创 Vue基础-12-组件生命周期（重点）
组件创建到销毁的过程其实就是一个生命开始和结束过程。目前我们项目中只有一个html文件，单文件开发（SPA）SPA： Single Page Application（单页应用程序）概念：就是只有一个Web页面的应用，是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序。页面实现采用组件来进行加载。再Vue组件运行过程中，会经历很多个阶段。每个阶段都可以执行不同的业务代码Vue实例生命周期一共划分四个阶段：1、创建阶段：newVue这个对象，并且要初始化你们data数据。一旦执行完毕
2022-07-04 16:05:25
284
原创 Vue基础-11-过滤器
原始的数据可以通过计算属性的方式来操作，得到一个新的结果。再页面用计算后的结果Vue的过滤器有两种类型： 使用的这个过滤器的时候 使用过滤器，按照顺序一个一个执行，过滤器链找到main.js，获取Vue对象 使用的时候跟上面一样的语法全局过滤器可以再任何组件中使用。...
2022-07-04 16:04:49
109
原创 Vue基础-10-数据变更检测
再Vue中已经可以定义对象类型、基本类型数据、数组类型的数据主要基本数据类型的值发生变化，我们页面都能动态检测更新替换对象的引用、修改对象的属性值能够检测到更新。如果你添加一个属性，删除一个属性，Vue检测不到更新。你提供一个新的对象覆盖原来的地址，Vue能够检测到更新。 使用Vue官方提供的api来完成数据更新 $set这个函数是Vue提供的一个能够动态新增属性的函数，三个参数：第一个参数你要操作的对象，第二个参数添加的属性，第三个参数属性值删除一个属性
2022-07-04 16:04:16
481
原创 Vue基础-09-表单输入绑定
Vue中想要操作表单的数据，无需再dom操作。比如登录、注册、添加Vue中提供了一个指令v-model，可以表单的双向数据绑定表单原始上面通过v-model绑定一个属性，当默认有属性值的，将值回显表单元素里面当你表单里输入了内容，默认将值赋值变量。这个过程就是双向绑定过程。原理：MVVM架构 架构：只是一种理念，提供了一种设计思路，本身并没有引入任何代码。你按照这个思路写代码，代表用了这种架构。 MVC架构：Vue内部设计的一种思想，MVVM：三部分构成M:Model（模型），再Vue中表示的就是data数
2022-07-04 16:03:47
598
原创 Vue基础-08-帧听器
Vue中提供了计算属性可以对数据进行监控操作，Vue还提供另外一个知识点帧听器，也可以对原始数据进行监听。一旦原始数据发生变化，监听器执行。Vuejs提供了一个新的模块watch，我们再watch模块里面写的代码就帧听器代码 只要涉及到对原始数据监控，发送异步请求，或者执行复杂的业务，都需要watch来实现仅仅是对原始数据，数据组合、计算，计算属性监控引用类型 深度监听
2022-07-04 16:02:48
194
原创 Vue基础-07-计算属性
目前在我们Vue代码中，data提供原始数据。在页面上进行渲染的时候会对原始的数据进行一些操作。 这是目前我们在模板里实现的计算属性，对原始数据进行操作，得到一份新的数据，渲染。原始数据没有任何变化computed和methods一样都是vue提供的模块，methods存放的所有的函数。computed里面主要包含对原始数据进行计算得到新的结果，拿到页面渲染 计算属性依赖于原始数据，一
2022-07-04 16:02:03
75
原创 Vue基础-06-条件和循环
在Vue中提供一下几个指令可以完成条件判断 你可以在指定的标签上面添加这三个指令，作用的过程中一组互斥的条件如何使用：（面试题）如果页面上有一个元素状态切换比较频繁，我会选择v-show。遇到有些内容可能一直都不会切换，没有必须加载出来 v-if template：这个标签是Vue提供的一个虚拟标签，你可以使用他来包裹一块布局代码。渲染过程中不会实际产生节点。传统的dom操作要产生页面节点，循环次函数 循
2022-07-04 16:01:17
177
原创 Vue基础-05-事件绑定
在Vue中事件的处理比较重要，目前Vue提供了v-on的指令专门用于绑定事件 平时开发过程中 click:点击事件 onclickchange：切换blur：失去焦点focus：获取焦点input：文本输入事件等等事件参数传递，指的就是绑定的事件函数可以传递event对象或者指定的参数值 绑定事件的时候，如果没有加括号，函数参数第一个默认接受Event事件传播对象。 自己加上括号代表要传递参数，系统默认
2022-07-04 16:00:30
605
原创 Vue基础-04-class和style绑定
vue开发过程中，肯定会涉及到对元素的样式操作。vue提供了两种方式操作样式，动态操作class属性。直接标签上面写style属性，值是动态变化 scope属性在vue组件中要设计样式，所有的样式代码都要放在style标签中。 可以指定当前style的样式只能在这个组件中使用，不能穿透到子组件如果你需要指定某个css样式穿透，我们可以在指定css选择器前面添加如下代码 外部样式你们的每一个组件都可能会用到某些外部公共样式，你可以在组件指定引入c
2022-07-04 15:58:40
345
原创 Vue基础-03-指令
在Vue中我们要实现很多的功能，都是采用vue已经封装好的一些内容来实现，比如后续要绑定事件。@click，为什么会出现指令这种内容。以后在js或者jquery中获取数据，绑定数据我们都是通过dom操作。在vue中你还需要dom操作？需要用一些vue封装好的指令来实现dom的操作。 Vue采用的指令的方式来实现属性、内容、数据的动态绑定获取操作 常用的指令一、v-text和v-html v-html和v-text都是指令，需要写在标
2022-07-04 15:56:21
107
原创 Vue基础-02-组件的基本概念
vue官方文档：Vue.js前端工程化：在以前没有前端工程化概念的时候，我们前端项目就html、css、js结合的一个项目。在开发过程中很多工具都需要自己下载，很多依赖都需要自己手动下载并导入引入出前端工程化概念：包括完整工具链（babel）、依赖于npm可以很方便下载依赖包。无需自己在全网到处搜索依赖的插件。直接项目中下载依赖各种第三方的内容前端模块化：在以前没有模块化开发的年代，最开始民间出现了一些模块化工具，seajs。在es6中官方自己提供的模块化开发 模块化将js文件拆分很
2022-07-04 15:55:00
113
原创 Vue基础-01-框架和库的概念
库：jquery，其实就是某些方法的一个集合，只是将一些核心的代码封装起来，你在调用过程中，按照以前逻辑直接用函数的形式来完成开发。extjs（政府项目、医疗项目）easyui这个库框架：框架是一套完整的项目解决方案，提供了每个环节的开发内容。很多的业务不需要你自己去设计，你只需要按照框架约定的规范来写代码就可以实现效果。开发效率提高，性能优化。Vuejs：框架，有一套完整的代码解决方案，项目解决方案自定义引入Vue可以在你们html代码中直接引入使用。适合于目前你的项目已经开发完成，用vue来重构。使用命
2022-07-04 15:53:42
129
原创 uniapp获取时间
这里使用的是封装式写法，使用时需要用到import引入1.common/getdateTime.js/** * @param {String} str (y-m-d h:i:s) y:年 m:月 d:日 h:时 i:分 s:秒 */function dateTimeStr(str){ var date = new Date(), year = date.getFullYear(), //年 month = date.getMonth() + 1, //月 day = date.get
2022-04-10 13:03:58
1308
原创 滚动鼠标到底部增加页面内容
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl...
2022-01-20 11:56:44
136
原创 基础事件练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&...
2021-12-28 14:30:19
492
原创 倒计时（开始、暂停、重置）
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" /> <title>倒计时工具</title> <style> body { background-image: url("img/background.jpg"); margin-top: 20px; color: #f0f...
2021-12-28 13:11:40
1798
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人