[Vue warn]: $attrs is readonly. 这个问题出现时,我自己都很懵逼,明明是在 data 内声明了一个 state  ,我在页面渲染完成后去改变它,但是一改变就报错,而且是我在多组件的使用下才会报错,如果页面内没有引入组件就不会报错.索信之下,我就打了个断点调试了下问题,结果发现下图: 这里使用的不是同一个 vue 源,仔细一看我下面有一个 用 cdn 加载的 vue 源.并且我的 webpack也有一个源. 导致了调用的时候不是同一个 vue. 后面我找到 cdn 的…

今天在用element-ui的DatePicker日期选择器的时候,发现每当点击一次这个组件,控制台就会报警告`[Vue warn]: $attrs is readonly`,但是也不影响实际操作效果.网上搜了一圈后,发现是使用的vue与vue-tempalte-compiler的版本不一致造成的.当时使用的vue是最新版本2.6.10,而vue-template-compiler版本是2.5.21. **解决方法:** 降低vue的版本至2.5.21. `npm uninstall vue`…

表单元素: ①②③④⑤⑥⑦★ 一.<from> 1. 代表表单 2 . action:提交为哪个页面 method:①  get :显示提交,由长度限制 ②  post: 隐藏提交 二.文本     1.文本框:<input type:"text" name:"" value="">  value=文本框值 name=文本框名称 2.密码框:<input type:"text" name:&quo…

破解C#的readonly只读字段 目录 请允许我再唠叨几句const和readonly 修改readonly字段: 计策1:反间计 -- 反射修改 计策2:借刀杀人--调节字段偏移位置的结构体来修改 计策3:无中生有--使用ilasm创建强行修改语句 问题的研究: 为什么?--翻阅CLI标准:initonly修饰符 捕获MSIL的代码验证错误 总结 返回目录 请允许我再唠叨几句const和readonly 其实大家都懂的,我就不多废话,直接重点: const只限于数字,字符串和字符,且以常量形…

vue提供了一整套前端解决方案,可以提升企业开发效率 vue的处理过程 app.js 项目入口,所有请求最先进入此模块进行处理 route.js 由app.js调用,处理路由的分发 controller.js 处理各种业务 model.js 执行增删改查crud(create.read.update.delete) MVC 即model(M).html(V).route.controller(c) MVVM VM是连接M和V的中介角色,VM提供了数据的双向绑定,作为view的html展示数据时需…

Vue - vue.js 常用指令 目录: 一. vuejs模板语法之常用指令 1. 常用指令: v-html 2. 常用指令: v-text 3. 常用指令: v-for 4. 常用指令: v-if 5. 常用指令: v-show 6. v-if和v-show的性能比较 7. 常用指令: v-bind 8. 常用指令: v-on 9. 常用指令: v-model 10. 常用指令: 指令修饰符 11. 常用指令: 计算属性 12. 常用指令: 侦听属性 13. 常用指令: 自定义指令 14.…

首先vue.js 是库,不是框架,不是框架,不是框架. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统. vue.js 下载过来直接在html中引入就好了并不一定要npm install vue. vue.js 有路由的 叫vue-route.js,vue.js也有数据请求 叫vue-resource.js Vue.js可以在html里引用,使…

什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架. Vue.js 是前端的主流框架之一,和Angular.js.React.js 一起,并成为前端三大主流框架! Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合. Vue 核心的概念,就是让用户不再操作DOM元素,提高渲染效率,前端程序员只需要关心数据的业务逻辑,不再关系 DOM 是如何渲染的. MVC 与 前端中的 MVVM 之间的区别 MVC 是后…

