<!DOCTYPE html>

<html lang='en'>

<head>

 <meta charset='UTF-8'>

 <meta http-equiv='X-UA-Compatible' content='IE=edge'>

 <meta name='viewport' content='width=device-width, initial-scale=1.0'>

 <script src='https://unpkg.com/vue/dist/vue.js'></script>

 <title></title>

</head>

<body>

 <div id='app'>

    <Stepper v-model="counts"></Stepper>

 </div>

 <script>

    Vue.component("Stepper",{

      props:['count'],

      model:{

        event:"count-chenged",

        prop:"count"

      },

      template:

      `

      <div>

        <button @click="substract">-</button>

        <span>{{count}}</span>

        <button @click="add">+</button>

      </div>

      `,

      methods:{

        substract(){

          this.$emit("count-chenged",this.count-1)

        },

        add(){

          this.$emit("count-chenged",this.count+1)

        }

      }

    })

    new Vue({

     el:'#app',

     data:{

      counts: 0,

     }

   }

)

</script>

</body>

</html>

　　

vue学习15-自定义组件model使用的更多相关文章

  1. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

  2. vue框架之自定义组件中使用v-model

    通常 vue在html常见表单空间支持v-model双向绑定例如 <input v-model="message" placeholder="edit me&quo ...

  3. vue.js2.0 自定义组件初体验

    理解 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...

  4. Android学习：自定义组件，DrawView

    布局文件: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:to ...

  5. Vue.extend提供自定义组件的构造器

    Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器.经常服务于Vue.component用来生成组件,可以简单理解为当在模板中遇到该组件名称作为标签的自定义元 ...

  6. Vue学习系列(二)——组件详解

    前言 在上一篇初识Vue核心中,我们已经熟悉了vue的两大核心,理解了Vue的构建方式,通过基本的指令控制DOM,实现提高应用开发效率和可维护性.而这一篇呢,将对Vue视图组件的核心概念进行详细说明. ...

  7. vue怎么给自定义组件绑定原生事件

     下面主要以4个示例Demo演示(示例代码JS引用的Vue CDN),建议小伙伴直接复制示例代码运行查看, 赶时间的小伙伴可直接往下拉,看示例demo4 注:全局或局部注册的组件称为子组件,其中声明的 ...

  8. vue之全局自定义组件

    在项目开发中,往往需要使用到一些公共组件,比如,弹出消息.面包屑或者其它的组件,为了使用方便,将其以插件的形式融入到vue中,以面包屑插件为例: 1.创建公共组件MyBread.vue <tem ...

  9. 38.VUE学习之-全局组件和局部组件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

随机推荐

  1. python 学生信息管理系统

    python与数据库的例子 初始化数据库 链接数据库创建库和表并插入数据 init.py import pymysql sql_base='create database school;' sql_t ...

  2. centos使用yum安装报错： 另一个应用程序是：PackageKit

    已加载插件:fastestmirror, langpacks/var/run/yum.pid 已被锁定,PID 为 13189 的另一个程序正在运行.Another app is currently ...

  3. 基于DNN的残余回声抑制

    摘要 由于功率放大器或扬声器的限制,即使在回声路径完全线性的情况下,麦克风捕获的回声信号与远端信号也不是线性关系.线性回声消除器无法成功地消除回声的非线性分量.RES是在AES后对剩余回声进行抑制的一 ...

  4. 安装MingW64_配置C/C++开发环境_Windows10

    下载安装 mingw-w64托管在sourceforge,下载地址: https://sourceforge.net/projects/mingw-w64/ 安装过程中... 除了下图的界面,其他选择 ...

  5. Android 控件使用教程（二）—— RecyclerView 展示图片

    简介 在上一篇博文中,介绍了大家已经很熟悉的布局控件ListView,在这篇文章中,我将使用比较新.功能也更强大的RecyclerView. RecyclerView 首先,要用这个控件,你需要在gr ...

  6. 【LeetCode】84. Largest Rectangle in Histogram 柱状图中最大的矩形（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 单调栈 日期 题目地址: https://leetc ...

  7. python学习第六天：python基础（条件判断、循环）

    条件判断 格式 if <条件判断1>: <执行1> elif <条件判断2>: <执行2> elif <条件判断3>: <执行3> ...

  8. python学习第四天：python基础（字符编码和乱码到底咋回事儿）

    字符编码 这得从字符编码开始说起: 字符串也是一种数据类型,但是,字符串比较特殊的是还有一个编码问题.因为计算机只能处理数字,如果要处理文本,就必须先把文本转换为数字才能处理. 最早的计算机在设计时采 ...

  9. 快速恢复update了的orcale数据表

    在update的时候 没有写条件 将整个表中的数据全部都更新了,这时候怎么办呢? orcale提供了以下的方法产看某一个时间戳, 所执行的sql的语句内容, 同时可以利用该这个时间戳查看当时语句执行显 ...

  10. 【机器学*】k*邻算法-01

    k临*算法(解决分类问题): 已知数据集,以及该数据对应类型 给出一个数据x,在已知数据集中选择最接*x的k条数据,根据这k条数据的类型判断x的类型 具体实现: from numpy import * ...