一个简单的Vue.js组件开发示例
//创建属于自己的vue组件库
(function(Vue, undefined) {
Vue.component("my-component", {
template: '<div @click="alertName">{{message.name}}<button @click="alertMessage">{{message.age}}</button></div>',//模板最外层必须只有一个标签包裹，不能同时存在两个
props: ['message'],
data: function() {
return { }
},
methods: {
alertName() {
this.$emit('alerta')//事件名称必须小写，不然无效(此处浪费了我好长时间)
},
alertMessage(){
this.$emit('alertmessage',this.message.name)
}
}
})
}(Vue))
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="iview.js"></script>
</head>
<body>
<div id="example">
<my-component :message="great" @alerta="alet" @alertmessage='alertb'></my-component>
</div> <script type="text/javascript">
var vue=new Vue({
el: '#example',
data:{
great:{
name:'wanglu',
age:12
}
},
methods:{
alet(){
this.great={name:'liuyu',age:13};
},
alertb(name){
alert(name);
}
}
})
</script> </body>
</html>
一个简单的Vue.js组件开发示例的更多相关文章
- 一个简单的 vue.js 实践教程
https://segmentfault.com/a/1190000006776243?utm_source=tuicool&utm_medium=referral 感觉需要改善的地方有: ( ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- 搭建Vue.js环境，建立一个简单的Vue项目
基于vue-cli快速构建 Vue是近年来比较火的一个前端框架,所以搭建Vue.js环境,要装webpack,vue-cli,Vue 安装webpack命令如下 $ cnpm install webp ...
- VUE.JS组件化
VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
- vue.js应用开发笔记
看vue.js有几天了,之前也零零散散的瞅过,不过一直没有动手去写过demo,这几天后台事比较少,一直在讨论各种需求(其实公司对需求还是比较重视与严谨的,一个项目需求讨论就差不多一周了,这要搁之前,天 ...
- Vue.js 组件编码规范
本规范提供了一种统一的编码规范来编写 Vue.js 代码.这使得代码具有如下的特性: 其它开发者或是团队成员更容易阅读和理解. IDEs 更容易理解代码,从而提供高亮.格式化等辅助功能 更容易使用现有 ...
- Vue.js 组件的三个 API：prop、event、slot
组件的构成 一个再复杂的组件,都是由三部分组成的:prop.event.slot,它们构成了 Vue.js 组件的 API.如果你开发的是一个通用组件,那一定要事先设计好这三部分,因为组件一旦发布,后 ...
- 手把手教你从零写一个简单的 VUE
本系列是一个教程,下面贴下目录~1.手把手教你从零写一个简单的 VUE2.手把手教你从零写一个简单的 VUE--模板篇 今天给大家带来的是实现一个简单的类似 VUE 一样的前端框架,VUE 框架现在应 ...
- 浅尝Vue.js组件(一)
本篇目录: 组件名 组件注册 全局注册 基础组件的自动化全局注册 局部注册 在模块系统中局部注册 Prop 单向数据流 Prop验证 类型检查 非Prop特性 替换/合并已有的特性 禁用特性继承 自定 ...
随机推荐
- node.js入门学习（五）--Demo模块化改造
1.node.js中模块的分类 1)node.js内置模块(核心,原生) 所有内置模块在安装node.js时就已经编译成二进制文件,可以直接加载运行(速度较快),部分内置模块,在node.exe这个进 ...
- scrapy项目1：爬取某培训机构老师信息（spider类）
1.scrapy爬虫的流程,可简单该括为以下4步: 1).新建项目---->scrapy startproject 项目名称(例如:myspider) >>scrapy.cfg为项目 ...
- create-react-app 构建的项目使用 mobx (说到底就是为了使用装饰器语法对 babel 做些配置
在 create-react-app 命令行构建的 React 项目中使用 Mobx 会出现如下警告: Support for the experimental syntax 'decorators- ...
- Spring Cloud云架构 - SSO单点登录之OAuth2.0登录流程(2)
上一篇是站在巨人的肩膀上去研究OAuth2.0,也是为了快速帮助大家认识OAuth2.0,闲话少说,我根据框架中OAuth2.0的使用总结,画了一个简单的流程图(根据用户名+密码实现OAuth2.0的 ...
- Sql 中的as是什么意思 + 无列名注入解析
相当于取别名 这里结合一下无列名注入的知识点: 这种方法在第十届SWPUCTF的web1——广告招租里考到了:
- （转）python selenium-webdriver 元素操作之鼠标和键盘事件
参考资料:https://blog.csdn.net/zh175578809/article/details/76767748 参考资料2:https://blog.csdn.net/qq_41817 ...
- k8s中pod内dns无法解析的问题
用k8s创建了pod,然后进入pod后,发现在pod中无法解析www.baidu.com,也就是出现了无法解析外面的域名的问题.经过高人指点,做个小总结.操作如下. 一,将CoreDNS 的Confi ...
- sensu
https://blog.csdn.net/enweitech/article/details/53763324
- 清北学堂2019.7.18 & 清北学堂2019.7.19
Day 6 钟皓曦 经典题目:石子合并 可以合并任意两堆,代价为数量的异或(^)和 f[s]把s的二进制所对应石子合并成一堆所花代价 枚举s的子集 #include<iostream> u ...
- java hashset输出
for (Map.Entry<String, String> me : id_label_map.entrySet()) { System.out.println(me.getKey() ...