1.关于模板渲染,当需要渲染多个元素时可以

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>

2.关于事件绑定的后缀总结

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用 capture 模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

键盘事件

<input v-on:keyup.enter="submit">

enter
tab
delete (捕获 “删除” 和 “退格” 键)
esc
space
up
down
left
right

也可以自定义,通过 config.keyCodes来定义,如Vue.config.keyCodes.f1 = 112。

3.关于组件通信

<div id="app">
  <my-component @getchild="childSay"></my-component>
</div>

Vue.component('my-component',{
  template:'<div @click="toParent">23</div>',
  data:function(){
    return {
      msg:'hello'
    }
  },
  methods:{
    toParent: function(){
      console.log(123);

      //这里触发事件,注意这里的事件名称不可以写驼峰式,也可以传递参数,只需要在事件参数后面写就可以了
      this.$emit('getchild');
    }

  }
});

new Vue({
  el:'#app',
  methods:{
    childSay:function(){
      console.log(12);
      // alert(msg);
    }
  }
});

在2.0中$dispatch去掉了,所以不再使用。

4.动态组件

<div id="app">
  <all-component :is="currentpage"></all-component>
  <div>
    <button type="button" @click="currentpage='home'">home</button>
    <button type="button" @click="currentpage='foo'">foo</button>
    <button type="button" @click="currentpage='bar'">bar</button>
  </div>
</div>

new Vue({
  el:'#app',
  data:{
    currentpage:'home'
  },
  methods:{
    getChild: function(){
      var child = this.$refs.child;
      console.log(child.msg);
    }  
  },
  components:{
    home:{
      template:'<div>this is home</div>'
    },
    foo:{
      template:'<div>this is foo</div>'
    },
    bar:{
      template:'<div>this is bar</div>'
    }
  }
});

在点击三个按钮的时候会切换组件,个人认为比较适合做tab组件。

5.关于props传递给子组件信息

props:{
  username:{
    type:String,
    //这里的默认值只有当该组件未设置传递值时才显示
    default:'zwzhai'
  }
}

vue2.0学习(二)的更多相关文章

  1. vue2.0学习笔记之路由(二)路由嵌套+动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. vue2.0学习笔记之路由(二)路由嵌套

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Vue2.0学习--Vue数据通信详解

    一.前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.组件间如何传递数据就显得至关重要.本文尽可能罗列出一些常见的数据传递方式,如p ...

  4. VUE2.0学习总结

    摘要: 年后公司项目开始上vue2.0,自己对学习进行了总结,希望对大家有帮助! VUE2.0学习 vue介绍 vue是什么? https://vuefe.cn/guide vue也是一个数据驱动框架 ...

  5. vue2.0学习教程

    十分钟上手-搭建vue开发环境(新手教程)https://www.jianshu.com/p/0c6678671635 如何在本地运行查看github上的开源项目https://www.jianshu ...

  6. vue2.0生成二维码图片并且下载图片到本地兼容写法

    vue生成二维码图片,这里使用的是qrcode.js 这个插件(亲测写法,兼容没有问题) 第一步,下载插件 需要注意,这里下载的是qrcodejs2 cnpm install --save qrcod ...

  7. Vue2.0学习笔记一 :各种表达式

    #,过滤器 #,在Vue2.x中,过滤器只能在mustache绑定中使用,为了在指令帮定中实现同样的行为,你应该使用计算属性:     #,过滤器可以串联 {{ message | filterA | ...

  8. vue2.0学习笔记之组件

    [易错点]:  1.   组件内html代码片段超过一个标签时必须套一个根元素,即template模板子元素只能是一个. 2.   组件名称采用横杠间隔命名时,第一个字母大写会报错.   写法一:全局 ...

  9. vue2.0学习小列子

    参考地址:https://segmentfault.com/a/1190000006165434 例1: <template> <div id="app"> ...

随机推荐

  1. OpenStack 企业私有云的若干需求(5):主流硬件支持、云快速交付 和 SLA 保证

    本系列会介绍OpenStack 企业私有云的几个需求: 自动扩展(Auto-scaling)支持 多租户和租户隔离 (multi-tenancy and tenancy isolation) 混合云( ...

  2. Caffe源码解析2:SycedMem

    转载请注明出处,楼燚(yì)航的blog,http://www.cnblogs.com/louyihang loves baiyan/ 看到SyncedMem就知道,这是在做内存同步的操作.这类个类的 ...

  3. 苹果iOS强制HTTPS迫在眉睫,距离2017年只剩1天,准备好了么?

    其实不久前苹果就发了通告,要求ios上的应用全部以HTTPS来进行接口调用以及数据访问,这样做是为了数据安全,一方面为了自己,另一方面也是对应用的要求更加严格,这么做很好,也加强了市场app的规范,虽 ...

  4. IntelliJ IDEA 快捷键大全

    IntelliJ IDEA 快捷键大全 (2012-03-27 20:33:44) 转载▼ 标签: ide intellij快捷键 杂谈 分类: IDE工具 最近刚接触IntelliJ这个工具,用了几 ...

  5. NSBundle

    属性: .使用类方法创建一个NSBundler对象 + (NSBundle *)mainBundle; eg:[NSBundle mailBundle]; .使用路径获取一个NSBundle 对象,这 ...

  6. IIS7注册本机模块

    问题描述:打开mp4文件要映射给mod_h264_streaming.dll(http://h264.code-shop.com/trac/wiki/Mod-H264-Streaming-Intern ...

  7. 2015Qcon参会记录(内有show girl)

    因为前一段刚去了一趟杭州的阿里TD时代交流,就没有好意思在部门内部申请Qcon的门票.但最后还是没有耐得住心里的痒,请假去听了,这里多谢把票让给我的XX同学(应他要求,马赛克了名字). 今年的Qcon ...

  8. 小巧数据库 Apache Derby 使用攻略

    1. Derby 介绍 将目光放在小 Derby 的原因是纯绿色.轻巧.内存占用小,分分钟在你机子跑起来,自己做点需要连接数据库的代码实践非常方便. 虽然 Mysql 也可以,多一种选择,不是也挺好么 ...

  9. fiddler手机抓包教程

    序言 记录一下自己第一次使用fiddler抓取手机的信息,做一个备忘 实现步骤 一.首先设置一下fiddler,使其对HTTPS协议进行抓包 二.然后设置fidder使得fiddler支持远程计算机连 ...

  10. PHP常用框架

    1.Thinkphp  thinkphp是国内开发的框架,它有比较易读的手册,和大量的网上资源,所以我推荐大家首选thinkphp. 2.CodeIgniter  前一段时间我用过codeignite ...