单枪匹码

开发过程中，点击弹出遮挡层是很常见的需求，但是很多时候弹出遮挡层以后底层的部分还是可以滑动，解决办法：下面是我之前总结的文章也是可以解决的：1、Vue.js 手写的一个方法解决问题：https://blog.csdn.net/weixin_44296929/article/details/1035590692、使用@touchmove.prevent解决问题：https://blog.csdn.net/weixin_44296929/article/details/1066139633、后来发现自己

Vue.js中如果父组件想访问子组件的data或method则可以在子组件声明ref属性，父组件通过$refs来访问，那么子组件如果想访问父组件的事件我们该如何处理呢？Vue.js中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定。参考1、每个Vue实例都实现了事件接口，即：使用$on(eventName)监听事件使用$emit(eventName)触发事件父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件。 2、父组件HTML内

1、官方介绍：ref 用于访问子组件实例或子元素尽管存在prop和事件，有的时候你仍可能需要在 JavaScript 里直接访问一个子组件，为了达到这个目的， 你可以通过ref这个 attribute 为子组件副语言一个ID引用，例如：<base-input ref="usernameInput"></base-input>现在在你已经定义了这个ref的组件里，你可以使用：this.$refs.usernameInput来访问这个<base-input>实例

1、在项目中用到了一些插件，比如这次用到的下拉菜单插件。原文链接这个插件需要实例化，而下拉框的数据是通过ajax来获取的，然后使用v-for渲染数据，再一次遇到了问题。就是等插件实例化完毕，数据却还没渲染完毕，所以这就出现一个bug。2、第一种解决方法：setTimeout【不使用】setTimeout(function() { //实例初始化},100)使用这种方法有一个缺点，就是不确定数据什么时候渲染完毕。第一种情况：假设10毫秒渲染完毕，但是setTimeout需要等100毫秒，浪费

Vue.js获取下面div的height：<div ref="element"></div> 1、获取高度值：（内容高+padding+边框）let height= this.$refs.element.offsetHeight; //1002、获取元素样式值：（存在单位）let height = window.getComputedStyle(this.$refs.element).height; // 100px3、获取元素内联样式值：（非内联样式无法获取）

在很多Vue项目中，我们使用Vue.component来定义全局组件，紧接着new Vue({ el: '#containder'})在每个页面内指定一个容器元素。1、这种方式在很多小规模的项目中运作的很好，在这些项目里JavaScript只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由完全由JavaScript驱动的时候，下面这些缺点将变得非常明显：全局定义（Global definitions）强制要求每个component中的命名不得重复。字符串模板（String templa

组件注册过程中需要注意的问题：1、首先我们知道组件的第一个参数是组件名称，而我们定义组件名称的时候最好按照W3c规范中的自定义组件名，定义的方式有两种，短横线分隔命名kebab-case 和 驼峰命名PascalCase。2、我们通过Vue.component函数来创建的组件都是通过全局注册的，也就是说它们在注册之后可以在任何新创建的Vue根实例的模板中进行应用。3、Vue.js还为我们提供了局部注册机制，因为全局注册往往是不够理想的，比如我们使用 webpack 这样的构建系统，全局注册所有的组件意

在开发过程中，我们可以把重复的功能封装为组件，达到快捷，便捷开发的目的。1、组件是可复用的Vue实例，且带有一个名字，在下面的例子中是<button-counter>。我们可以在一个通过new Vue创建的Vue根实例中，把这个组件作为自定义元素来使用。组件的第一个参数是组件名称，第二个参数是以对象的形式描述一个组件。<button-counter></button-counter>//定义一个名为button-counter的新组件Vue.component

1、Vue.js中可以使用v-model指令在表单<input>、<textarea>及<select>元素上创建双向绑定，它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖，它负责监听用户的输入事件以及更新数据，并对一些极端场景进行一些特殊处理。注意：v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选

v-model是用来将input或textarea与Vue实例的data数据进行双向绑定实现数据同步的效果，而我们在其基础上可以添加修饰符，来满足更多的使用场景。v-model的修饰符有：.lazy：懒加载修饰符.number：将内容转换为number类型.trim：过滤首尾空格各个修饰符的使用：转载文章1、.lazyv-model指令默认会在input事件中加载输入框中的数据（中文输入法中输入拼音的过程除外）。我们可以使用.lazy懒加载修饰符，让其只在change事件中再加载输入框中的

1、可以用v-on指令监听DOM事件，并在触发时运行一些JavaScript代码。<div id="app"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been click {{counter}} times.</p><div>var vm = new Vue({ el: "#app", data:{ count

1、Vue.js中修饰符使用：在指令后缀通过点( . )来调用修饰符。<a v-on:click.stop="doThis"></a>举个例子：一个嵌套div，分别添加click事件。<div id="aa" @click="doaa"> <div id="bb" @click="dobb"></div></div>点击以后会相继执行dobb和doaa方法，此时我们可以通过加修饰符的方式来阻止冒泡事件。<div

v-bind 语法：<div v-bind:class="color"></div>1、我们为div动态绑定了一个class属性，为其添加动态样式2、其中color是一个变量，我们可以在data中声明引用，也可以在使用v-for时引用循环出的元素属性或index下标，也可以直接使用css名称div-color都可以。.div-color{ color: red;}new Vue({ el: "", data:{ color: "div-color" }}

使用[]来进行拼接：<template v-for="(index,site) in sites"> <div v-bind="['index_' + index]"><div></template>说明：其实在v-bind的""中直接传入的值是变量，如果我们想拼接先使用[]，然后进行拼接，字符串用''包住，用+连接我们的变量即可。...

1、我们可以传给v-bind:class一个对象，以动态地切换class：<div v-bind:class="{ active: isActive }" ></div>上面的语法表示active这个class存在与否将取决于数据属性isActive的 truthiness。你可以在对象中传入更多属性来动态切换多个class，此外，v-bind:class指令也可以与普通的class属性共存，当有如下模板：<div class="static" v-bind:cl

1、对象语法：v-bind:style 的对象语法十分直观，看着非常像css，但其实是一个JavaScript对象，CSS属性名可以用驼峰式（cameCase）或短横线分隔（kebab-case，记得用引号括起来）来命名：<div :style="{color: color , fontsize: size}">hi Vue</div>var vm = new Vue({ el: "", data:{ color: "#FF0000", size: "50p

v-for指令：我们可以用v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名。<ul id="app"> <li v-for="item in items">{{item}}</li></ul>var vm = new Vue({ el: "", data:{ items:[ { message: "FOO" }

1、v-if 指令：用于条件性地渲染一块内容。这块内容只会在指令的表达式返回truthy值的时候被渲染。<h1 v-if="awesone">Vue is awesome!<h1>1、在<template>元素上使用v-if条件渲染分组：因为v-if是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个<template>元素当做不可见的包裹元素，并在上面使用v-if。最终的渲染结果将不包含<template>元

在Vue.js中 使用双大括号{{ }}会将数据解释为普通文本，而非HTML代码，为了输出真正的HTML，你需要使用 v-html 指令。1、不使用v-html指令：<div id="app"> <p>{{msg}}</p></div>var vm = new Vue({ el: "", data: { msg: "<span style='color:red'>我是span标签</span>" }});结果

Vue.js中实现双向绑定的过程中，通过使用v-once指令，可以实现一次性的插值，当数据改变时，插值处的内容不会更新。<span v-once>这个值将不会改变：{{msg}}</span>说明：数据在第一次插值后，后续修改过程中数据将不会再更新。但是要注意的是，该指令添加的节点是否还有其他的数据，这会影响到其它数据的绑定。...

前几天使用Vue.js的时候，偶然的看到v-cloak，于是查了一下，v-cloak非常简单实用的一个指令，记录一下方便自己回头看。1、可以使用v-cloak指令设置样式，这些样式会在Vue实例编译结束时，从绑定的HTML元素上被移除。当网络较慢时，网页还在加载Vue.js，而导致Vue来不及渲染，这时页面就会显示出Vue源代码。我们可以使用v-cloak指令来解决这一问题。参考文章HTML：<div id="app"> {{context}}</div>JS：

1、解决办法：将遮挡层div设置成fixed即可。.mask{ position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,0.50); z-index: 1;}2、解决办法：直接在遮罩层所在的div上添加" @touchmove.prevent " 即可<div @touchmove.prevent>这是遮罩层的div</div>PC端

Vue.js中的data：类型：Object | Function限制：组件的定义只接受 function那么为什么组件中定义的data只接受function呢？下面我们通过几个例子来说明一下：<body> <div id="app"> <counter></counter> </div> ...

本文从Vue.js的官方文档来逐行分析看看Vue.js的数据对象——data官方文档地址文档之一：类型：Object | Function限制：组件的定义只接受 function分析一：首先，data的类型可以是Objectnew Vue({ el:"#app", data:{ newTodoText : "", visitCount: 0, hideComple...

在Vue.js中对JavaScript表达式是完全支持的：比如基本的数学运算，比较运算，三元运算符，函数运算都是支持的。<div>{{ num + 1 }}</div><div>{{ num == 1 ? 1 : 0 }}</div><div>{{ msg.split('').reverse().join('') }}</div>这些表达式会在所属Vue实例的数据作用域下被JavaScript被解析，每个限制就是，每个绑定都

原生js在标签中使用onclick事件时传递当前元素的对象使用的是this。//this指向当前元素在onclick = "fn(this)"而在Vue中这使用$event来传递当前元素对象作为参数，并在methods的方法中通过event.currentTarget来使用当前元素并进行相关操作。//Vue中使用方法v-on:click="fn($event)" methods: ...

Vue如何根据返回的值对元素进行样式渲染：1、我们通常情况下如果想根据后台获取到的值动态的对元素进行渲染，我们通常使用v-for循环，然后使用v-if进行判断，根据判断的结果再根据:class进行不同的样式绑定，从而实现动态的渲染HTML元素，或是直接使用:class和三元表达式结合使用来进行判断实现动态样式的渲染，上面的方法针对少量的html元素还是非常方便的，但是一旦数据量特别的多，就需要我...

记录一下，这个问题：

1、这是它的一个生命周期钩子函数，就是一个Vue实例被生成后调用这个函数，一个Vue实例被生成后还要绑定到某个htm元素上，之后还要进行编译，然后再插入到document中。每一个阶段都会有一个钩子函数，方便开发者在不同的阶段处理不同的逻辑。实例生命周期： 原文链接每个Vue实例在被创建之前都要经过一系列的初始化过程，例如，实例需要配置数据观测（data、observer）、编译模板、挂载实例...

生命周期先上图什么是生命周期Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载DOM、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的声明周期。通俗的说就是Vue实例从创建到销毁的过程，就是生命周期。在Vue的整个生命周期中，它提供了一系列的事件，我们可以在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this...

v-for中的key：使用v-for更新已渲染的元素列表时，默认用就地复用策略，列表数据修改的时候，会根据key值去判断某个值是否修改，如果修改，则重新渲染这一项，否则复用之前的元素；我们在使用的时候经常会使用index（即数组的下标）作为key，但其实这是不推荐的一种使用方法：举个????const list = [ { id: 1, name: 'tes...

问题描述：今天在做个人博客的时候遇到一个问题，一个文章详情页面使用了评论显示组件和发表评论组件，但是当评论发表完成后评论显示组件的数据不会自动渲染出来，那么如何让最新的数据渲染呢问题分析：可以看出这两个组件是兄弟组件，在评论显示组件中，是通过mounted声明周期函数获取数据的，也就是el挂载到实际上时获取的，但是当发表评论数据库内容发生变化后，并不能主动去获取数据的更新问题解决：...

一、要想使用Vue.js实现v-if和v-else来切换CSS样式，有两种实现方式：比如我们想给一个div设置两个不同的背景颜色（当status为1的时候，我们设置背景为红色，当status状态为2的时候我们设置背景为蓝色）：.back-red{ /* 红色背景 */ width: 100px; height: 100px; background-color: red;}.back...

1、需求：之前遇到一个需求，就是一个话费兑换页面，其中有很多话费兑换的选项（10元话费、20元话费等等），点击其中一项后（例如我们点击了10元话费），会令10元话费这个选项框样式改变成其他颜色，并弹出兑换窗口用来输入验证码进行兑换（当然这个弹出窗会动态的提示你要兑换的是多少元的话费），该窗口可以点击取消，取消以后，再点击其他的兑换项（比如我们又点击了20元话费的兑换项）那么该兑换框会修改样式并将之...

1、在Vue.js 中让数组追加合并通常使用的concat()方法，让对象属性追加合并而是使用Object.assign()。一、Vue.js实现数组追加合并与对象追加合并：1、数组的追加合并：（假设data中有一个数组itemList{}，我们要在数组中追加数据）var vm = new Vue(){ el:"", data(){ sites:[] }, created() {...

一、Object.assign()的用法：1、Object.assign()方法的第一个参数是目标对象，后面的参数都是源对象，Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。var obj = {};var o1 = { a: 1 };var o2 = { b: 2 };var obj = Object.assign(obj...

前阶段做页面用到了这一块，其实网上有很多现成的组件可以使用，我这个是自己手写的，就此记录一下，我这里只提供该部分实现，因为每个人的需求不同，仅供参考：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script s...

1、刚写了一篇有关地址管理页面的总结，其中有如何判断多个radio中哪一个radio被checked和实现点击radio以后选中或取消，有兴趣的可以看下：判断多个radio中哪个被checked，网上有很多Vue.js使用v-for和v-if在多个select中判断哪一个option被选中的例子，但是不是特别的详细，其实select和radio原理上实现方式是大体是相同的，趁着手热，下面就来继续做...

前阶段开发过程中，遇到这样一个需求，就是输入框无内容时按钮置灰，一旦输入了内容按钮变色，记录使用Vue.js实现过程。1、思路：在 input 中使用 v-model 和 data中定义好的变量实现双向绑定，通过 data 中的值来监听input中的值，接下来使用$watch来监听data中的值，这样一旦input中的值改变，data中的值就会改变，这时我们就可以通过 $watch 来进行data改变后的响应操作。实现代码：写个大概，主要看思路<input v-model="login_phon

前阶段页面涉及到了一些数据的隐藏和显示，数据的新增删除等一些基本的操作，数据的隐藏和显示可以用fadeOut、fadeIn、slideDown、slideUp等动画方法来实现，而数据删除和新增的动画，可以使用transtion和transition-group来实现，之前没怎么用过这两个属性，特此来记录一下使用过程以及遇到的一些小的问题。1、首先我们先做一些准备工作，先实现一个div的隐藏和显示：HTML：我们使用template标签将要显示和隐藏的元素包裹起来，然后使用v-if进行判断temp值为tr