liaoai-CSDN博客

文章目录一、路由概述二、基本使用1. 安装vue-router2. 应用插件3.编写router配置项4. 实现切换5. 指定组件的呈现位置多级路由（嵌套路由）1.配置路由规则，使用children配置项2.跳转（写完整路径）三、路由的query参数1.传递参数2.接收参数四、命名路由1.命名2.简化跳转五、路由的params参数1.配置路由，声明接收`params`参数2.传递参数3.接收参数六、路由的props配置七、 `` 的`replace`模式八、编程式路由导航九、缓存路由组件十、两个新的生命周期

2022-03-17 16:23:35 1203

原创 Vuex模块化_简易求和案例（二）

文章目录vuex模块化1.组件中读取state数据2.组件中读取getters数据3.组件中调用dispatch4.组件中调用commit求和案例Count.vuePerson.vuestore文件内index.jscount.jsperson.jsvuex模块化最重要的需要开启命名空间。注：state的分类 countAbout、personAboutgetters的分类 personAbout/firstPersonName1.组件中读取state数据this.$store.state

2022-03-12 17:40:54 1162

原创 Vuex_mapState_mapGetters_mapActions_mapMutations_简易求和案例—对Count组件进行修改

文章目录1.`mapState`1）对象写法2）数组写法2.`mapGetters`1）对象写法2）数组写法3.`mapActions`1）对象写法2）数组写法4.`mapMutations`1）对象写法2）数组写法求和案例（Count组件）1.mapState映射state中的数据为计算属性1）对象写法...mapState({sum:'sum',school:'school',subject:'subject'}),2）数组写法...mapState(['sum','school','su

2022-03-12 17:37:46 527

原创 Vuex的搭建_基本使用_简易求和案例_getters

文章目录vuex什么时候使用vuex？1.搭建Vuex环境2.基本使用getters的使用vuex专门在vue中实现集中式状态（数据）管理的一个vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。什么时候使用vuex？多个组件依赖于同一个状态来自不同组件的行为需要变更同一状态1.搭建Vuex环境（1）创建文件src/store/index.js//用于创建vuex中最为核心的storeimport Vue from '

2022-03-11 18:36:43 527

原创 Vue插槽_默认插槽_具名插槽_作用域插槽

文章目录插槽1.默认插槽2.具名插槽3.作用域插槽插槽让父组件跨域向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件=>子组件1.默认插槽父组件中：<Category> <template> <div>html结构</div> </template></Category>子组件中：<template> <div> <!-- 定

2022-03-11 18:32:56 698

原创 vue_github搜索案例

文章目录分析`App.vue``Search.vue``List.vue`分析将页面分为两个组件List、Search在Search组件内发送请求，请求成功/失败后，向List组件传数据（兄弟间传数据——全局事件总线），List组件接收数据。对于List组件，刚进入页面展示欢迎词，搜索中展示加载中，搜索成功后展示用户列表，搜索失败展示错误信息。App.vue<template><div class="container"> <Search/>

2022-03-11 18:31:39 319 1

原创配置代理_解决跨域问题

文章目录配置代理服务器实现方式一：`vue.config.js`文件发送请求方式二：`vue.config.js`文件发送请求1.xhr2.jqeury（对xhr的封装）3.axios （常用）（对xhr的封装）4.fetch（与xhr平级）（promise风格）（两层promise）（兼容性差）5.jsonp只能解决get请求6.vue-resource配置代理服务器解决跨域问题目前两个服务器http://localhost:5000/students http://localho

2022-03-11 18:29:38 1167

原创 AJAX_jQuery发送ajax请求_fetch函数_解决跨域问题

文章目录一、jQuery中的AJAX1.get请求2.post请求3.通用方法二、fetch函数三、跨域1.同源策略2.解决跨域1）JSONP① JSONP的使用② jQuery中的JSONP2）CORS一、jQuery中的AJAX1.get请求$.get(url, [data], [callback], [type])url：请求的 URL 地址data：请求携带的参数callback：载入成功时回调函数。type：设置返回内容格式（xml, html, script, json, tex

2022-03-06 20:53:07 600

原创 AJAX_AJAX使用_express使用_解决IE缓存问题_AJAX请求超时与网络异常_取消请求

文章目录AJAX1.XML2.AJAX特点1）优点2）缺点3.AJAX的使用（四步）1）创建XMLHttpRequest 对象2）设置请求信息3）发送请求4）接收响应4.express的使用5.解决IE缓存问题6.AJAX请求超时与网络异常7. `xhr.abort()` 取消请求AJAXAJAX就是异步的JS和XML，通过AJAX可以在浏览器中向服务器发送异步请求，无刷新获取数据1.XML可扩展标记语言，用来存储和传输数据，（html呈现数据）与HTML类似，不同的是HTML中都是预定义标签，而

2022-03-06 20:51:39 218

原创 E-R图向关系模型的转换

文章目录一、关系模型的基本概念二、由E-R图向关系模型的转换1.一个实体型转换为一个关系模式2.一个联系集转换为一个关系模式—通用规则（1）多对多联系（m:n）转换为一个独立的关系模式（2）一对一联系（1:1）① 转换为一个独立的关系模式② 与任一端的关系模式合并（3）一对多联系（1:n）① 转换为一个独立的关系模式②与n端的关系模式合并（4）3个或3个以上实体间的多元联系转换为一个关系模式（5）同一个实体内部的联系一、关系模型的基本概念1.关系关系是一张二维表，表示数据的逻辑结构。表中每一行代表一个

2022-03-04 20:31:33 38332 6

原创 jQuery实现简易TodoList

文章目录todolist案例html结构功能分析todolist案例html结构功能功能一：文本框里面输入内容，按下回车，就可以生成待办事项。功能二：点击待办事项复选框，就可以把当前数据添加到已完成事项里面。功能三：点击已完成事项复选框，就可以把当前数据添加到待办事项里面。功能四：但是本页面内容刷新页面不会丢失。功能五：删除事项功能六：统计事件个数分析对于功能四，需要用到本地存储localStorage，不管按下回车，还是点击复选框，都是把本地存储的数据加载到页面中。

2022-03-01 21:47:36 487

原创 jQuery尺寸、位置操作_事件_简易微博发布_其他对象

文章目录八、尺寸、位置操作1.尺寸2.位置“返回顶部”电梯导航案例九、事件1.事件注册2.事件处理 on()简易微博发布3.解绑事件 off()4.自动触发事件 trigger()5.事件对象十、其他对象1.拷贝对象2.多库共存3.jQuery插件八、尺寸、位置操作1.尺寸语法用法width() / height()取得匹配元素宽度和高度值只算width / heightinnerWidth() / innerHieght()取得匹配元素宽度和高度值包含padding

2022-03-01 21:44:54 204

原创 jQuery属性操作_内容文本值_元素操作_购物车案例

文章目录五、属性操作1.设置或获取元素固有属性2.设置或获取元素自定义属性3.数据缓存六、内容文本值1.普通元素内容2.普通元素文本内容3.获取设置表单值七、元素操作1.遍历元素2.创建元素3.添加元素购物车案例html结构如下功能五、属性操作1.设置或获取元素固有属性prop()element.prop("属性名") element.prop("属性名","属性值")2.设置或获取元素自定义属性attr()3.数据缓存data()这个里面的数据存放在元素的内存里面返回数字型六、内

2022-03-01 21:38:33 297

原创 jQuery基本使用_选择器_淘宝服饰切换案例_样式操作_效果_王者荣耀手风琴

文章目录一、基本使用1.jquery入口函数2.$符3.DOM对象和jQuery对象的转换二、jquery选择器1.基础选择器2.隐式迭代3.筛选选择器4.筛选方法5.排他思想淘宝服饰案例一、基本使用1.jquery入口函数等着页面DOM加载完毕再执行js代码，不必等到所有外部资源加载完成不同于js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码2.$符jQuery的顶级对象、jQuery的别称获取jQuery对象 (伪数组形式)$('div')**注：*

2022-03-01 21:28:43 491

原创 pubsub-js_消息订阅与发布_任意组件间通信

1.安装pubsub npm i pubsub-js2.引入import pubsub form 'pubsub-js'3.接收数据A组件接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。mounted(){ this.pubId = pubsub.subscribe('xxx',(msgName,data)=>{ //订阅消息 .... }) },4.提供数据methods: { ssss(){ pubsub.publi

2022-02-24 17:20:58 449

原创 Vue全局事件总线_任意组件间通信

全局事件总线 —— 任意组件间通信实现一个中介。1.安装全局事件总线new Vue({ el:'#app', //将App组件放入容器中 render: h => h(App), beforeCreate(){ Vue.prototype.$bus = this //安装 $bus计算当前应用的vm }})2.使用事件总线①接收数据：A组件接收数据，则在A组件给$bus绑定自定义事件，事件的回调留在A组件自身methods(){ demo(data){}

2022-02-24 17:18:36 361

原创组件通信：子组件 =＞父组件_绑定自定义事件

文章目录组件通信：子组件 => 父组件1.基础方法2.方法二另：解绑自定义事件组件通信：子组件 => 父组件1.基础方法父组件向子组件传函数，子组件通过调用函数实现传入。2.方法二在父组件中给子组件绑定一个自定义事件第一种方式：在父组件中：<Student v-on:aaa="getStudentlName"></Student>例如：父组件中：<Student v-on:aaa="getStudentlName"></Stude

2022-02-23 21:03:28 489 2

原创 Vue实现简易TodoList

文章目录TodoList案例分析App.vue功能实现：1.Header部分Header.vue2.List部分List.vue3.Item部分Item.vue4.Footer部分Footer.vueTodoList案例（省略样式部分）分析分为四个组件 Header List Item FooterApp.vue<template> <div id="root"> <div class="todo-container"> <div

2022-02-23 20:36:26 4861 1

原创 Vue组件_props配置_mixin混合_插件_scoped样式

文章目录一、props配置1.传递数据：App.vue中2.接收数据：Student.vue中二、mixin混合1.定义混合2.使用混入三、插件1.定义插件2.使用插件四、scoped样式一、props配置作用：让组件接收外部传来的数据例如：Student是一个组件，置于App中1.传递数据：App.vue中<Student name="李四" sex="女" v-bind:age="18"></Student>**注：**接收到的数据为字符串类型，上述需使用:age

2022-01-27 21:50:41 1172

原创 Vue_render函数

引入：在创建Vue实例对象引入组件时，为什么使用render函数而不是template配置项1.vue.js 与vue.runtime.xxx.js的区别：(1)vue.js是完整版的Vue，包含核心功能+模板解析器。(2)vue.runtime.xxx,js是运行版的Vue，只包含核心功能，没有模板解析器。2. 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。render函数

2022-01-24 21:36:47 309

原创 Vue_监测数据

Vue监测数据1.加工data2.vm._data = data1.vue监视data中所有层次的数据2.如何监测对象中的数据？通过setter实现监视，且要在new Vue时就传入要监测的数据。(1)对象中后追加的属性，Vue默认不做响应式处理(2)如需给后添加的属性做响应式,请使用如下API：vue.set(target.propertyName/index，value)vm.$set(target. propertyName/index. value)3.如何监

2021-12-04 19:52:12 647

空空如也

jquery ajax get请求无效

怎么设定一个input输入框的长度