Vue.js - 随笔分类 - ranyonsue

vue子组件数据跟着父组件改变

摘要：父组件的代码 <template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png">  父组件的值<input t 阅读全文

posted @ 2019-11-27 10:59 ranyonsue 阅读(2157) 评论(0) 推荐(0) 编辑

vue子组件调用父组件的方法

摘要：第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法父组件 <template> <div> <child></child> </div> </template> <script> import child from '~/components/dam/child' 阅读全文

posted @ 2019-10-28 17:01 ranyonsue 阅读(5629) 评论(0) 推荐(0) 编辑

vue子组件如何向父组件传值

摘要：子组件： <template> <div class="app"> <input @click="sendMsg" type="button" value="给父组件传递值"> </div> </template> <script> export default { data () { return 阅读全文

posted @ 2019-10-18 10:18 ranyonsue 阅读(8593) 评论(0) 推荐(0) 编辑

vue本地静态图片的路径问题解决方案

摘要：不少人在vue的开发中遇到这样一个问题： img的src属性绑定url变量，然而图片加载失败。大部分的情况中，是开发者使用了错误的写法，例如： <img src="{{ imgUrl }}"/> 这样写肯定是不对的，正确的写法应该使用v-bind: <img v-bind:src="imgUrl" 阅读全文

posted @ 2019-09-29 16:54 ranyonsue 阅读(41014) 评论(3) 推荐(4) 编辑

tab切换echarts无法正常显示问题

摘要：项目中使用到了Echarts来在展示图表，两个tab切换页面中都存在图表，页面加载完成后对所有图表进行了初始化和绘制，然后切换查看时，发现图表的宽度不正确.，第一个tab显示是很正常的，但是第二个tab中内容显示不完整。原因：在页面进行加载时，隐藏的图表找不到对应的div大小，所以默认给了一个大阅读全文

posted @ 2019-08-02 17:06 ranyonsue 阅读(4921) 评论(0) 推荐(0) 编辑

vue.js动态绑定input的checked

摘要：不管<input type='radio checked='true''> 你的checked属性值是true或者false，他都会选中。其实原理是这样的，复选框里只要有checked属性，不管是否为其赋值，结果为空或true或false或任意值，均为选中状态。选中不选中，不是看checked的阅读全文

posted @ 2019-07-30 17:08 ranyonsue 阅读(10960) 评论(0) 推荐(1) 编辑

全局组件父子传参（父传子）

摘要：点击父组件里面的按钮可以控制子组件内的视图显示与隐藏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父组件控制子组件</title> <style> .show{ width:100px; height: 阅读全文

posted @ 2019-03-21 10:52 ranyonsue 阅读(1348) 评论(0) 推荐(0) 编辑

Vue组件之全局组件与局部组件

摘要：1全局注册实例 <div id="app"> <com-btn></com-btn> <com-btn></com-btn> </div> <script> Vue.component('com-btn',{ data:function(){ return{ num:0, } }, template 阅读全文

posted @ 2019-03-05 17:39 ranyonsue 阅读(3559) 评论(1) 推荐(1) 编辑

vue获取当前元素

摘要：Html： <li><a href="#" v-on:click="typeStyle">萨克斯萨克<span></span></a></li> Js： typeStyle: function (e) { var el = e.target; el.style.backgroundColor = ' 阅读全文

posted @ 2018-10-24 17:14 ranyonsue 阅读(3065) 评论(2) 推荐(0) 编辑

vue 数据绑定实现的核心 Object.defineProperty()

摘要：vue深入响应式原理现在是时候深入一下了！Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解其工作原理同样重要，这样你可以回避一些常见的问题。在这个章节，我们将进入一些 Vue 阅读全文

posted @ 2018-09-28 11:31 ranyonsue 阅读(6464) 评论(1) 推荐(1) 编辑

vue methods 中方法的相互调用

摘要：vue在同一个组件内；方法之间经常需要互相调用。 methods中的一个方法如何调用methods中的另外一个方法呢？可以在调用的时候使用 this.$options.methods.test2(); new Vue({ el: '#app', data: { test:111, }, metho 阅读全文

posted @ 2018-09-20 16:41 ranyonsue 阅读(26575) 评论(0) 推荐(0) 编辑

vue数据绑定数组，改变元素时不更新view问题

摘要：关于这个问题，官网上说的很清楚官方文档写个例子HTML<body> <div class="box"> <div v-for="aa in aas">{{aa}}</div> <button @click="change">变数据 </button> </div></body> jsvar vm 阅读全文

posted @ 2018-09-18 18:03 ranyonsue 阅读(7254) 评论(0) 推荐(0) 编辑

vue的生命周期

摘要：钩子就好像是把人的出生到死亡分成一个个阶段，你肯定是在出生阶段起名字，而不会在成年或者死亡的阶段去起名字。或者说你想在出生阶段去约炮，也是不行的。组件也是一样，每个阶段它的内部构造是不一样的。所以一般特定的钩子做特定的事，比如ajax获取数据就可以在mounted阶段。一、 vue生命周期简介、阅读全文

posted @ 2018-04-12 13:25 ranyonsue 阅读(418) 评论(1) 推荐(0) 编辑

Vue中的v-cloak用法

摘要：v-cloak 的作用和用法用法：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。 <div id="app"> {{msg}} </div> HTM 阅读全文

posted @ 2018-04-02 15:33 ranyonsue 阅读(1220) 评论(0) 推荐(0) 编辑

vue快速入门

摘要：Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作D 阅读全文

posted @ 2018-03-09 16:00 ranyonsue 阅读(662) 评论(0) 推荐(0) 编辑

Vue中method与computed的区别

摘要：为了说明method与computed的区别，在此我想先来看看computed属性在vue官网中的说法：模板内的表达式是非常便利的，但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护。我们来看一个例子： <!DOCTYPE html> <html lang="en"> < 阅读全文

posted @ 2018-03-05 17:43 ranyonsue 阅读(816) 评论(0) 推荐(0) 编辑

ranyonsue

随笔分类 - Vue.js