文档章节

vue 2.0后的使用(一)

Chason-洪
 Chason-洪
发布于 2017/04/25 14:04
字数 564
阅读 62
收藏 0

父组件和子组件之间的通信

  • 子组件触发父组件中定义的函数:
    • 通过父组件向子组件传递参数函数的方式:<v-header :tongxin="data"></v-header>
    • 子组件直接触发父组件函数:this.$parent.xxx();
    • 通过this.$emit触发自定义事件:$emit或者$on
  • 父组件触发子组件函数:通过ref

 

自定义事件(子页面触发父页面自定义事件)

     方法①   

父组件

//父页面自定义了一个方法名为methodname的method事件   
<xxx v-on:method="methodname"></xxx>  //可简写 <xxx @method="methodname"></xxx> 

...
methods:{                                                                                                                   
  methodname:function(parameter){                                                                          
     console.log(parameter)                                                                           
   }
 }  

...


子组件
this.$emit("method","paramter"); //第一个参数为事件名,第二个为参数,可选

方法②

           

DOM更新循环结束之后执行延迟的回调。

应用场景:当需要在dom挂载结束后需要执行一些函数的时候。比如获取数据后,better-scroll需要重新计算dom高度的时候就需要在这个方法中执行。

注意:mounted生命周期函数并不能检测异步dom的更新结束,仅仅是首次编译后的html挂载到页面后的回调函数。而this.$nextTick是下次 DOM更新循环结束之后执行延迟回调。

this.$nextTick(() => {
    console.log("DOM更新了")
})

设置且响应对象的属性

比如你数据绑定的是一个对象中的属性,如果你要改变这个对象中的状态,你不能使用平常的操作对象的方法,否则没反应。你要用Vue.set方法才能让这个对象响应。

    例如       

<div class="cart-count" v-show="food.count>0">{{food.count}}</div>
data:{
    food:{
        count:0
    }
},

        无效

     so:     

    

      eg:

                  

                  

过滤(示例)

this.ratings

eport default{
    computed:{
        positives(){
            //this.ratings是一个数组
            return this.ratings.filter((key) => {
                    //key.rateType是数组中每个对象的rateType的                              
                    return key.rateType===0;
          })
        }
    },

watch监听器和深度监听

    

事件中获取DOM元素

//点击获取DOM元素
<div @click=“itemClick($event)"></div>
//然后在点击事件中:e.currentTarget获取DOM元素 

 

© 著作权归作者所有

共有 人打赏支持
上一篇: 移动端1px的问题
下一篇: vue-cli的构建
Chason-洪
粉丝 12
博文 79
码字总数 65968
作品 0
漳州
程序员
私信 提问
Vue.js 2.0源码解析之前端渲染篇

在这篇文章中: 一、前言 二、Vue的初始化 三、Vue的渲染逻辑——Render函数 四、Vue的渲染逻辑——VNode对象&patch方法 五、Vue的渲染小结 一、前言 Vue.js框架是目前比较火的MVVM框架之一,...

王鹤
2017/06/19
0
0
Vue 2.0 preview 首发,更轻更快的Virtual-DOM来袭!

Vue 2.0 preview 版本首发 Vue 始终聚焦在轻量和快速上面,而 2.0 把它做得更好。 Vue 2.0 渲染层基于一个轻量级的 Virtual-DOM 实现,在大多数场景下初试化渲染速度和内存消耗都提升了 2~4 ...

0Scn
2016/04/28
4.3K
14
Vue.js 2.0 版发布,框架被重写

Vue.js的团队最近发布了v2.0版本,该版本被描述为是对框架的一次“完全改写”。 Vue创建者Evan You称Vue由“一个核心视图层、伴随工具以及支持库”所构成,这次发布的2.0版本更快速更精简。 ...

oschina
2016/05/10
9.9K
27
Element UI框架+Vue开发搭建示例

一、关于Element 1.Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,官方网址:http://element-cn.eleme.io/#/zh-CN 2.Element UI 是饿了么前端团队倾情打造htt...

tianma3798
09/26
0
0
排名前10的vue前端UI框架框架值得你掌握

之前得到消息vue在GitHub已经超过react,成为第一大框架,让我们来看看以vue为基础的开发框架有哪些? Element(start-28128) 饿了么前端推出的基于 Vue.js 2.0 的后台组件库,它能够帮助你更轻...

Mr_zebra
07/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

sed插入和附加文本基础使用

对于编辑器来说,在数据中增加行算是很基本的操作吧,sed有以下两个操作: 插入(insert)命令(i)会在指定行前增加一个新行 附加(append)命令(a)会在指定行后增加一个新行 还是用下面的文本来测...

woshixin
18分钟前
0
0
HIVE数据倾斜总结

在做Shuffle阶段的优化过程中,遇到了数据倾斜的问题,造成了对一些情况下优化效果不明显。主要是因为在Job完成后的所得到的Counters是整个Job的总和,优化是基于这些Counters得出的平均值,...

瑞查德-Jack
29分钟前
0
0
Pure-ftpd搭建FTP

12月11日任务 15.4 xshell使用xftp传输文件 15.5 使用pure-ftpd搭建ftp服务 使用pure-ftpd搭建FTP服务 轻量的ftp软件 安装pure-ftpd并修改配置文件 # pure-ftpd为epel扩展库里的软件[root...

robertt15
38分钟前
4
0
开源 serverless 产品原理剖析(二) - Fission

背景 本文是开源 serverless 产品原理剖析系列文章的第二篇,关于 serverless 背景知识的介绍可参考文章开源 serverless 产品原理剖析(一) - Kubeless,这里不再赘述。 Fission 简介 Fiss...

阿里云官方博客
44分钟前
2
0
Android面试整理(附答案)

面试,无非都是问上面这些问题(挺多的 - -!),聘请中高级的安卓开发会往深的去问,并且会问一延伸二。以下我先提出几点重点,是面试官基本必问的问题,请一定要去了解! 基础知识 – 四大组...

终端研发部
49分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部