![](https://img-blog.csdnimg.cn/20190918140213434.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue(已完结)
vue
桃桃tao
这个作者很懒,什么都没留下…
展开
-
vue的router(二)router-link的replace属性&编程式路由导航&缓存路由组件&两个新的生命周期钩子&路由守卫
1.router-link的replace属性*给router-link添加replace属性后页签不能后退:2.编程式路由导航*作用:不借助router-link实现路由的跳转,让落跳转更加灵活:3.缓存路由组件*作用:让不展示的路由组件保持挂载,不被销毁<keep-alive include='组件的名字'> <router-view></router-view></keep-alive>...原创 2022-03-22 15:57:49 · 1770 阅读 · 0 评论 -
vue的router(一)路由的简介&路由的基本使用&几个注意点&嵌套路由&路由的query参数&命名路由&路由的params参数&路由的props配置
1.路由的简介*什么是路由:一个路由就是一组映射关系(key-value),key为路径,value可能是function或component*vue-router:vue的一个插件库,专门用来实现spa应用(单页面web应用)*路由分类: 前端路由:value是component,用于展示页面内容,当浏览器的路径改变时,对应的组件就会显示 后端路由:value是function,用于处理客户端提交的请求,服务器收到一个请求时,根据请求路径找到匹配的函数来处理请求,返回相应数据...原创 2022-03-19 12:26:39 · 748 阅读 · 0 评论 -
vuex(二)getters配置项&mapState与mapGetters&mapActions与mapMutations &vuex模块化+namespace
1.getters配置项*当state中的数据需要经过加工后再使用时,可以使用getters加工。2.mapState与mapGetters* mapState与mapGetters的作用:简化代码,帮助生成代码:$store.state.xxx和$store.getters.xxx*引入mapState与mapGetters*使用:3.mapActions与mapMutations4.vuex模块化+namespace*目的:让代码更好维护,让多种数据...原创 2022-03-17 08:56:17 · 702 阅读 · 0 评论 -
vuex(一)vuex简介&vuex工作原理图&搭建vuex环境&vuex的小案例
1.Vuex简介*什么是vuex:专门在vue中实现集中式状态(数据)管理的一个vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间的通信方式,且适用于任意组件间的通信*什么时候用vuex:多个组件依赖于同一个状态;来自不同组件的行为需要变更同一状态2.vuex工作原理图(图片来源尚硅谷)3.搭建vuex环境*在2022年2月7日,vue3成为了默认版本,如果执行npm i vue则直接安装vue3,同时vuex4随之变成默认版本,如果执行npm原创 2022-03-16 08:38:44 · 1334 阅读 · 0 评论 -
vue的slot插槽
*插槽的作用:让父组件可以向子组件指定位置插入html结构1.默认插槽 1.子组件:<template> <div class="cate"> <h3 class="head">{{title}}分类</h3> <slot></slot> </div></template><script>export default { props:...原创 2022-03-15 18:30:35 · 1138 阅读 · 1 评论 -
vue动画效果-定义动画帧&过度效果&集成第三方动画animate.css
1.定义动画帧<template> <div> <button @click="isShow=!isShow">显示/隐藏</button> <!-- // :appear="true"表示加载即带有动画效果 --> <transition :appear="true"> <div class="st" v-show="isShow"> <原创 2022-03-14 21:09:03 · 1599 阅读 · 0 评论 -
使用vue脚手架(三)浏览器本地存储&组件自定义事件&全局事件总线&消息订阅与发布
1.浏览器本地存储*localStroage存储的内容需要手动清除才会消失<body> <button onclick="saveData()">点击保存数据</button><br> <button onclick="readData()">点击读取数据</button><br> <button onclick="removeData()">点击移除数据</button&原创 2022-03-12 09:15:30 · 169 阅读 · 0 评论 -
使用vue脚手架(二)ref属性&props配置&mixin混入
1.ref属性*被用来给元素或子组件注册引用信息*应用在html标签上获取的是真实的dom元素,应用在组件标签上是组件实例对象(vc)<template> <div> <!-- ref用来给元素或子组件注册引用信息 --> <h2 ref="title">{{msg}}</h2> <button v-on:click="showDom">点击输出上方dom</b原创 2022-03-11 08:40:58 · 188 阅读 · 0 评论 -
使用Vue脚手架(一)创建脚手架&脚手架的结构&render函数&修改默认配置
1.创建脚手架*全局安装: 第一步:配置npm淘宝镜像:npm config set registry https://registry.npm.taobao.org 第二步:全局安装脚手架: npm install -g @vue/cli 第三步:切换到你要创建项目的目录,然后使用命令创建项目: vue create xxxx2.脚手架的结构*.gitignore:git的忽略文件,配置不想被git管理的文件*babel.config...原创 2022-03-10 08:31:58 · 954 阅读 · 0 评论 -
vue组件化编程-模块与组件&非单文件组件&组件嵌套&VueComponent构造函数&单文件组件(文章中所有代码均可运行,有问题可留言)
1.模块与组件*模块:向外提供特定功能的js程序,一般就是一个js文件*组件:用来实现局部功能效果的代码集合2.非单文件组件*非单文件组件:一个文件中包含有n个组件*使用组件步骤:创建组件->注册组件->使用组件<body> <div id="root"> <!-- 使用组件 --> <school></school> <hr>原创 2022-03-09 08:33:24 · 812 阅读 · 0 评论 -
vue基础核心(六)过滤器&自定义指定&生命周期(文章中所有代码均可运行,有问题可留言)
1.过滤器*过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 。<body> <div id="root"> <h2>时间显示</h2><br> <!-- 要过滤的内容+管道符+过滤器的名字,过滤器对数据进行加工,加工结果为过滤器的返回值--> <h3>当前时间:{{time | timeFormater}}</h3><br>原创 2022-03-08 14:58:54 · 80 阅读 · 0 评论 -
vue基础核心(五)收集表单数据:输入框&单选框&复选框&密码框&下拉框&文本框(文章中所有代码均可运行,有问题可留言)
<body> <div id="root"> <!-- 输入框:v-model和vue进行绑定,输入的内容就是value --> <!-- trim修饰符:不收集前后空格,但中间空格无法识别 --> 账号:<input type="text" name="id" v-model.trim="id"></input><br> <!-- 密码框:v-.原创 2022-03-07 15:35:18 · 685 阅读 · 0 评论 -
vue基础核心(四)条件渲染&列表渲染&列表过滤&列表排序&vue.set()的使用&vue监测数据的原理(文章中所有代码均可运行,有问题可留言)
1.条件渲染*v-show*v-if<body> <div id="root"> <div class="style1"> <h2 v-show="trueOrFalse">你好{{name}}</h2><br> <button v-on:click="showOrNotShow">显示or不显示</button><...原创 2022-03-06 14:58:24 · 426 阅读 · 0 评论 -
vue基础核心(三)绑定样式(文章中所有代码均可运行,有问题可留言)
1.绑定样式*绑定class样式字符串写法:适用于样式的类名不确定,需要动态指定*绑定class样式数组写法适用于要绑定的样式个数不确定,名字也不确定*绑定class样式对象写法适用于要绑定的样式个数确定、名字也确定,但要动态决定用不用*绑定style样式<style> .basic{ background-color: rgb(255, 255, 255); width: 300px;...原创 2022-03-05 16:55:56 · 141 阅读 · 0 评论 -
vue基础核心(二)计算属性&监视属性(文章中所有代码均可运行,有问题可留言)
1.计算属性*vue中data里的数据都是属性,所谓计算属性就是拿着已经存在的属性去计算,得到全新的属性*计算属性实现:<body> <div id="root"> 请输入姓:<input type="text" v-model:value="firstname"><br> 请输入名:<input type="text" v-model:value="lastname"><br>...原创 2022-03-04 17:09:29 · 209 阅读 · 0 评论 -
vue基础核心(一)模板语法&数据绑定&MVVM模型&ObjectdefineProperty方法&数据代理&事件处理&事件修饰符&键盘事件(文章中所有代码均可运行,有问题可留言)
1.模板语法*vue模板语法有两大类: 1.插值语法: 功能:用于解析标签体内容 写法:{{xxx}},xxx是js表达式,可以直接读取到data中的所有属性 2.指令语法: 功能:用于解析标签 举例:v-bind:href=“xxx”,xxx是js表达式,可以直接读取到data中的所有属性*vue中有很多指令,且形2.数据绑定*单项数据绑定:v-bind*双向数据绑定:v-model v-model只能应用...原创 2022-03-03 11:08:03 · 317 阅读 · 0 评论