vue学习15-自定义组件model使用
<!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使用的更多相关文章
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
- vue框架之自定义组件中使用v-model
通常 vue在html常见表单空间支持v-model双向绑定例如 <input v-model="message" placeholder="edit me&quo ...
- vue.js2.0 自定义组件初体验
理解 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...
- Android学习：自定义组件，DrawView
布局文件: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:to ...
- Vue.extend提供自定义组件的构造器
Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器.经常服务于Vue.component用来生成组件,可以简单理解为当在模板中遇到该组件名称作为标签的自定义元 ...
- Vue学习系列(二)——组件详解
前言 在上一篇初识Vue核心中,我们已经熟悉了vue的两大核心,理解了Vue的构建方式,通过基本的指令控制DOM,实现提高应用开发效率和可维护性.而这一篇呢,将对Vue视图组件的核心概念进行详细说明. ...
- vue怎么给自定义组件绑定原生事件
下面主要以4个示例Demo演示(示例代码JS引用的Vue CDN),建议小伙伴直接复制示例代码运行查看, 赶时间的小伙伴可直接往下拉,看示例demo4 注:全局或局部注册的组件称为子组件,其中声明的 ...
- vue之全局自定义组件
在项目开发中,往往需要使用到一些公共组件,比如,弹出消息.面包屑或者其它的组件,为了使用方便,将其以插件的形式融入到vue中,以面包屑插件为例: 1.创建公共组件MyBread.vue <tem ...
- 38.VUE学习之-全局组件和局部组件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
随机推荐
- Hibernate 批量update数据时，怎么样做可以回滚，
Hibernate 批量update数据时,怎么样做可以回滚, 1.serviceManagerDaoImpl代码里对异常不进行try,catch抛出, 2.或者抛出throw new Runtime ...
- redis启动报错：Fatal error loading the DB: Invalid argument
redis启动报错 add it to your /etc/rc.local in order to retain the setting after a reboot. Redis must be ...
- centos安装宝塔命令
yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh & ...
- windows10下vscode+cmake编译Qt5代码（2）
概述 本文依赖 前文 本文将介绍使用cmake语法屏蔽运行Qt exe的cmd窗口 解决办法 配置VS项目属性, 缺点: cmake重新 configure后,项目属性会重置,再次运行还将出现cmd弹 ...
- 【九度OJ】题目1431：Sort 解题报告
[九度OJ]题目1431:Sort 解题报告 标签(空格分隔): 九度OJ [LeetCode] http://ac.jobdu.com/problem.php?pid=1431 题目描述: 给你n个 ...
- 【LeetCode】372. Super Pow 解题报告（Python）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址: https://leetcode.com/problems/super-po ...
- pandas tutorial 2
@ 目录 Group_By 对数据进行分组 对 group进行迭代 选择一个group get_group() Aggregations 在group的基础上传入函数整合 Transformation ...
- elasticsearch之多索引查询
一.问题源起 在elasticsearch的查询中,我们一般直接通过URL来设置要search的index: 如果我们需要查询的索引比较多并且没有什么规律的话,就会面临一个尴尬的局面,超过URL的长度 ...
- Deepin20系统安装Nvidia驱动
Deepin20系统安装Nvidia驱动 系统设备配置信息如下: 电脑型号:华硕天选air[ASUS-FX516P] 显卡型号:RTX 3070 移动版独显 处理器型号: 11th Gen Intel ...
- 使用 DML语句，对 “锦图网” 数据进行操作，聚合函数练习
查看本章节 查看作业目录 需求说明: 根据客户 ID 统计订单数.订单总金额.最高订单金额.最低订单金额和每份订单平均金额,并按订单总金额升序显示 根据客户统计订单总订购人次数> 5 的统计信息 ...