文档章节

vue 2.0后的使用(一)

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

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

    ①导入其他vue文件的html内容:先import  XXX  from  " xx.vue".           

import header from "./components/header/header.vue";

    ②在export default 中components:{XXX};//注册组件                

components:{
  "v-header": header
},

     ③ 再在html中使用<xxx><xxx>       

<v-header></v-header>

     ④这样的标签即可导入外部vue文件html。

     ⑤ 通信的话父页面<xxxx  :tongxin="data"></xxxx>

           //注意冒号,相当于v-bind:tonxin="data";        

<v-header :tongxin="data"></v-header>

     ⑥子页面在export default中props:['tongxin']//选择子页面监听.props与data,methods同级别。

                

                 default//默认值

                   

              ⑦子页面使用父页面传过来的数据直接this.tongxin就可以监听到了

 

 

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

     方法①   

 eg:      

<xxx v-on:method="methodname"></xxx> 

      父页面自定义了一个方法名为methodname的method事件   

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

 子页面(使用方法): 

 //method为事件名,paramter为method事件的methodname方法的参数.                  

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元素 

 

© 著作权归作者所有

共有 人打赏支持
Chason-洪
粉丝 12
博文 78
码字总数 65754
作品 0
漳州
程序员
Vue.js 2.0源码解析之前端渲染篇

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

王鹤
2017/06/19
0
0
入职第三天:vue-loader在项目中是如何配置的

什么是vue-loader 这是我入职第三天的故事,在写这篇文章之前,先来看看咱们今天要讲的主角——vue-loader,你对它了解多少? 这是我今天的回答,确实,vue-loader是webpack的一个loader,用...

闰土大叔
06/02
0
0
排名前10的vue前端UI框架框架值得你掌握

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

Mr_zebra
07/09
0
0
阿里系 React 项目飞冰 2.0 正式发布:支持 Vue 项目开发

飞冰 2.0 大版本已正式发布,带来了许多重要更新。 飞冰 2.0 是什么? 飞冰通过 Iceworks GUI 工具、完善的开发文档、丰富的组件等,无需安装配置任何前端开发环境(比如安装 node 等)、无需...

局长
05/08
0
17
Per.js 2.0 正式发布,更新数据模板和其它6项内容

经过Alpha和beta版2次的更新,Per.js 2.0-正式版今天终于发布了,那么让我们来看看这次2.0版本相比1.5版本更新了哪些内容: 增加Per.browser模块 增加Per.each模块 do方法增加data属性 for支...

Skyogo
09/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

如何通过 J2Cache 实现分布式 session 存储

做 Java Web 开发的人多数都会需要使用到 session (会话),我们使用 session 来保存一些需要在两个不同的请求之间共享数据。一般 Java 的 Web 容器像 Tomcat、Resin、Jetty 等等,它们会在...

红薯
今天
1
0
C++ std::thread

C++11提供了std::thread类来表示一个多线程对象。 1,首先介绍一下std::this_thread命名空间: (1)std::this_thread::get_id():返回当前线程id (2)std::this_thread::yield():用户接口...

yepanl
今天
2
0
Nignx缓存文件与动态文件自动均衡的配置

下面这段nginx的配置脚本的作用是,自动判断是否存在缓存文件,如果有优先输出缓存文件,不经过php,如果没有,则回到php去处理,同时生成缓存文件。 PHP框架是ThinkPHP,最后一个rewrite有关...

swingcoder
今天
1
0
20180920 usermod命令与用户密码管理

命令 usermod usermod 命令的选项和 useradd 差不多。 一个用户可以属于多个组,但是gid只有一个;除了gid,其他的组(groups)叫做扩展组。 usermod -u 1010 username # 更改用户idusermod ...

野雪球
今天
1
0
Java网络编程基础

1. 简单了解网络通信协议TCP/IP网络模型相关名词 应用层(HTTP,FTP,DNS等) 传输层(TCP,UDP) 网络层(IP,ICMP等) 链路层(驱动程序,接口等) 链路层:用于定义物理传输通道,通常是对...

江左煤郎
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部