Vue
文章平均质量分 54
js框架
IT_CODE.
web开发
展开
-
[Vue warn]: Runtime directive used on component with non-element root node. The directives will not
vue一些小问题一些记录原创 2024-04-19 17:08:01 · 153 阅读 · 1 评论 -
error Mixed spaces and tabs no-mixed-spaces-and-tabs报错
学习记录昂原创 2024-03-09 21:33:23 · 435 阅读 · 0 评论 -
路由传参数
传参方式可划分为params传参和query传参,而params传参又可以分在url中显示参数,和不显示参数两种方式1.params传参(显示参数),又可分为声明式,和编程两种方式~声明式 router-link:该方式是通过router-link组件的to属性实现,子路由需要提前配置好参数<router-link to="/home/x">跳转到子路由</router-link>{path: '/child/:id',component:Chi原创 2022-04-06 10:22:36 · 1653 阅读 · 0 评论 -
Vuex中mapState
最近使用到这个辅助函数时,忘了好多,温习一下mapState普通手写计算属性:computed:{ count(){ // 计算属性渲染的时候 {{count}}对的 count()错误写法 return this.$store.state.count } school(){ return this.$store.state.school ..原创 2022-04-03 16:52:06 · 2155 阅读 · 2 评论 -
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “/?k=“
出现这个警告编程式路由跳转到当前路由,(参数不变),多次点击执行抛出如上图异常,声明式导航没有这个警告,Vue-router底层已经处理好了问题产生的原因'vue-router':"^3.5.3":最新的vue-router引入了promise解决方案:1,通过给push或者replace方法传递响应的成功、失败的回调函数,可以捕捉到当前警告,既可以解决,这种方法治标不治本,换个组件(其他组件用的push方法)又得在push中添加失败和...原创 2022-02-08 22:03:39 · 553 阅读 · 0 评论 -
hash模式与history模式之间的区别
1.首先hash模式url带#号,history模式不带#号history丢掉了#,操作中前进或者后退,都没关系,但是如果重新刷新页面,没有了服务器的支持,刷新之后,就会去请求服务器,会把前端路由路径(../../../.../.../.../)当成资源去请求服务器,而此时的前端路由的路径后端路由没有匹配相对应的函数如下图这样路径完全不对,而这个服务器就只有一个person(后端路由),没有设置‘/home/message/...’ 无法找到响应的支持,就会报错4原创 2022-02-07 20:15:37 · 2522 阅读 · 0 评论 -
Vue监测数据的原理
我们在Vue的时候一直在和数据打交道,将我们的目标数据放在data中,然后html中的插值语法{{xxx}},或者是<input type="text" v-model:value="">这种指令语法,可以响应试渲染数据,(data数据的变化直接响应式更新页面,无需操作dom),但是问题来了,我们Vue是如何监测到data中数据的改变的呢?,这里就涉及到Vue监测数据的问题了.Vue中如何监测到data中的数据的改变的呢,即下图中model数据变化了VIewModel(vm)也是Vue实例是原创 2022-02-06 22:00:27 · 573 阅读 · 0 评论 -
Vue项目中引入全局路由
先讲讲全局引入,再聊聊如何使用吧。首先在src文件下创建router文件,router文件中创建index.js1.在index.js中配置好需要的路由.代码://配置路由的地方import Vue from 'vue';import VueRouter from 'vue-router';//引入路由组件import Home from '@/pages/Home'import Search from '@/pages/Search'import Login fro原创 2022-01-30 11:04:28 · 2632 阅读 · 0 评论 -
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent c
props是单项数据流不在再子组件内部改变prop,Vue会发出警告,可以在data中声明一个变量接收之后再修改,例如:子组件中收到的age,在data中设置一个临时变量maAge接收,改的话就该myAge原创 2022-01-20 13:13:52 · 2338 阅读 · 0 评论 -
Vue案例
vue案例练手原创 2022-01-11 23:02:00 · 1479 阅读 · 0 评论 -
Vue数据绑定与数据代理
❶当我们声明vue实例对象之后,即vm;❷vm中会生成各种配置对象options,其中options包含了_data;❸由于底层代码的支持会自动给_data中每个数据,在_data的外部(即同级)添加对应新的元素(即数据代理),如上图中的name、address,同时每个name、address中都会有setter、getter函数。 ...原创 2022-01-11 22:34:08 · 494 阅读 · 0 评论 -
Vue基础语法(细节)
细节原创 2022-01-11 12:35:36 · 259 阅读 · 0 评论 -
天气案例(js向vue过度小案例)
看bilibili的vue视频中各博主基本都会有vue天气这样一个案例,接下来我们来学习一下咋先看看js是如何实现的,比对学习一下,更好的理解vue的思想,把js编写思想扭转过来.<body> <h1>今天天气针不错,好<p id="c">凉爽</p> </h1><br /> <button id="btn">点击切换天气</button> <scrip.原创 2021-12-19 23:21:00 · 252 阅读 · 0 评论 -
Vue自定义指令
一.定义语法:1.局部定义:new Vue({directives:{指令名:配置对象}})//或者是new Vue({directives:{指令名:回调函数}})2.全局定义:2.全局定义:Vue.directive({指令名,配置对象})//或者是Vue.directive(指令名,回调函数)二 配置对象中常用的3个回调1. bind :指令与元素成功绑定时调用2.inserted:指令所在元素被插入页面时调用3.原创 2022-01-05 12:09:52 · 466 阅读 · 0 评论 -
Vue动态绑定样式
对于vue.js动态绑定class样式,看了一些网上的帖子发现整理的都不太完整,特地好好整理了一下,由于都在学习中,有啥疑问、问题欢迎指正,一起来学习吧。第一种情况: 适用于样式的类名不确定,需要动态的指定代码如下:<!DOCTYPE html><html lang="en"><head> <title>Document</title> <script src="js/vue.js">原创 2021-12-29 14:03:04 · 5524 阅读 · 0 评论 -
vue中的methods,watch和computer区别
借鉴,总结学习了一下<!DOCTYPE html><html lang="en"><head> <title>Document</title> <script src="js/vue.js"></script></head><body> <div id="root"> 姓:<input type="text" v-...原创 2021-12-26 14:59:29 · 1155 阅读 · 0 评论 -
Vue监视属性
天气小案例,通过改变ishot的值来进行切换,所有只有对isHot的值进行监视,当isHot发生改变时则进行一些变化监视属性(watch)与计算属性配置类似使用原创 2021-12-25 19:56:59 · 226 阅读 · 0 评论