<!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 学习笔记 13 -- 控制用户权限

    数据库控制语言的功能室控制用户对数据库的存取权限. 用户对某类数据具有何种操作权限是有DBA决定的.Oracle 通过GRANT语句完毕权限的授予,通过REVOKE语句完毕对权限的收回. 权限分为系统 ...

  2. Android 6.0 开发人员对系统权限的使用与练习（Permissions Best Practices）

    Permissions Best Practices 在安装的过程中,用户非常easy忽略权限请求. 假设一个用户相应用感觉沮丧或者操心泄漏个人信息,那么这些用户就会不用他或者卸载它. 怎样规避这个问 ...

  3. OEM12C(12.1.0.5)安装插件监控mysql(linux)

    目录结构: 文章参考论坛:https://blog.csdn.net/u010719917/article/details/78128200 环境说明: oms:12.1.0.5  os:centos ...

  4. MySQL学习(一)——启动和登录MySql遇到的问题及解决

    1.MySQL使用命令行启动时报错“发生系统错误 5”,如下: 原因:未用管理员身份运行cmd程序 解决方案:在开始菜单里找到命令提示符,右击选择以管理员身份运行 2.登录时报错“提示mysql不是内 ...

  5. 虚拟机CentOS6.8下安装JDK

    CentOS6.8下 首先下载JDK,执行命令如下: wget http://download.oracle.com/otn-pub/java/jdk/8u172-b11/a58eab1ec24242 ...

  6. SpringBoot学习笔记(12)----SpringBoot实现多个 账号轮询发送邮件

    首先,引入发送邮件的依赖,由于freemarker自定义模板,所以也需要把freemarker的依赖引入 pom.xml文件 <dependency> <groupId>org ...

  7. [ZJOI2006]物流运输 最短路 动态规划

    Code: 定义状态 $dp[i]$ 为前 $i$ 天的最小代价. 状态转移为:$dp[i]=min(dp[i],dp[j]+spfa(j+1,i)$ 这里 $spfa(i,j)$ 是指 $(i,j) ...

  8. SP10628 COT - Count on a tree 主席树

    Code: #include<cstdio> #include<cstring> #include<algorithm> #include<string> ...

  9. mysql 将时间转换成时间戳

    select UNIX_TIMESTAMP(addtime/*date_column*/) from tablename 输出:1548658912 数据库原格式:2019-01-28 15:01:2 ...

  10. Maven缺少jar添加方式

    Maven 中央仓库地址: 1. http://www.sonatype.org/nexus/ 2. http://mvnrepository.com/ (本人推荐仓库) 3. http://repo ...