Vue.js
vue。js项目中遇到的问题总结
Warriorkris0816
这个作者很懒,什么都没留下…
展开
-
vuex中mutation和action的详细区别
一、vuex中mutation和action的详细区别const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment') } }}) 1、流程原创 2020-08-04 09:13:32 · 7887 阅读 · 0 评论 -
为什么要用Action管理异步操作?
Action 类似于 mutation,不同在于:1.Action 提交的是 mutation,而不是直接变更状态。2.Action 可以包含任意异步操作。官方给的定义我没什么意见,事实上我通过mutation异步操作,好像跟用action管理也没什么区别。关于为什么要用Action管理异步操作,我会通过一个简单的例子和一个复杂的例子来进行说明,事实上,如果初学者没有考虑到实际场景的复杂情况,会觉得Action根本没有一点软用,这个时候就要把问题想得复杂一些了,然后才能看到Action的作用。先来看原创 2020-08-04 09:09:28 · 1298 阅读 · 2 评论 -
Vue之axios基础使用
axios 简介axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:1.从浏览器中创建 XMLHttpRequest2.从 node.js 发出 http 请求3.支持 Promise API4.拦截请求和响应5.转换请求和响应数据6.取消请求7.自动转换JSON数据8.客户端支持防止 CSRF/XSRF安装npm安装$ npm install axios --save通过cdn引入<script src="http原创 2020-08-03 17:06:26 · 215 阅读 · 0 评论 -
浅谈vue中的几个重要的钩子函数
生命周期 钩子函数 一个组件从创建到销毁的过程就是生命周期。 beforeCreate:创建前 1、当前vue实例化的时候会做一个初始化的操作,在这个生命周期函数里面我们可以做初始化的loading 2、在当前函数里面是访问不到data中的属性,但是可以通过vue的实例对象进行访问 created:创建后 1、当beforeCreate执行完毕以后,会执行created. 在当前函数中我们可以访问到data中的属性原创 2020-08-03 08:42:58 · 235 阅读 · 0 评论 -
vue 子组件修改props中的值
问题:子组件想修改父组件传来的值(props中的值)。普通的修改会报错,因为这个值是单向的,只能传进来,要是想修改就要用v-model解决办法:用v-model写个简单粗暴例子:父组件 <control :lingthData="lingthData" v-model="deviceF"></control> //v-model里面写上我们要传给子组件,并且还会在子组件中改变这个值 import control from '@/page/map/control'e原创 2020-07-31 09:03:01 · 2214 阅读 · 0 评论 -
vue 在哪个生命周期进行数据请求
看实际情况,一般在 created(或beforeRouter) 里面就可以,如果涉及到需要页面加载完成之后的话就用 mounted。在created的时候,视图中的html并没有渲染出来,所以此时如果直接去操作html的dom节点,一定找不到相关的元素而在mounted中,由于此时html已经渲染出来了,所以可以直接操作dom节点,(此时document.getelementById 即可生效了)。应用vue中实现先请求数据再渲染dom在项目中遇到了一个问题,下面是vue template原创 2020-07-31 08:59:08 · 11284 阅读 · 0 评论 -
VUE中$refs的基本用法
ref 有三种用法:1、ref 加在普通的元素上,用this.$refs.(ref值) 获取到的是dom元素2、ref 加在子组件上,用this.refs.(ref值)获取到的是组件实例,可以使用组件的所有方法。在使用方法的时候直接this.refs.(ref值) 获取到的是组件实例,可以使用组件的所有方法。在使用方法的时候直接this.refs.(ref值)获取到的是组件实例,可以使用组件的所有方法。在使用方法的时候直接this.refs.(ref值).方法() 就可以使用了。3、如何利用 v-fo原创 2020-07-31 08:56:22 · 1793 阅读 · 0 评论 -
vue动态绑定class和style
vue动态绑定class的几种方式通过对象绑定:class="{ 'active': isActive }"1.绑定多个第一种(用逗号隔开):class="{ 'active': isActive, 'sort': isSort }"第二种(放在data里面)//也可以把后面绑定的对象写在一个变量放在data里面,可以变成下面这样:class="classObject"data() { return { classObject:{ active: true, sort:fa原创 2020-07-31 08:52:24 · 179 阅读 · 0 评论 -
vue操作dom元素的三种方法介绍和分析
相信大家在做项目的时候,肯定会遇到这样的问题:我点击新增按钮,需要弹出个弹框,然后我点击对应的关闭按钮,关闭弹框,但是新增按钮和关闭按钮操作的是另一个元素,所以需要获取dom元素进行操控,那么在vue中怎么操作dom呢?以下是常用的三种方法:1、jQuery操作dom只要拿jQuery的选择器,选中相应的dom进行操作就可以了,但是大家都知道jQuery获取元素是查找页面所有,相当于“循环”所有元素直至找到需要的dom,但是vue是单页面的,jQuery获取dom并不只是获取vue当前页面,而是从根路原创 2020-07-31 08:49:43 · 615 阅读 · 0 评论 -
v-for和v-if一起使用的坑
在vue实际开发中,我们避免不了会使用v-for和v-if来操作数据,但是v-for和v-if同时使用时,有一个先后运行的优先级,v-for比v-if的优先级更高,这就说明在v-for的每次循环运行中每一次都会调用v-if的判断,所以不推荐v-if和v-for在同一个标签内同时使用。为了避免上述情况的发生,我们通常会采用如下的两种方法:1>ul和li搭配使用,或者是渲染父级标签下的子标签,可以使用如下方法:<ul v-if="state"> <li v-for="(item,原创 2020-07-31 08:46:17 · 478 阅读 · 0 评论 -
直接给一个数组项赋值,Vue 能检测到变化吗?
由于 JavaScript 的限制,Vue 不能检测到以下数组的变动:当你利用索引直接设置一个数组项时,例如: vm.items[indexOfItem] = newValue当你修改数组的长度时,例如: vm.items.length = newLength为了解决第一个问题,Vue 提供了以下操作方法:通过索引来修改数组,使其能成为响应式,解决直接使用赋值不能响应的问题Vue.set(vm.data,2,'huanpu','name') 对数组Vue.$set(vm.data,'K',原创 2020-07-31 08:41:29 · 2726 阅读 · 0 评论 -
Vue.js中过滤器(filter)的使用
Vue.js中过滤器(filter)的使用Vue.js 过滤器的基本使用(filter)vue中的过滤器分为两种:局部过滤器和全局过滤器1、定义无参全局过滤器 Vue.filter('msgFormat', function(msg) { // msg 为固定的参数 即是你需要过滤的数据 return msg.replace(/单纯/g, 'xxx') })完整示例<div id="app"> <p>{{ msg | ms原创 2020-07-31 08:39:51 · 332 阅读 · 0 评论 -
Vue中watch用法详解
基本用法:当fullName值变化时,watch监听到并且执行<div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p></div> new Vue({ el: '#root', data: { firstName: 'Dawei', las原创 2020-07-31 08:34:45 · 202 阅读 · 0 评论 -
vue中computed和watch的区别,以及适用场景
computed通过属性计算而得来的属性1、computed内部的函数在调用时不加()。2、computed是依赖vm中data的属性变化而变化的,也就是说,当data中的属性发生改变的时候,当前函数才会执行,data中的属性没有改变的时候,当前函数不会执行。3、computed中的函数必须用return返回。4、在computed中不要对data中的属性进行赋值操作。如果对data中的属性进行赋值操作了,就是data中的属性发生改变,从而触发computed中的函数,形成死循环了。5、当com原创 2020-07-30 17:09:46 · 368 阅读 · 0 评论 -
SPA单页面
单页Web应用(single page web application,SPA): SPA 是一种特殊的 Web 应用,是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的。它将所有的活动局限于一个 Web 页面中,仅在该 Web 页面初始化时加载相应的 HTML 、 JavaScript 、 CSS 。一旦页面加载完成, SPA 不会因为用户的操作而进行页面的重新加载或跳转,而是利用 JavaScript 动态的变换 HTML(采用的是 div 切换显示和隐藏),从而实现UI与用户的交互。在原创 2020-07-30 17:05:59 · 302 阅读 · 0 评论 -
Vue修饰符
Vue提供了一些修饰符,这些修饰符在使用起来非常方便,比如阻止默认事件、冒泡等。.lazyv-modeil不用多说,输入框改变,这个数据就会改变,lazy这个修饰符会在光标离开input框才会更新数据:<input type="text" v-model.lazy="value">.trim输入框过滤首尾的空格:<input type="text" v-model.trim="value">.number先输入数字就会限制输入只能是数字,先字符串就相当于没有加nu原创 2020-07-30 17:01:55 · 107 阅读 · 0 评论 -
vuejs中的事件绑定
vuejs中的事件绑定,使用<v-on:事件名 = 函数名>来完成的,这里函数名是定义在Vue实例中的methods对象中的,Vue实例可以直接访问其中的方法.事件绑定的方式(1) 内联直接把js写在标签上调用方法 <button v-on:click="alert('hi')">执行方法的第一种写法</button>(2)调用methods里定义的方法 <button v-on:click="run()">执行方法的第一种写法</bu原创 2020-07-30 16:57:51 · 284 阅读 · 0 评论 -
Vue.js 组件中的v-on绑定自定义事件理解
每个 Vue 实例都实现了事件接口(Events interface),即:使用 $on(eventName) 监听事件使用 $emit(eventName) 触发事件Vue的事件系统分离自浏览器的EventTarget API。尽管它们的运行类似,但是$on 和 $emit 不是addEventListener 和 dispatchEvent 的别名。另外,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。下面是一个文档上面的例子:<div id="counter-e原创 2020-07-30 16:48:41 · 640 阅读 · 0 评论 -
vue中created钩子函数与mounted钩子函数的使用区别
1:在使用vue框架的过程中,我们经常需要给一些数据做一些初始化处理,这时候我们常用的就是在created与mounted选项中作出处理。首先来看下官方解释,官方解释说created是在实例创建完成后呗立即调用。在这一步,实例已完成以下配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。这话的意思我觉得重点在于说挂架阶段还没开始,什么叫还没开始挂载,也就是说,模板还没有被渲染成html,也就是这时候通过id什原创 2020-07-30 16:43:38 · 465 阅读 · 0 评论 -
Vue组件中的data为什么必须是一个函数
1、从声明式渲染说起vue文档在声明式渲染这一节中给了我们这样的一个demo:<div id="app"> {{ message }}</div>var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }})在这个demo中data是一个对象,通过 new Vue 创建的 Vue 实例中,我们直接把data上的message属性通过模板渲染到页面上去了。但是在文档上Vue组件原创 2020-07-30 16:42:02 · 392 阅读 · 0 评论 -
$router和$route的区别
一1.router为VueRouter的实例,相当于一个全局的路由器对象,里面含有很多属性和子对象,例如history对象。。。经常用的跳转链接就可以用this.$router.push,和router-link跳转一样。。。this.$router.push会往history栈中添加一个新的记录。。详细见vue官方文档https://router.vuejs.org/zh/guide/essentials/navigation.html2.route相当于当前正在跳转的路由对象。。可以从里面获取na原创 2020-07-30 16:38:31 · 257 阅读 · 0 评论 -
v-model的原理描述
一,v-model是什么v-model就是vue的双向绑定的指令,能将页面上控件输入的值同步更新到相关绑定的data属性,也会在更新data绑定属性时候,更新页面上输入控件的值。二,为什么使用v-modelv-model作为双向绑定指令也是vue两大核心功能之一,使用非常方便,提高前端开发效率。在view层,model层相互需要数据交互,即可使用v-model。三,v-model的原理简单描述v-model主要提供了两个功能,view层输入值影响data的属性值,data属性值发生改变会更新vie原创 2020-07-30 16:32:21 · 749 阅读 · 1 评论 -
v-bind和v-model的区别及用法
v-bind 缩写 :动态地绑定一个或多个特性,或一个组件 prop 到表达式。官网举例<!-- 绑定一个属性 --><img v-bind:src="imageSrc"> <!-- 缩写 --><img :src="imageSrc"> <!-- 内联字符串拼接 --><img :src="'/path/to/images/' + fileName"> <!-- class 绑定 -->&l原创 2020-07-30 16:29:45 · 581 阅读 · 0 评论 -
Vuex的五个核心属性(概念)
Vuex是什么?VueX 是一个专门为 Vue.js 应用设计的状态管理架构,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。Vue有五个核心概念,state, getters, mutations, actions, modules。本文将对这个五个核心概念进行梳理。总结state => 基本数据getters => 从基本数据派...原创 2020-03-11 14:39:02 · 358 阅读 · 1 评论 -
vue中的v-if和v-show的区别
官方文档的介绍:Vue中文社区说明文档中简单来说是:初始渲染的时候进行条件判断展示;在实际开发中我们会经常使用到v-if和v-show来进行判断展示,我们可以这么理解<div class="tc" v-if="pload && list.length<1" > <img src="../assets/img/mall_none_order.png...原创 2020-03-11 14:30:52 · 390 阅读 · 0 评论 -
简述cookie 、localStorage和sessionStorage?
Web Storage规范是HTML5的一部分目的:克服由cookie带来的一些限制,当数据需要被严格的控制在客户端时,无须持续的将数据发回服务器。目标:1.提供一种cookie之外的存储会话数据的途径2.提供一种存储大量可以跨session存在的数据的机制定义:Web Storage规范包含两种对象的定义:sessionStorage和globalStorage**。这两个对象在支...原创 2020-03-10 19:46:46 · 404 阅读 · 0 评论 -
Vue 页面间传值?
1 最常用的莫过于参数传值传值是最好将字典,数组类型的 转成json字符串比较好JSON.stringify(item)1 this.$router.push({ name: 'TripFlightDetail',//页面名字 path:'/TripFlightDetail',//页面路劲 和上面名字任意一个都可以 query: {flight: JSON.stringify(i...原创 2020-03-10 19:31:20 · 268 阅读 · 0 评论 -
router和route的区别?
1. $route对象1.1 route表示(当前路由信息对象)表示当前激活的路由的状态信息,包含了当前URL解析得到的信息,还有URL匹配到的routerecords(路由记录)。路由信息对象:即route 表示(当前路由信息对象)表示当前激活的路由的状态信息,包含了当前 URL 解析得到的信息,还有 URL 匹配到的 route records(路由记录)。路由信息对象:即route表...原创 2020-03-10 18:51:26 · 1314 阅读 · 0 评论 -
Vue路由传参的三种基本方式
Vue路由传参的三种基本方式现有如下场景,点击一个button按钮跳转到另外一个路由页面,并向目标路由页面传递参数,便于目标路由页面获取源页面传递的数据信息。源页面中:<button @click="gotoTargetView">点击跳转到目标路由user页面</button>方案一,通过调用$router对象的push()方法,向push()方法传递一个路由配...原创 2020-03-11 14:12:28 · 296 阅读 · 0 评论 -
vue的指令
一、 vue 的指令v-model 数据绑定data 返回对象用 returnv-for 循环 格式 v-for="字段名 in(of) 数组json"v-show 显示 隐藏 传递的值为布尔值 true false 默认为falsev-if 显示与隐藏 和v-show对比的区别 就是是否删除dom节点 默认值为falsev-else-...原创 2020-03-10 18:40:18 · 178 阅读 · 0 评论