![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue笔记
文章平均质量分 51
vue笔记
web前端定做
这个作者很懒,什么都没留下…
展开
-
router路由、二级路由、默认路由路径、查询参数、传参
$route:路由信息对象,只读对象;$router:路由操作对象 ,只写对象。完整路径:window.location.href路由路径:this.$route.path默认路由方法1:使用redirect 重定向默认路由。默认跳转到子路由 “/left/tab1”export default new Router({ routes: [{ path: "/", redirect: "/left" }, { path: "/left", component:原创 2021-12-17 08:29:26 · 3410 阅读 · 0 评论 -
详解vue2.6插槽更新v-slot用法总结
在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。这篇文章主要介绍了详解vue2.6插槽更新v-slot用法总结,具有一定的参考价值,感兴趣的小伙伴们可以参考一下在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的特性。新语法的由来可查阅 RFC。插槽我的理解就是父页面在组件标签内插入任意内容,子组件内插糟slot控制转载 2021-12-12 16:19:27 · 640 阅读 · 0 评论 -
$nextTick延迟执行:在下次 DOM 更新循环结束之后执行延迟回调
定义:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码;理解:nextTick(),是将回调函数延迟在下一次dom更新数据后调用,简单的理解是:当数据更新了,在dom中渲染后,自动执行该函数,例子:点击按钮,自动显示输入框,隐藏按钮.输入框获取焦点.输入框失去焦点,自动显示按钮.app.vue父组件&l原创 2021-11-25 18:41:36 · 778 阅读 · 0 评论 -
vue兄弟组件之间传值通讯
让兄弟组件通过一个共同的父组件彼此通讯。父组件:<template> <div id="app"> <div id=""> <h3>{{Adata}}</h3> <left @leftFun="leftFun"></left> <!-- ↑left组件向父组件发送消息 --> <right :Amsg="Adata"></right原创 2021-11-25 14:24:04 · 571 阅读 · 0 评论 -
Vue 深度作用选择器 /deep/穿透 与scoped
使用 scoped 后,父组件的样式将不会渗透到子组件中。<template> <div id="app"> <el-input class="text-box" v-model="text"></el-input> </div></template><script>export default { name: 'App', data() { return { text转载 2021-11-23 21:23:03 · 1900 阅读 · 0 评论 -
vue-axios|axios 在vue cli的创建例子
安装:npm install --save axios vue-axios将下面代码加入入口文件:import Vue from 'vue'import axios from 'axios'import VueAxios from 'vue-axios'Vue.use(VueAxios, axios)↑按照这个顺序分别引入这三个文件: vue, axios and vue-axiosUsage:This wrapper bind axios to Vue or this if you转载 2021-11-21 23:52:01 · 116 阅读 · 0 评论 -
Vue 组件化中 data为什么是函数,return{}?
前言我们需要先复习下原型链的知识,其实这个问题取决于 js ,而并非是 vue 。function Component(){ this.data = this.data}Component.prototype.data = { name:'jack', age:22,}首先我们达成一个共识(没有这个共识,请补充下 js 原型链部分的知识):实例它们构造函数内的this内容是不一样的。Component.prototype ,这类底下的方法或者值,都是所有实例公用的。解开疑问基转载 2021-11-12 14:43:42 · 254 阅读 · 0 评论 -
vuex表单处理:input绑定state数据的方法(v-model优化)
在输入框打字,标签"结果:"就更新显示[输入框里面的内容]构建store://store/index.jsimport Vue from 'vue'import Vuex from "vuex"Vue.use(Vuex)const store = new Vuex.Store({ state: { count: 0, }, mutations: { add(state,num) { state.count=num } },})export default .原创 2021-07-19 14:01:30 · 994 阅读 · 1 评论 -
Vuex:state,mapState,...mapState对象展开符详解
1.statestate是什么?定义:state(vuex) ≈ data (vue)vuex的state和vue的data有很多相似之处,都是用于存储一些数据,或者说状态值.这些值都将被挂载 数据和dom的双向绑定事件,也就是当你改变值的时候可以触发dom的更新.虽然state和data有很多相似之处,但state在使用的时候一般被挂载到子组件的computed计算属性上,这样有利于state的值发生改变的时候及时响应给子组件.如果你用data去接收$store.state,当然可以接收到值,但由转载 2021-07-19 13:58:57 · 300 阅读 · 0 评论 -
vue中 关于$emit、props的用法
1、父组件可以使用 props 把数据传给子组件。2、子组件可以使用 $emit 触发父组件的自定义事件。vm.$emit( event, arg ) //触发当前实例上的事件,vm.$on( event, fn );//监听event事件后运行 fn;例如:子组件:————————————————<template> <div class="train-city"> <h3>父组件传给子组件的toCity:{{sendData}}</h3&转载 2021-07-19 13:56:52 · 133 阅读 · 0 评论 -
function函数,内嵌两个返回return,解读(vue,js知识点)
#返回数字(number)function fn1(){ return 100;}alert(fn1());//可以理解为 fn1() = 100; 函数名称加括号等于return出来的东西#返回函数(function)function fn3(){ return function(){ alert("1");// }}alert(fn3()); // 调用后返回这块函数: function(){ alert("1");}alert(fn3()()原创 2021-07-19 13:55:35 · 1995 阅读 · 0 评论 -
VUE中json的使用,各种导入方式
#vue中json的用法一:import-编译时输出接口items.json:{ "data": [ { "name": "数码", "childrenItem": [ { "name": "手机" }, { "name": "手表" }, { "name": "闹钟" } ] }, {原创 2021-07-19 13:53:47 · 1955 阅读 · 0 评论 -
vue中 关于$emit、props的用法
1、父组件可以使用 props 把数据传给子组件。2、子组件可以使用 $emit 触发父组件的自定义事件。vm.$emit( event, arg ) //触发当前实例上的事件,vm.$on( event, fn );//监听event事件后运行 fn;例如:子组件:————————————————<template> <div class="train-city"> <h3>父组件传给子组件的toCity:{{sendData}}&l转载 2021-07-01 16:45:02 · 238 阅读 · 0 评论