<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>vue</title> <!--
<script src="vue.js"></script>
--> <script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>
</head>
<body> <div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment v-on:incrementTotal></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div> <script>
Vue.component('button-counter', {
template: '<button v-on:click="increment">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
increment: function () {
this.counter += 1
this.$emit('increment')
}
},
}) new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total += 1
}
}
})
</script> </body>
</html>

vuejs on的更多相关文章

  1. TODO:搭建Laravel VueJS SemanticUI

    TODO:搭建Laravel VueJS SemanticUI Laravel是一套简洁.优雅的PHP开发框架(PHP Web Framework).可以让你从面条一样杂乱的代码中解脱出来:它可以帮你 ...

  2. 一次页面从Jq到Vuejs+PartialView的迁徙

    题外话 本篇分享不能帮助你入门vue,入门的文章也是无意义的,官方文档http://cn.vuejs.org/v2/guide/ 已经写的不能再清晰了.希望我们勇敢的主动地给自己创造实践的机会. 手里 ...

  3. 使用vuejs框架进行列表渲染

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6170706.html 1.通过Script引入Vuejs框架 <script t ...

  4. Vuejs学习笔记1

    首次写vue可能会出现:[Vue warn]: Cannot find element: #app 这是因为你的js在html页面头部引入的原因,自定义js文件要最后引入,因为要先有元素id,vue才 ...

  5. 【vuejs小项目——vuejs2.0版本】单页面搭建

    http://router.vuejs.org/zh-cn/essentials/nested-routes.html 使用嵌套路由开发,这里会出错主要把Vue.use(VueRouter);要进行引 ...

  6. 【vuejs小项目】一、脚手架搭建工作

    一.关于vuejs 这是一个MVVM的前端开发框架,model(数据).viewmode(通讯).view(视图),它吸取了reactjs和angularjs的长处,核心重点在于组件化的设计原则. 我 ...

  7. vuejs的动态过滤

    想要通过vuejs动态过滤(这里动态指得是过滤的条件是动态变化的), 一直没找到好办法, 最蠢的办法当然是两个两个数组,一个作为原始副本数组 一个作为视图数组,这样当过滤条件变化的时候 动态拷贝原始数 ...

  8. 使用 v-cloak 防止页面加载时出现 vuejs 的变量名

    使用 vuejs 做了一个简单的功能页面,逻辑是,页面加载后获取当前的经纬度,然后通过 ajax 从后台拉取附近的小区列表.但是 bug 出现了,在显示小区列表之前,会闪现小区名对应的 vuejs 变 ...

  9. vuejs里封装的和IOS,Android通信模块

    项目需要,在vuejs开发的web项目中与APP进行通信,实现原理和cordova一致.使用WebViewJavascriptBridge. 其实也是通过拦截url scheme,支持ios6往前的系 ...

  10. [Vuejs] 关于vue-router里面的subRoutes

    刚学习vue,可能有使用不对的地方,希望没有对大家造成困扰! 使用vue-router,为了能够更好的管理.vue文件,需要用到子路由. 先看个错误的例子 routers.js '/company': ...

随机推荐

  1. 安装Oracle RAC 11g

    1.Oracle Enterprise Linux 和 iSCSI 上构建 Oracle RAC 11g 集群 2.Oracle RAC 的所有共享磁盘存储将基于 iSCSI,iSCSI 使用在第三个 ...

  2. springMVC接受对象实体并且对象实体里面又有对象集合方式

    springMVC接受对象实体并且对象实体里面又有对象集合方式: Ajax: function add(){ var orders = [ { orderNo : "H222255" ...

  3. 【原创】Linux下的ngix服务器安装步骤

    1.首先下载ngix的源码linux版本[1.5.8版本] http://nginx.org/en/download.html 2.下载PCRE library,是安装ngix的必备包之一 [root ...

  4. vmware workstation中的NAT配置

    宿主机:win10: IP:192.168.1.101 GW:192.168.1.1 以太网2(VMNET8) IP:192.168.100.1 GW:nonevmware中的虚拟网络设置(NAT): ...

  5. 关于zabbix 的lld的web界面的配置

    lld脚本在配置文件中例子: UserParameter=lldisk,/bin/bash /script/lldisk.sh disk_count 1.监控项 2.监控项原型

  6. 如何给table的指定td进行css样式改变

    td:nth-child(){background-color:#; color:#fff;}/*把第3个td的背景设为黑色*/ :nth-child()不止可以给table指定样式 p标签页是可以的 ...

  7. Git常见问题 资料汇总

    来源https://blog.csdn.net/albb_/article/details/80420468

  8. Python3基础笔记---序列化

    1.json模块   菜鸟教程 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,易于人阅读和编写. import json json.dumps json ...

  9. B. Recursive Queries 打表

    Code: #include<cstdio> #include<iostream> #include<algorithm> #include<cstring& ...

  10. 解决Windows下git需要每次都要ssh-add的问题

    顽皮的很: 不知道怎么回事,每次打开git提交代码都需要ssh-add一下秘钥才可以正常提交: 不然就报错权限之类的问题: 怎么才能更方便一些? 卸了重装!我没试... 再或者是在 git 的安装目录 ...