![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
【小白撑伞】
退役熬夜选手,人间美好事物观察者,软件编程“小白”。我的快乐 ,天下第一,立志吃遍世界,耶耶耶耶耶!
展开
-
vue的学习
Vue的学习1.插值语法和指令语法的基本使用2.数据绑定3.数据代理4.插值语法二5.点击事件6.键盘事件7.插值语法实现8.方法实现9.计算属性10.计算属性的简写11.天气案例-“监视”属性12.深度“监视”13.样式绑定14.条件渲染15.列表渲染16.key的原理17.音乐搜索案例18.html标签19.set的使用20.性能优化21.自定义指令 - 全局22.自定义指令 - 局部23.vue的生命周期24.组件的基本使用25.组件的基本使用二26.组件的嵌套1.插值语法和指令语法的基本使用原创 2022-01-03 21:28:50 · 149 阅读 · 0 评论 -
vue易错备忘录
computed(计算属性)拥有缓存属性;vue 提倡使用计算属性;只有当依赖的数据发生变化时,关联的数据才会变化,当**一个属性受多个属性**影响时就需要用到computed适用于计算或者格式化数据的场景;例如:购物车计算价格只要购买数量,购买价格,优惠券,折扣券等任意一个发生变化,总价都会自动跟踪变化.对于复杂逻辑,vue 提倡使用计算属性;最大特点就是缓存;watch(监事属性)**一个数据影响多个数据**一般用于监控路由、input输入框的值特殊处理等等,它比较适合的场景是一个原创 2021-10-28 20:42:27 · 73 阅读 · 0 评论 -
路由守卫
路由守卫定义:简单来说,路由守卫就是路由跳转前、中、后过程中的一些钩子函数,这个函数能让你操作一些其他的事儿,这就是路由守卫。全局路由的钩子函数包括:beforeEach在路由跳转前触发,参数包括to,from,next(参数会单独介绍)三个,这个钩子作用主要是用于登录验证beforeResolve(2.5+)这个钩子和beforeEach类似,也是路由跳转前触发,参数也是to,from,next三个afterEach是在路由跳转完成后触发,参数包括to,from,它发生在beforeEac原创 2021-10-26 12:02:32 · 1313 阅读 · 0 评论 -
路由跳转
路由跳转replace 替换浏览器栈使用场景:在登录过后 或注册过后 和不可回退页面必须加上这个<router-link to="/alllabels" replace active-class="current">全部标签</router-link>$router.push()默认跳转,当前跳转会被记录到浏览器栈中(可以浏览器前进后退切换)<button @click="$router.push('/alllabels')">点我显示全部标签</bu原创 2021-10-26 11:48:22 · 107 阅读 · 0 评论 -
router路由的不同传参方式
router路由1.params 和 query的比较query:query可以通过name来引入路由也可以通过path(父组件前的路径必须要加 / )引入;接收参数this.$route.query.name;地址栏通过 ”?属性1=值1&属性2=值2“ 传值;query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数params:params只能通过name来引入路由;接收参数this.$route.params.name;地址栏中只有参数值,没有属性,相对安全;params相当原创 2021-10-23 13:30:29 · 145 阅读 · 0 评论 -
导航栏切换背景色更换
导航栏切换背景色更换(仅限vue中使用)active-class<--current为css中class选择器的命名--><router-link to="/alllabels" active-class="current" >主页</router-link>active-class是vue-router模块的router-link组件中的属性,用来做选中样式的切换...原创 2021-10-20 20:34:16 · 308 阅读 · 0 评论 -
vuex简单入门
vuex使用场景:1.来自不同视图的行为需要变更同一状态。多个视图依赖于同一状态。2.来自不同视图的行为需要变更同一状态。多个视图依赖于同一状态。如下使用的场景是,父组件和子组件去更改另一个子组件的值,已经实现功能禁用功能npm安装npm install vuex --saveNumber.vue(另一个组件)<template> <div> {{$store.state.num}} <br> <but原创 2021-10-20 12:34:56 · 106 阅读 · 0 评论 -
插槽二(默认,具名,作用域)
插槽默认插槽BiliBili.vue <div class="aside-wrap"> <h2>排行榜</h2> <!-- 插槽 --> <slot></slot> </div>App.vue <BiliBili> <ul> <li v-for="(aw,index) in awList" :key="index">原创 2021-10-18 14:57:56 · 170 阅读 · 0 评论 -
websocket实现弹幕以及聊天
websocket实现弹幕以及聊天Message.vue<template><div> <div class="Mes-titie"> <b>憨 憨 家 族({{uNumber-1}}人在线)</b> </div> <div class="Mes-center" ref="message"> <p v-if="initMsg">{{initMs原创 2021-10-15 14:43:21 · 626 阅读 · 0 评论 -
消息的发布和订阅
消息的发布和订阅1.申请一个全局总事件main.jsnew Vue({ el: '#app', components: { App },//注册 template: '<App/>',//在指定作用域添加模板标签//创建之前,申明一个全局事件总线 beforeCreate(){ Vue.prototype.$bus = this; }})2.先订阅school.vue//添加 npm install --save pubsub-jsimport原创 2021-10-13 23:15:50 · 88 阅读 · 0 评论 -
跨域问题
跨域问题什么是跨域问题浏览器从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,都会出现跨域的问题。为什么出现跨域问题出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的原创 2021-10-12 20:06:04 · 100 阅读 · 0 评论 -
vue-cli重点整理
vue-cli易错整理refs的用法$refs 拿到的是子组件的VM对象;getElementById 只能拿到子组件标签;<h2 id="BlogItem" ref="BlogItem">小白</h2>-----------------------------------------------console.log(document.getElementById("BlogItem")); console.log(this.$refs.BlogItem);子组件原创 2021-09-30 23:11:12 · 145 阅读 · 0 评论 -
vue-cli 脚手架 的目录结构
vue-cli 脚手架 的目录结构目录结构build文件夹(webpack配置)src文件夹(项目核心文件)描述(1)App.vue(根组件)一个vue页面一把又三个部分组成:【template】,【script】,【style】【template】:模板使用vue-cli构建vue项目的好处就是方便,不用再去声明什么创建模板之类的语句,可以直接写模板内容了,要注意的是,模板中所有的内容只有一个根节点,就像上图,所有内容都包含在div标签内。【script】:JavaScript代码原创 2021-09-19 12:22:36 · 189 阅读 · 0 评论 -
vue-插槽slot
插槽<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <todo><!-- 自测:和自定义标签顺序没有关系,只要引入就行,目的是为了绑定数据-->原创 2021-09-10 16:48:19 · 94 阅读 · 0 评论