![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
棠樾
夫君子之行,静以修身,俭以养德。非淡泊无以明志,非宁静无以致远。
展开
-
vue无法加载文件C:\Users\xxx\AppData\Roaming\npm\vue.ps1因为在此系统上禁止运行脚本……解决办法
vue : 无法加载文件 C:\Users\用户名\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本。2、执行:set-ExecutionPolicy RemoteSigned。原创 2022-09-22 16:02:00 · 1082 阅读 · 0 评论 -
Vue和React的区别
Vue设计者尤雨溪亲自答:虽然Vue和React两者在定位上有一些交集,但差异也是很明显的。Vue 使用的是 web 开发者更熟悉的模板与特性,Vue的API跟传统web开发者熟悉的模板契合度更高,比如Vue的单文件组件是以模板+JavaScript+CSS的组合模式呈现,它跟web现有的HTML、JavaScript、CSS能够更好地配合。React 的特色在于函数式编程的理念和丰富的技术选型。Vue 比起 React 更容易被前端工程师接受,这是一个直观的感受;React 则更容易吸引在 FP原创 2022-03-30 10:30:33 · 1844 阅读 · 0 评论 -
Vue 的父组件和子组件生命周期钩子执行顺序是什么
加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted 子组件更新过程父beforeUpdate->子beforeUpdate->子updated->父updated 父组件更新过程父beforeUpdate->父updated 销毁过程父beforeDestroy->子before原创 2022-01-19 17:19:29 · 348 阅读 · 0 评论 -
vue watch监听多个值
有时候我们需要监听多个值,然后根据这几个值做出相应的操作。例如:当finishOne,finishTwo,finishThree这三个值都是true的时候,loading消失。 computed: { loadingShow() { const { finishOne, finishTwo, finishThree } = this; return { finishOne, finishTwo, finishThree };原创 2022-01-19 12:18:59 · 5148 阅读 · 0 评论 -
Vue watch 的handler,immediate,deep属性
watch除了可以监听data中数据的变化,还可以监听路由的变化。 监听$route.path属性。watch:{ '$route.path':function(newVal,oldVal){ //console.log(newVal,oldVal); } }原创 2022-01-15 11:27:18 · 2487 阅读 · 0 评论 -
Vuex $store.state的值能获取,但是里面具体的值却获取不到
问题:打印this.$store.getters可以获取的到,但是打印this.$store.getters.authInfo就是undefinedconsole.log(this.$store.getters,'是否登录')console.log(this.$store.getters.authInfo,'是否登录')原因:因为actions是异步操作,你在commit方法里再去打印肯定就有值了为什么对象能打印到?因为对象那个变量是地址,你展开的时候对象已经扩充了,所以能看到。原创 2022-01-13 18:32:31 · 6928 阅读 · 1 评论 -
Object.definedProperty
核心是利用ES5的Object.defineProperty,这也是Vue.js为什么不能兼容IE8及以下浏览器的原因。Object.defineProperty方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回这个对象。Object.defineProperty(obj, // 定义属性的对象prop, // 要定义或修改的属性的名称descriptor, // 将被定义或修改属性的描述符【核心】observe的功能就是用来监测数据的变化。实现方式是给非VNode原创 2021-12-10 18:08:54 · 888 阅读 · 0 评论 -
VUE 单页面应用 修改页面title
首先路由配置:const routes = [ { path: '/', name: 'login', component: Login, meta: { title: '服务记录', // 添加meta属性 }, }, { path: '/fillAddress', name: 'fillAddress', component: FillAddress, meta: { title: '填写原创 2021-11-26 18:05:31 · 637 阅读 · 0 评论 -
Vue3 compositionAPI中setup函数如何访问路由
问题描述:在vue2.x中可以通过this访问到$router对象,this是当前vue实例,但是在vue3的seetup函数中是无法访问this的(为undefined),所以无法通过this来访问$router对象。解决方法:1.引入路由函数// 引入路由函数import { useRouter } from "vue-router";// 使用setup(){ // 初始化路由 const router = useRouter(); router.pu原创 2021-11-26 17:50:25 · 2577 阅读 · 0 评论 -
解决Vuex中的数据刷新后消失问题
问题:在vue项目中使用vuex仓储管理保存一些信息的时候,当刷新页面,这些保存在store中的信息就会丢失。原因:是因为js被加载后是在内存中执行的,js被加载后,其实就是将js代码执行了一遍,在内存中创建了所有js文件中的变量。当需要执行某个方法时其实是在内存中执行该函数。当页面进行刷新的时候,之前创建的所有变量内存都会被释放,重新加载js代码,变量重新赋值。所以有些通过用户操作后保存在vuex中的信息就会丢失。解决方法:1.可以采用其他的存储方法,例如:sessionStora原创 2021-11-24 17:41:00 · 3379 阅读 · 0 评论 -
Failed to resolve directive: XXX
这个报错有2个原因:1.指令单词拼错2.Vue.directive() 这个方法没有写在 new Vue 之前// 错误的写法import Vue from 'vue';import App from './app.vue';new Vue({ render: h => h(App),}).$mount('#A-demo'); Vue.directive('focus', { inserted(el){ el.focus(); }})//..原创 2021-11-10 11:22:31 · 2165 阅读 · 1 评论 -
vue中的.sync修饰符
首先来看一下官网API的定义:大概意思就是在Vue中,父子组件最常用的通信方式是通过props进行数据传递,并且只能是父到子的单向数据传递,子组件是不允许修改父组件传递过来的props的值。如果直接修改浏览器会报错。但是有一些业务场景需要在子组件内部改变父组件传递过来的props值并更新到父组件中去,这时就需要用到.sync修饰符。其实.sync也是一个语法糖:// 子组件<child :name.sync="name" ></child>// 其实.原创 2021-10-25 17:39:50 · 1191 阅读 · 0 评论 -
vue 自定义事件 v-model
看完官网API的介绍,想必是有点懵的,我们可以从v-mode的语法糖来一步一步的理解。v-mode语法糖:v-model实现了表单输入的双向绑定。一般我们是这么写的:// html<div> <input v-model="name" /></div>// .vue文件export default { data(){ return { name: '', } }}..原创 2021-10-21 18:31:44 · 1170 阅读 · 0 评论 -
Vue的生命周期
Vue的生命周期主要有 :beforeCreate 、created 、 beforeMount 、 mounted 、 beforeUpdate 、 updated 、 beforeDestroy 、destroyedbeforeCreate:实例组件刚创建,元素DOM和数据都还没有初始化,暂时不知道能在这个周期里面进行生命操作。created:数据data已经初始化完...原创 2020-07-22 16:46:00 · 62 阅读 · 0 评论 -
解决v-for和v-if不能同时使用的问题
在vue的官方文档中是这样说的: 注意我们不推荐在同一元素上使用 v-if 和 v-for。更多细节可查阅风格指南。当它们处于同一节点,v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中。解决这个问题的方法是使用计算属性computed例如:改成:...原创 2020-07-22 17:23:00 · 199 阅读 · 0 评论 -
vue router 两种跳转push和replace对比区别
router.push(location)会向 history 栈添加一个新的记录,当用户点击浏览器后退按钮时,则回到之前的 URL。router.replace(location)它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。传参的两种方式 1.使用query 2.使用params两者传参的区别是...原创 2020-06-24 14:44:00 · 574 阅读 · 0 评论 -
Vue中computed和watch的区别
计算属性: computed1.计算属性是由data中的已知值,得到的一个新值2.这个新值只会根据已知值的变化而变化,其他不相关的数据的变化不会影响该新值3.计算属性不在data中4.别人变化影响我自己监听属性:watch监听数据的变化1.监听data中数据的变化2.监听的数据就是data中的已知值3.我的变化影响别人补充:1.watch有一个特点,就是当值第一次绑定的时候,...原创 2020-06-24 17:16:00 · 76 阅读 · 0 评论 -
Object.freeze()
Object.freeze()方法可以冻结一个对象。一个被冻结的对象再也不能被修改;冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性、可配置性、可写性,以及不能修改已有属性的值。此外,冻结一个对象后该对象的原型也不能被修改。freeze()返回和传入的参数相同的对象。语法:Object.freeze(obj) // obj 参数 要被冻结的对象。返回值:被冻结的对象被冻结对象自身的所有属性都不可能以任何方式被修改。任何修改尝试都会失败..原创 2021-08-26 18:06:15 · 408 阅读 · 0 评论