![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
HansExploration
这个作者很懒,什么都没留下…
展开
-
Vue2.0中v-for迭代语法变化(value、key、index)
在Vue2.0中,v-for迭代语法已经发生了变化:丢弃了:新数组语法 value in arr (value, index) in arr新对象语法 value in obj(value, key) in obj (value, key, index) in obj转载 2018-04-10 10:19:44 · 10478 阅读 · 2 评论 -
vue数据绑定数组,改变元素时不更新view问题
转自:https://blog.csdn.net/wxl1555/article/details/79616752 前言关于这个问题,官网上说的很清楚官方文档 写个例子HTML<body> <div class="box"> <div v-for="aa in aas">{{aa}}</div> ...转载 2018-07-19 18:45:20 · 1605 阅读 · 0 评论 -
Vue中的Render函数
节点、树以及虚拟 DOM在深入渲染函数之前,了解一些浏览器的工作原理是很重要的。以下面这段 HTML 为例: <div> <h1>My title</h1> Some text content <!-- TODO: 添加标签行 --></div> 当浏览器读到这些代码时,它会建立一个“DOM 节...转载 2018-10-11 11:49:24 · 884 阅读 · 0 评论 -
如何对vue中的组件进行点击事件监听
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css"></head><body> <div id="app"> <component :is="name"转载 2018-09-28 11:10:03 · 8870 阅读 · 0 评论 -
vue中引入jquery
1、在项目中安装jquery。npm install jquery --save-dev2、在项目根目录下的build/webpack.base.conf.js文件中:① 先写以下代码var webpack = require("webpack")②在module.exports的最后写 plugins: [ new webpack.optimize....转载 2018-10-24 17:37:29 · 192 阅读 · 0 评论 -
vue-router 实现组件的缓存之 keep-alive
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_30114149/article/details/78415030一、keep-alive简介 keep-alive是Vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。 用法:<keep-alive> <component> &...转载 2018-11-22 10:20:41 · 345 阅读 · 0 评论 -
vue $emit子组件传出多个参数,如何在父组件中在接收所有参数的同时添加自定义参数
前言很多时候用$emit携带参数传出事件,并且又需要在父组件中使用自定义参数时,这时我们就无法接受到子组件传出的参数了。找到了两种方法可以同时添加自定义参数的方法。方法一子组件传出单个参数时:// 子组件this.$emit('test',this.param)// 父组件@test='test($event,userDefined)'方法二子组件传出多个参数时...转载 2018-12-26 17:18:08 · 2724 阅读 · 0 评论 -
Vue keep-alive实践总结
转自:https://www.cnblogs.com/sysuhanyf/p/7454530.html <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition> 相似,<keep-aliv...转载 2018-12-11 18:05:20 · 177 阅读 · 0 评论 -
Vue基于“依赖收集”的响应式原理
转载自知乎用户:前端荣耀 - 李斌https://zhuanlan.zhihu.com/p/29318017每当问到VueJS响应式原理,大家可能都会脱口而出“Vue通过Object.defineProperty方法把data对象的全部属性转化成getter/setter,当属性被访问或修改时通知变化”。然而,其内部深层的响应式原理可能很多人都没有完全理解,网络上关于其响应式原理的...转载 2019-01-27 11:18:59 · 361 阅读 · 0 评论 -
为什么要使用Vue.$set(target,key,value)
转自: https://www.cnblogs.com/surui/p/9038543.htmlvue中不能检测到数组和对象的两种变化:1.数组长度的变化 vm.arr.length = 42,数组通过索引值修改内容 vm.arr[1] = 'aa'Vue.$set(target,key,value)可以动态的给数组、对象添加修改数据,并更新视 图中数据的显示。vue在构造函数n...转载 2018-07-19 18:32:34 · 807 阅读 · 0 评论 -
vue双向绑定的实现原理
let obj = {}let get = ''Object.defineProperty(obj, 'get', { set: function(val) { document.getElementById('input').value = val document.getElementById('text').innerHTML = val }})document.get...原创 2018-07-12 18:12:22 · 205 阅读 · 0 评论 -
vue---vue中如何操作dom获取节点?.vue组件中通过mounted获取节点操作
选择器获取<template> <div> <canvas id='cvs' > </div></template><script> export default{ mounted(){ let canvas=document.querySel...转载 2018-05-03 17:21:50 · 2317 阅读 · 0 评论 -
vue-router 基本使用
路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容。Home按钮 => home 内容, about按钮 => about 内容,也可以说是一种映射. 所以在页面上有两个部分,一个是点击部分,一个是点击之后,显示内容的部分。 点击之后,怎么做到正确的对应,比如,我点击home...转载 2018-05-17 16:58:50 · 209 阅读 · 0 评论 -
详解vue2父组件传递props异步数据到子组件的问题
案例一父组件parent.vue?12345678910111213141516171819202122232425262728// asyncData为异步获取的数据,想传递给子组件使用<template> <div> 父组件 <child :child-data="asyncData"></child> </div></te..转载 2018-05-25 17:26:56 · 2811 阅读 · 1 评论 -
Vue中的{{}}与v-html
最近遇到这样一个问题,在页面上要显示一段自定义的文本,文本如果较长的话需要换行显示。在HTML中可以通过<br/>标签换行,也可以通过\n转义字符换行在Vue中用大括号显示的变量,加<br/>会直接被当成字符串显示出来,加\n显示一个空格,加\r\n显示两个空格,因为{{}}是文本插值,内部都会按照普通字符串进行处理,可以用v-html进行显示如下显示name变量[java...转载 2018-05-28 13:25:56 · 9037 阅读 · 0 评论 -
v-bind style绑定
对象语法v-bind:style 的对象语法十分直观——看着非常像 CSS ,其实它是一个 JavaScript 对象。 CSS 属性名可以用驼峰式(camelCase)或短横分隔命名(kebab-case):[html] view plain copy<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"&...转载 2018-05-28 16:07:08 · 626 阅读 · 0 评论 -
vue 监听$route的方式
$route 作为vue实例的一个响应式属性,是和你在data中写的属性本质上是一样的,都可以通过this的方式拿到。既然你可以监听data中的属性变化,同样也可以监听 $route 的变化。watch中监听的对象默认回调函数中的参数值就是newVal,oldVal。作为 $route 属性来说当然也就是 to 和 from 的概念了。...转载 2018-05-28 16:10:21 · 1461 阅读 · 0 评论 -
vue中的transition生命周期钩子
默认class名字为 v-leave, v-enter ...改名需在transition标签上添加name属性原创 2018-06-12 12:23:47 · 1567 阅读 · 0 评论 -
vue的transition demo(配合create-keyframe-animation使用)
<template><div> <div class="click" @click="onClick">click</div> <transition @enter="onEnter" @after-enter="onAfter" @leave="onLeave" @after-l原创 2018-06-20 15:30:00 · 760 阅读 · 0 评论 -
简单实现vue中的依赖收集与响应
开始声明一个对象man,可以视为vue中的datalet man = { height: 180, weight: 70, wealth: 100000000}添加Observer作用在于将参数对象的属性变为响应式,只要对象的属性被读取或者被修改都能观察到。然后新建一个Observer实例,将man作为参数扔进去。这里的proxyData是将man的属性代理到以m...原创 2019-02-02 15:58:16 · 376 阅读 · 0 评论