一个简单的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特性 替换/合并已有的特性 禁用特性继承 自定 ...
随机推荐
- 【NOIP2016提高A组模拟8.17】(雅礼联考day1)Value
题目 分析 易证,最优的答案一定是按\(w_i\)从小到大放. 我们考虑dp, 先将w从小到大排个序,再设\(f_{i,j}\)表示当前做到第i个物品,已选择了j个物品的最大值.转移就是\[f_{i, ...
- C/C++运算符优先级关系
C/C++优先级 从高到低 1~14梯队 1. () [] . -> 2. ! ~ -(负号) ++ -- &(取变量地址)* (type)(强制类型) ...
- 14. ClustrixDB 高可用性的最佳实践
本文档详细介绍了最大化ClustrixDB上运行的应用程序正常运行时间的最佳实践.这涵盖了广泛的主题,从环境需求到变更管理程序,所有这些最终都会影响应用程序的可用性.其中许多是您可能已经熟悉的标准最佳 ...
- 两个i标签之间有缝隙
给i标签的父元素设置font-size:0:
- mysql 普通用户与权限
1.创建用户 mysql> create user 'myself'@'%' identified by 'Myself'; Query OK, 0 rows affected mysql> ...
- 举例子说明ubuntu中remove，autoremove，purge区别
转自:慎用 apt-get autoremove ! apt-get 提供了一个用于下载和安装软件包的简易命令行界面.卸载软件包主要有这3个命令 remove – 卸载软件包autoremove ...
- Nginx的正则表达式
Nginx (engine x) 是一个高性能的HTTP和反向代理服务,也是一个IMAP/POP3/SMTP服务.Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点(俄文:Ра ...
- [BZOJ1718]:[Usaco2006 Jan] Redundant Paths 分离的路径（塔尖）
题目传送门 题目描述 为了从F个草场中的一个走到另一个,贝茜和她的同伴们有时不得不路过一些她们讨厌的可怕的树．奶牛们已经厌倦了被迫走某一条路,所以她们想建一些新路,使每一对草场之间都会至少有两条相互分 ...
- Run nginx from Docker in Windows
1.首先, 使用 docker run hello-world 命令 确认 docker 在本地安装成功,若成功应如下所示(此处使用的是 Docker Toolbox 在Windows上安装Docke ...
- 问:在指定的JSON数据中（最外层是数组）根据指定条件拿到匹配到的结果
let carr = [{ "code": "000", "agyTypeCode": "1", "name& ...