![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
VUE
每逢佳节掉三根.
要想技术提升那就得付出努力.
展开
-
v-model绑定vuex中state状态
废话不多说上代码vuexconst state = { value: 1};const mutations = { SET_VALUE: (state, value) => { state.value= value; },};const actions = {};const getters = { value: state => state.value,};export default { namespaced: true,原创 2020-09-03 08:48:01 · 1972 阅读 · 0 评论 -
vue中axios实现下载
前端项目实现请求后台步骤一:安装axios组件,一般使用命令:npm install axios --save步骤二:为了项目规范整洁,把一些常用的请求方式放在了一个文件中包括GET、POST等等,以及配置请求后台统一前缀,代码如下(文件在src/libs/axios)import axios from 'axios';// 统一请求路径前缀,这个是后台接口地址var base...转载 2020-01-08 16:02:36 · 4011 阅读 · 0 评论 -
在element中使用@blur无效
@blur.native="isVal"// 不好使@blur.native.capture="isVal()" // 好使VUE里面使用.capture是啥意思?<!-- 添加事件侦听器时使用 capture 模式 --><div v-on:click.capture="doThis">...</div>大佬的回答:这个涉及到了j...原创 2019-12-18 17:50:22 · 8039 阅读 · 0 评论 -
vue父组件向子组件传值子组件用的是v-mode报的错误
错误解决了图就不截了直接开始正文.首先你要知道Vue组件间传值,默认遵循单向下行绑定原则子组件代码我简写了子组件叫ceshi: <input v-model="backContentData"/> props: { backContentData: { type: String, default: null ...原创 2019-12-18 16:40:19 · 934 阅读 · 1 评论 -
vue-cli(vue脚手架)
都说Vue2简单上手容易,的确,看了官方文档确实觉得上手很快,除了ES6语法和webpack的配置让你感到陌生,重要的是思路的变换,以前用jq随便拿全局变量和修改dom的锤子不能用了,vue只用关心数据本身,不用再频繁繁琐的操作dom,注册事件、监听事件、取消事件。。。。(确实很烦)。vue的官方文档还是不错的,由浅到深,如果不使用构建工具确实用的很爽,但是这在实际项目应用中是不可能的,...转载 2019-02-20 11:29:04 · 130 阅读 · 0 评论 -
vue-cli3.0使用及配置(部分)
1.先全局安装vue-cli3.0 检测安装:vue -V2.创建项目(这个就跟react创建脚手架项目比较像了) 这里如果你是第一次用3.0版本的话,是没有前两个的,而只有最后两个,这里是让你选的,第一个是默认配置,一般选第二个,自己配置,这里选择最后一个当你选择后会出现上面图上的东西,这里你可以自由选择用哪些配置,按上下键选择哪一个,按空格键确定,所有的...转载 2019-02-20 11:34:31 · 166 阅读 · 0 评论 -
vue.js是什么
Vue.js是一个提供MVVM数据双向绑定的库,专注于UI层面,核心思想是:数据驱动、组件系统。数据驱动:Vue.js数据观测原理在技术实现上,利用的是ES5Object.defineProperty和存储器属性: getter和setter(所以只兼容IE9及以上版本),可称为基于依赖收集的观测机制。核心是VM,即ViewModel,保证数据和视图的一致性。watcher:每一个指令...转载 2019-03-15 10:52:58 · 179 阅读 · 0 评论 -
vue动态给data中添加变量
一: 首先你得数据我的业务是动态给v-model赋值 但是你得更改所以做不到一对一这时候你就得动态创建变量首先你得知道你的数据结构是什么样的,然后你根据你数据的结构用数组动态创建变量然后用你创建的空数组一一对应v-model赋值js:for (var i =0;i< _this.particulars.itemList.length;i++) { _t...原创 2019-03-25 14:54:14 · 25068 阅读 · 4 评论 -
vue自定义指令的创建与使用
一、自定义指令的创建和使用Vue自带的指令很多,v-for/v-if/v-else/v-else-if/v-model/v-bind/v-on/v-show/v-html/v-text...但是这些指令都是比较偏向于工具化,有些时候在实现具体的业务逻辑的时候,发现不够用,如何来自定义指令.1、自定义指令①创建new Vue({ directives:{ change...原创 2018-09-29 16:40:38 · 376 阅读 · 0 评论 -
vue组件在一张页面引入多个 传入相同的数据出现的bug
上图:当我点击的时候这两个tree的状态同时变这是我遇到的问题是什么原因导致的,上代码this.treeList= []这个是树的数据this.treeList1 = this.treeList;this.treeList2 = this.treeList;我给他俩同时赋值导致状态一样的问题在来一张图我解决好的:我解决好的,上代码this.treeLis...原创 2019-07-16 13:34:01 · 1798 阅读 · 1 评论 -
vue-cli3.0中大屏使用rem做响应式(引入rem.js)
因为目前有px转换rem的插件但是我不想用感觉费劲首先我们先找一段rem.js引入到vue的index.html中上代码:<script type="text/javascript"> /* * @ pwidth 设计稿的宽度 * @ prem 你要1rem比多少px 我的是1rem比100px * */ ...原创 2019-07-17 10:32:58 · 3622 阅读 · 2 评论 -
彻底搞懂Vue中keep-alive
彻底搞懂Vue中keep-alive的魔法(上)上一节最后稍微提到了Vue内置组件的相关内容,从这一节开始,将会对某个具体的内置组件进行分析。首先是keep-alive,它是我们日常开发中经常使用的组件,我们在不同组件间切换时,经常要求保持组件的状态,以避免重复渲染组件造成的性能损耗,而keep-alive经常和上一节介绍的动态组件结合起来使用。由于内容过多,keep-alive的源码分析将...转载 2019-09-23 17:45:46 · 6730 阅读 · 1 评论 -
Vue3.0 中的数据侦测
在10月05日凌晨Vue3的源代码正式发布了,来自官方的消息:目前的版本是 Pre-Alpha , 仓库地址: Vue-next, 可以通过 Composition API了解更多新版本的信息, 目前版本单元测试相关情况 vue-next-coverage。文章大纲:Vue 的核心之一就是响应式系统,通过侦测数据的变化,来驱动更新视图。实...转载 2019-10-08 17:44:18 · 1408 阅读 · 1 评论 -
详解Vue.js中.native修饰符
.native修饰符官方对.native修饰符的解释为: 有时候,你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。例如:<my-component v-on:click.native="doTheThing"></my-component>简单点理解就是:给普通的HTML标签监听一个事件,之后添加 .n...翻译 2019-02-20 10:51:03 · 2128 阅读 · 0 评论 -
Vue2.0 Vue.set的使用
在开发过程中,我们时常会遇到这样一种情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的。根据官方文档定义:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。受现代 JavaScript 的限制 (以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除。由于 Vu...转载 2019-02-19 16:07:05 · 915 阅读 · 0 评论 -
Vue的修改数据页面不重新渲染
需求:通过一个数组渲染出商品列表,现在我通过价格对数组内的商品进行排序,希望改变数组后重新渲染商品列表。问题:数组改变之后并没有重新渲染。测试流程:(1)页面渲染出乱序的商品列表图片.png376x598 80.2 KB(2)冒泡排序修改数组(3)打印出改变之后的数组(4)页面毫无变化图片.jpg379x598 86.4 KB 数组的数据格式如下...翻译 2019-02-19 16:04:25 · 5707 阅读 · 0 评论 -
vue的安装及element组件的安装
一、新建vue项目1、首先需要下载nodejs,安装后打开命令窗口可以使用npm包管理工具npm集成在node中的,所以直接输入npm-v查看npm的版本信息2、npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像---cnpm。3、在命令行中输入 npm install -g cnpm --registry=http://...转载 2018-10-11 19:53:55 · 608 阅读 · 0 评论 -
VUE中的splice运用
其实说白了 vue中的splice和javaScript中的是一样的 举个例子: 在本例中,我们将创建一个新数组,并向其添加一个元素:<script type="text/javascript">var arr = new Array(6)arr[0] = "George"arr[1] = "John"arr[2] = "Thomas...原创 2018-10-10 20:53:52 · 2451 阅读 · 0 评论 -
Vue模板与常用组件依赖
使用webpack模板vue init webpack my-project本文示例运行于vue-cli(v2.8.1),命令行提示如下:? Project name (my-project) //请输入项目名称,回车默认? Project description (A Vue.js project) //请输入项目描述,回车默认? Author xsl <398818...原创 2018-10-23 20:21:14 · 330 阅读 · 0 评论 -
vue指令大全
我之前学了学angular 发现angular和vue的指令有点类似先说一下new Vue({ el: "#box", // element(元素) 当前作用域 data(){ return { //用return返回对象 msg: "122" ...原创 2018-09-29 16:38:47 · 155 阅读 · 0 评论 -
vue滚动事件监听
最近写了一个VUE的web app项目,需要实现某个部位吸顶的效果。即,页面往上滑动,刚好到达该部位时,该部分,固定在顶部显示。1、监听滚动事件利用VUE写一个在控制台打印当前的scrollTop,首先,在mounted钩子中给window添加一个滚动滚动监听事件,mounted () { window.addEventListener('scroll', this.hand...原创 2018-11-14 16:44:34 · 1564 阅读 · 0 评论 -
VUE八大生命周期
vue.js生命周期的八大状态:1. beforeCreate(创建前)2. created(创建后)3. beforeMount(载入前)4. mounted(载入后)5. beforeUpdate(更新前)6. updated(更新后)7. beforeDestroy(销毁前)8. destroyed(销毁后) ...原创 2018-11-14 16:47:28 · 6273 阅读 · 0 评论 -
vue中nextTick的作用
一、示例先来一个示例了解下关于Vue中的DOM更新以及nextTick的作用。模板<div class="app"> <div ref="msgDiv">{{msg}}</div> <div v-if="msg1">Message got outside $nextTick: {{msg1}}</div转载 2018-11-21 19:34:12 · 659 阅读 · 0 评论 -
vue2.0 实现导航守卫(路由守卫)
vue2.0 实现导航守卫(路由守卫)路由跳转前做一些验证,比如登录验证,是网站中的普遍需求。对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards)。导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧。贴上文档地址:https://router....转载 2018-11-21 19:35:52 · 152 阅读 · 1 评论 -
vue父子组件传值
父组件<template> <div> <h1>我是父组件</h1> <hello :msg="add" v-on:xixi="wu"></hello> </div></template>原创 2018-11-22 16:28:20 · 106 阅读 · 0 评论 -
axios封装
单页面应用大多采用前后端分离开发思路,我们知道,前端和后端交互有多中方式(服务器端渲染、Ajax、websocket等),今天我们主要讲解Ajax部分。最近团队讨论了一下,Ajax 本身跟 Vue 并没有什么需要特别整合的地方,使用 fetch polyfill 或是 axios、superagent 等等都可以起到同等的效果,vue-resource 提供的价值和其维护成本相比并不划算,所...转载 2018-11-22 20:54:41 · 987 阅读 · 0 评论 -
vue中class渲染颜色 多种只取一种
有的时候需要多种状态但是颜色不一样这时候很苦恼,在百度上查到的都是模棱两可,所以我吧我的总结的一种方法献给大家:<template> <div class="hello"> <button @click="addFn">提交</button> <h1>{{msg}}</h1>原创 2019-01-10 17:01:14 · 1230 阅读 · 1 评论 -
0基础菜鸟学前端vue.js
简介:0基础前端菜鸟,啃了将近半月前端VUE框架,对前端知识有了初步的了解。下面总结一下这段时间的学习心得。 文章结构前端基础 Vue.js简介 Vue.js常用指令 Vue.js组件 Vue.js之vue-router插件 Vue.js实战一、前端基础 前端发展历史和趋势什么是前端?前端:针对浏览器的开发,代码在浏览器运行。后端:针对服务器的开发,代码在...转载 2019-02-21 15:03:19 · 639 阅读 · 0 评论 -
Vue Router路由懒加载
官方写的很明白!!!!!!!!!路由懒加载当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载。首先,可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 ...原创 2019-02-28 17:21:51 · 145 阅读 · 0 评论 -
Vue.js 2.0 最佳实践 & 踩坑记录
代码规范关于代码规范,我的理解是不一定非要用什么特别严苛的标准或是特别权威的规范,只要项目团队遵循一套统一的约定就可以。当然,参考他人的经验沉淀从而制定自己的代码规范还是很有必要的。1. 对齐静态属性 (static binding) 在前, 动态属性 (dynamic binding) 在后 属性绑定 (:属性)在前, 事件绑定 (@事件) 在后 如果有使用指令,则指令语句写在最...转载 2019-02-19 15:40:24 · 424 阅读 · 0 评论 -
Vue中一些需要注意的点
1.给link添加事件、给组件绑定原生事件在vue-router1中使用v-link写入路由,但是在vue-router2中要使用router-link写入路由,在浏览器渲染的时候会把router-link渲染成a。有时候需要为router-link注册事件,对于一般的html元素,直接使用@click="eventFun"即可,但是对于router-link,像普通html元素那样注册事...转载 2019-02-19 15:52:28 · 267 阅读 · 0 评论 -
VUE 模板创建以及 常用依赖安装
使用webpack模板vue init webpack my-project本文示例运行于vue-cli(v2.8.1),命令行提示如下:? Project name (my-project) //请输入项目名称,回车默认? Project description (A Vue.js project) //请输入项目描述,回车默认? Author xsl <3988188...原创 2018-10-11 15:58:58 · 346 阅读 · 0 评论