Vue
关注
分享
扫一扫
此鱼非闲鱼也
烦恼像根葱，往里一看全是空！
展开
-
vue三种路由传参方式：路由属性push方法、params、query
vue路由传参的三种方式：场景：点击当前页的某个按钮跳转到另一个页面，并将某个值带过去<div class=“item” @click=“getDetail(3)”>查看详情1、直接使用路由属性配置this.$router.push实现携带参数跳转 methods:{ getDetail(id){ this.$router.push({path:`/user/${id}/`}) } }对应的路由配置(每个路由配置信原创 2020-08-14 09:37:03 · 6311 阅读 · 1 评论 -
vuex工作原理与流程
vuex工作原理与流程Vue组件（action里面的dispatch )--> actions(commit方法） -->mutations（Mutate）--> state（getter） -->store更新所有调用vuex的组件（Vue Component组件）1、state存储应用状态数据的对象，与vue组件中data类似state的值可以是对象，也可以是返回对象的函数通过store.state访问状态数据示例如下：import Vue from 'vue'i原创 2020-05-21 22:44:08 · 4163 阅读 · 1 评论 -
在vue中如何使用axios发送请求
axios是一个基于promise的http库，可以发送get，post请求（axios对ajax的封装），正由于Vue，React的出现，促使了axios轻量级库的出现直接使用会报错，需要下载axios，下载安装命令npm install --save axios使用axios在vue中发送ajax请求get方式 // 访问github的search接口 let url = `https://api.github.com/search/repositories?q=${t原创 2020-05-08 22:55:00 · 1097 阅读 · 0 评论 -
vue动态组件（组件切换操作）
vue动态组件有时，我们需要在多个不同的组件之间进行切换操作。组件的切换方式(1)使用v-if使用v-if 来处理，适用频繁操作的场景。会不断地创建组件和销毁组件,影响性能;不会保留组件改变后的状态及修改后的数据 <InBox v-if="currentCom==='InBox'"></InBox> <PostMail v-if="curren...原创 2020-05-08 11:07:52 · 2417 阅读 · 0 评论 -
vue组件生命周期、ref属性、nextTick
1、组件生命周期：组件从创建到销毁的过程。在这个过程中的不同阶段，vue会调用指定的组件方法基本生命周期函数的四个阶段：每一个阶段都对应着 之前 和 之后 两个函数，之前 的函数使用较少，之后 的函数使用较多一些（1）创建阶段–>beforeCreate()、created()（2）挂载阶段–>beforeMount()、mounted()（3）更新阶段–>bef...原创 2020-05-06 22:24:51 · 472 阅读 · 0 评论 -
vue非prop特性及props验证
1、非prop特性非 prop 特性：是指向一个组件传属性，但是该组件并没有相应 prop 来定义，这些 props 会被自动添加到组件的根元素（template模板中，包裹元素的最外层元素）上。2、替换/合并已有的特性默认情况下，非prop 特性的属性会覆盖组件根元素上同名的内容，但是针对 style 和 class 有特殊的处理，它们会合并（同名样式还是会覆盖）替换/合并已有的特性 ...原创 2020-04-29 20:36:03 · 734 阅读 · 0 评论 -
vue中.sync修饰符与vue插槽
sync修饰符vue组件之间数据传递，组件之间的通信方式：单向绑定父组件通过 props 传入数据到子组件内部，但是子组件内部不要修改外部传入的 props，vue提供了一种事件机制通知父级更新，父级中使用子组件时，监听对应的事件绑定处理函数即可虽然不推荐在组件内部修改 props ，但有时需要组件内部状态变化时去改变 props ，我们可以通过子组件触发事件，父级监听事件来达到这个目...原创 2020-04-28 22:44:47 · 1623 阅读 · 0 评论 -
vue组件传参（父传子、子传父、利用组件传参实现分页显示数据）
vue组件传参1、父传子 父：自定义属性名 + 数据（要传递）=> :value="数据" 子：props ["父组件上的自定义属性名"] =>进行数据接收 父级调用子组件，通过子组件的属性传入数据 子元素内部通过props配置(数组)，来接受对应的数据，如props:['属性1','属性2',...]在可复用的组件中，最上层只能有一个...原创 2020-04-28 19:11:23 · 1018 阅读 · 0 评论 -
vue全局过滤器与局部过滤器的使用
vue中的过滤器定义：对内容或数据进行过滤(二次处理)的一种方式写法：Vue.filter("过滤器名称",过滤方式);使用：过滤器类似于管道流种类：局部过滤器和全局过滤器1、全局过滤器（1）定义无参全局过滤器 <div id="app"> <p>{{ message | replaceStr}}</p> </di...原创 2020-04-25 22:43:19 · 2073 阅读 · 2 评论 -
vue中computed与watch的使用
1、事件函数vue中使用事件指令定义事件，@事件名="执行事件的函数";或者@事件名="执行事件的函数(参数)";在vue实例中事件函数是写在methods中的，如methods:{ 事件函数名(参数){ //函数体 }}注意：methods是与el和data同级的属性。看看示例：页面一开始打开先显示原始数据，三个按钮"全部"或"男"或"女"按钮后，筛选对应的数据显示到页面。 <...原创 2020-04-25 21:26:36 · 295 阅读 · 0 评论 -
vue组件(全局注册、局部注册)
vue组件使用1、认识组件(1) 创建组件的写法写法： Vue.component("组件名",{ //xx }); //这里是全局注册组件的写法Vue.component()函数的第一个参数就是组件名，比如Vue.component(“my-comname”,{ //xx}}); 那么my-comname就是新建组件的名称；（2）注意：为了能在模板中使用，这些组件必须先注册以便 ...原创 2020-04-23 21:01:08 · 860 阅读 · 0 评论 -
vue事件(事件指令、事件对象、事件修饰符)
vue事件1、事件指令：两种写法：(1) v-on:事件名.修饰符="执行的函数名或表达式"(2) @事件名="执行的函数名或表达式"注意:(1) 事件执行的函数，需要在methods中定义，即函数都存放在methods中(2) 事件绑定时，vue中函数名后有无小括号都可以调用，加小括号是为了传参使用。在普通js函数中，加小括号是调用此函数(3) this指向...原创 2020-04-22 18:24:11 · 1284 阅读 · 0 评论 -
vue自定义指令-实现按钮控制元素拖拽
1、要求：(1) 每次打开页面时，拖拽元素不可拖动，单击按钮后可以拖动元素，再次点击按钮，元素又不可拖动了。(2) 第一个按钮控制第一个div元素拖拽，第二个按钮控制第二个div元素拖拽，而且它们互不影响。2、问题：(1)前面写的拖拽代码，再次点击按钮后，元素还可以继续拖动。(2)点击其中一个按钮，另一个按钮的状态也改变了，两个元素都可以拖拽，无法实现一对一控制元素拖拽3、解决：(1...原创 2020-04-21 20:33:30 · 1319 阅读 · 0 评论 -
vue指令修饰符、自定义指令
1、vue指令修饰符指令名称:参数.修饰符 = "值"比如 v-bind:value.number = “msg”（1）不同指令有不同的参数，也有不同的修饰符（2）相同指令下的修饰符可以连续使用，但不能连着使用别的指令下的修饰符<div id="app"> <!-- .lazy 取代input监听change事件 --> &...原创 2020-04-20 22:31:47 · 1156 阅读 · 0 评论 -
Vue指令使用(v-once、v-cloak、v-pre、v-slot与v-on)（二）
vue中指令的使用1、v-once只会渲染元素或组件一次，即使后续的数据修改了，也不会渲染到页面上；它后面不需要跟任何表达式,比如<div v-once>{{dvText}}</div> <div id="app"> <!-- 每次修改passage，页面都会更新 --> <h1>{{passa...原创 2020-04-17 22:18:34 · 629 阅读 · 0 评论 -
前端框架之Vue的初步学习
什么是vue？官方解释：一套构建用户界面的渐进式框架。只关注视图层，采用自底向上增量开发的设计。它的目标是通过尽可能简单的API，去实现响应数据绑定和组合的视图组件。vue的使用之前，我们要先引入一个vue的js文件，两种方式：去vue官网上下载vue.js到本地,使用·<script>标签将它引入到html文件中直接引用网络上地址，CDN上的vue网络地址：https...原创 2020-04-17 17:15:25 · 185 阅读 · 0 评论 -
vue(常用指令、:key标识符、属性绑定与数据流)
vue指令在 vue 中，指令是一个带有 v- 前缀的属性，与普通属性不一样的地方是，指令的值是用引号括起来的 表达式，不同的指令有不同的作用，vue内置了一些常用的指令，而且我们还可以自定义指令。1、内容输出指令：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&...原创 2020-04-16 21:24:38 · 1689 阅读 · 0 评论