![](https://img-blog.csdnimg.cn/2021072909290254.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue
vue
鲨鱼辣椒面丶
这个作者很懒,什么都没留下…
展开
-
vue 路由传参 params 与 query两种方式的区别
首先是写法上的区别query:this.$router.push({ path:"/detail", query:{ code:10011 }});params:this.$router.push({ name:"detail", params:{ code:10011 }})//注意:如果用params传参,而name参数用的是path,例如this.$router.push({ path:"detail", //这里应该用name原创 2021-08-03 17:50:24 · 156 阅读 · 0 评论 -
vue的history路由模式配置及后台配置
项目根目录文件夹名称:rootFile一:后台配置:1、Nginx:location ~ ^/rootFile/ { root F:/XXX; try_files $uri $uri/ /rootFile/index.html;}二:Vue配置:1、文件 router.js将 mode 设置成 history 模式,并设置base:rootFile(和网站根目录名称一致,不然会报错)export default new Router({ mode:'history', base原创 2021-08-03 16:52:07 · 4507 阅读 · 0 评论 -
vue-router路由的两种模式
类型: string默认值: "hash" (浏览器环境) | "abstract" (Node.js 环境)可选值: "hash" | "history" | "abstract"配置路由模式:hash : 使用 URL hash 值来作路由。支持所有浏览器,包括不支持 HTML5 History Api 的浏览器。history : 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。abstract : 支持所有 JavaScript 运行环境,原创 2021-08-03 16:37:58 · 269 阅读 · 0 评论 -
Vue中自定义过滤器
虽然VueJs给我们提供了很多强有力的过滤器,但有时候还是不够。值得庆幸的,Vue给我们提供了一个干净简洁的方式来定义我们自己的过滤器,之后我们就可以利用管道 “ | ” 来完成过滤。定义一个全局的自定义过滤器,需要使用 Vue.filter() 构造器。这个构造器需要两个参数。// 定义一个全局过滤器Vue.filter('dataFormat', function (input, pattern = '') { var dt = new Date(input); // 获取年月日 var原创 2021-08-02 12:05:50 · 191 阅读 · 0 评论 -
利用v-mode让父组件的值与子组件input框里的值双向绑定
我们知道v-model可以实现数据的双向绑定,但是,如果说这是一个复杂的输入框,在项目中也经常使用。此时我们我们就把这个输入框封装成组件,那怎么利用v-mode让父组件的值与子组件input框里的值双向绑定起来。1)父组件<InputBox v-model="mes"></InputBox> 根据上面讲的v-model语法糖,所以 InputBox那行代码也可以写成 <InputBox v-bind:value="value" v-on:input="mes= $ev原创 2021-08-02 12:02:58 · 723 阅读 · 0 评论 -
vue中对象更改检测
还是由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除:var vm = new Vue({ data: { a: 1 }})// `vm.a` 现在是响应式的vm.b = 2// `vm.b` 不是响应式的对于已经创建的实例,Vue 不允许动态添加根级别的响应式属性。但是,可以使用 Vue.set(object,propertyName, value) 方法向嵌套对象添加响应式属性。例如,对于:var vm = new Vue({ data: { us原创 2021-08-02 11:54:15 · 404 阅读 · 0 评论 -
vue中子组件调用父组件的方法
Vue中子组件调用父组件的方法,这里有三种方法提供参考第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法父组件<template> <div> <child></child> </div></template><script>import child from '~/components/dam/child';export default {components: {原创 2021-08-02 11:44:59 · 868 阅读 · 0 评论 -
Vue 组件中 data 为什么必须是函数
在 new Vue() 中, data 是可以作为一个对象进行操作的,然而在 component 中, data 只能以函数的形式存在,不能直接将对象赋值给它。当data选项是一个函数的时候,每个实例可以维护一份被返回对象的独立的拷贝,这样各个实例中的data不会相互影响,是独立的。...原创 2021-08-02 11:40:11 · 64 阅读 · 0 评论 -
$nextTick的使用
参数: {Function} [callback]用法:将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它,然后等待DOM更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。实例:<template> <div> <p ref="msgp">{{msg}}</p> <button @click="change">$nextTick</button> &原创 2021-08-02 11:39:21 · 69 阅读 · 0 评论 -
vue常用的修饰符
1.按键修饰符如:.delete(捕获“删除”和”退格“键) 用法上和事件修饰符一样,挂载在v-on:后面,语法:v-on:keyup.xxx=’yyy’ ``<inputclass = 'aaa' v-model="inputValue"@keyup.delete="onKey"/>2.系统修饰符可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器(1) .ctrl(2) .alt(3) .shift(4) .meta3.鼠标按钮修饰符(1) .lef原创 2021-08-02 11:35:48 · 126 阅读 · 0 评论 -
vue监听属性watch中this指向报错
阿斯达原创 2021-07-28 12:02:27 · 964 阅读 · 0 评论