使用vue-cli 3.0+Element-ui时候,调用form表单校验时候出现的问题是: Property 'validate' does not exist on type 'Element | Element[] | Vue | Vue[]'. Property 'validate' does not exist on type 'Element'. 解决方案 (this.$refs.form as any).validate((valid: boolean) => { if (vali…

Vue.use Vue.use 的作用是安装插件 Vue.use 接收一个参数 如果这个参数是函数的话,Vue.use 直接调用这个函数注册组件 如果这个参数是对象的话,Vue.use 将调用 install 方法来注册组件 * 官方文档: * Vue.use 用于安装 Vue.js 插件. * 如果插件是一个对象,必须提供 install 方法 * 如果插件是一个函数,它会被作为 install 方法 * install 方法调用时,会将 Vue 作为参数传入 Vue.component Vu…

vue & vue router & dynamic router https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes old https://router.vuejs.org/api/#the-route-object const User = { template: '...', watch: { '$route' (to, from) { // react…

vue & vue router & match bug match bugs solution name must be router https://stackoverflow.com/a/44618867/5934465 OK import default module bug default !== {module name} xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!…

vue官网是这样介绍的: 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外).当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用. <div id="app"> A{{msg}} <my-button :msg="msg"><…

inheritAttrs.$attrs和$listeners使用场景: 组件传值,尤其是祖孙组件有跨度的传值. (1)inheritAttrs 属性说明:https://cn.vuejs.org/v2/api/#inheritAttrs 说明比较晦涩. 组件传值一般是通过props传值的.inheritAttrs默认值为true,true的意思是将父组件中除了props外的属性添加到子组件的根节点上(说明,即使设置为true,子组件仍然可以通过$attr获取到props意外的属性).示例代码:…

$attrs 包含了父作用域中不作为prop被识别的特性绑定,当一个组件没有声明props时,这里会包含所有父作用域的绑定, $listeneers 包含了父作用域中的v-on事件监听器,它可以通过v-on='$listeners'传入内部组件: demo: parent: <template> <div><h1>this is test tempalte</h1> <child :msg='message' msg1='msg11' msg2='ms…

一.vue中,默认情况下,调用组件时,传入一些没有在props中定义的属性,会把这些“非法”属性渲染在组件的根元素上(有一些属性除外),而这些“非法”的属性会记录在$attrs属性上. 二.如何控制不把这些非法的属性渲染在组件的根元素上呢?答案是在组件内部设置inheritAttrs:false即可. 三.通过v-bind="$attrs"可以把“非法”的属性渲染到指定的组件某个元素上. 四.如下图…

动态绑定input的readonly属性 1 <inpu :readonly="status ? false : 'readonly'"> status 为 false时添加 readonly 属性,只读,false不要加引号!…

今天在使用$attrs的时候遇到一个问题: 父组件: <PanelContainer name="正向舆情"> <PositiveOpinion opinion="positive" /> </PanelContainer> 我在子组件中没有用props保存这个值,按理说应该会把值传给孙子层,但在孙子层通过this.$attrs.opinion并没有获取到值, 后来发现要在子组件上写:v-bind="$attrs&quo…

new Vue(Vue 初始化) 一个vue实例化到底经历了什么?已下是博主自己的总结,不正确的地方请指出,谢谢~ 一.简述 从使用角度来看,挂载的顺序如下 1. $slots 2. $scopedSlots 3. beforeCreate 4. inject 5. props 6. methods 7. data 8. computed 9. watch 10. provide 11. created 12. beforeMount 13. mounted 从源码角度来看,运行的顺序如下 Vu…

终于算是顺利进入vue了,确实也只有学了过后才知道,之前三过vue而不学,确实是对的,现在进来了一点都不后悔,ajax.node.js.promise.webpack.git等等确实是除了三大基础外还需要额外学的. 终于能够一窥vue的真容了,学了这么久,说实话一直都忍着,不去触碰这一条线,就想留着保持浓厚的兴趣,来看看vue到底是个什么神奇的东西,能让代码如此简单,确实,至少到我现在学的阶段,其他大的感触没有,唯一的感触就是,很多功能的实现要简便的多了,那比原生js不是简单一星半点. 这中间笔…

const与readonly定义的值都不能更改,但它们到底有哪些异同点呢? Const ² Const是常量的意思,其定义的变量只能读取不能更改,且只能在定义时初始化,不能在构造函数与其它属性与方法中初始化 public class ConstTest { /// <summary> /// const定义的变量 /// </summary> public const int SUM = 100; public ConstTest() { //错误!const定义的变量不能在构造函…

vue中使用setInterval this.chatTimer = setInterval(() => { console.log(this.chatTimer); this.chatMsg(); }, 1000); 然后再组件销毁前进行清除 beforeDestroy() { clearInterval(this.chatTimer); this.chatTimer = null; } 根据 setInterval 返回的 id 打印来看,请除定时器并没有成功 但是这样不行,定时器在局部更新…

问题 vue 跳转外部链接问题,当跳转的时候会添加在当前地址后面 var url = 'www.baidu.com' //跳转1 window.localtion.href = url //跳转2 window.history.pushState(url); window.history.replaceState(url); //跳转3 window.open(url,"_blank"); //跳转4 var a = document.createElement("a&quo…

看本篇第二次复习内容即可. 还有一些 文档了这个如 https://www.cnblogs.com/iiiiiher/p/9508733.html https://www.cnblogs.com/iiiiiher/p/8973705.html vue复习项目 1.展示/搜索功能 tofixed 2.删除 filter() 3.全选反选 get checkAll的值, every set 各选项,forEach 4.总价格 reduce 5.选了多少本书 filter+length 6.选中后变灰…

spa单页开发及vue-router基础: https://www.cnblogs.com/iiiiiher/p/9034496.html url两种传参方式 query: $route.query http://localhost:63342/login?name=maotai&age=22 params: $route.params http://localhost:63342/login/maotai/22 引入router组件后, vm里注册router,会在vm实例上新增router属…

Vue.extend 返回的是一个 扩展实例构造器, 也就是一个预设了部分选项的Vue实例构造器 Var myExtend = Vue.extend({ //预设选项 })//返回一个 扩展实例构造器 //然后就可以这样来使用 var vE = new myExtend({ //其它选项 }) Vue.component 是用来全局注册组件的方法,其作用是将通过 Vue.extend 生成的扩展实例构造器注册(命名)为一个组件,可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时,会自动…

vue对象的生命周期 从vue的创建到销毁会经过一系列的事件,这是vue对象的生命周期. 创建期间的生命周期函数 <div id="box">    <h3 id="h3">{{msg}}</h3>   </div> var vm = new Vue({    el: "#box",    data: {        msg: "hello"    },    methods:…

简单的,我的首页,我的笔记项目 vue + vue-router + vuex View + VM(ViewModel) + Model (webpack) vue init webpack lint your code 选 n 注意:图片 ... npm run dev ---------- Vmain.vue Vnode.vue Vheader.vue npm install bootstrap@3 --save 导航条 样式调整: 修改a标签 我的首页 我的笔记 .. 拿路由的path 遍…

双向绑定实现($on $emit) 关于父子之间数据更新同步, 如果单向绑定, 子修改了,父却没有修改, 这种一般不符合规范 正常更新数据的套路是: 1. 子通知父更新数据 2. 子自动刷新获取最新数据 - 为实现这个,就会有发布订阅模式 1.特点: 一对多, 一个动作产生,引发一连串行为. 对应到数据结构是: {失恋:[cry,eat,shopping]} 2.如果失恋产生, 则会触发cry,eat shopping一系列动作执行. 这个思路就是发布订阅模式. 对应到vue,就是子去通知父亲刷…

preventDefault阻止默认行为和stopPropagation终止传递 event.preventDefault() 链接本来点了可以跳转, 如果注册preventDefault事件,则点了不能跳转 <body> <a href="http://w3cschool.cc/">Go to W3Cschool.cc</a> <p>The preventDefault() method will prevent the link ab…