一个简单的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特性 替换/合并已有的特性 禁用特性继承 自定 ...
随机推荐
- 对0.5px的边的研究--------------引用
什么是像素? 像素是屏幕显示最小的单位,在一个1080p的屏幕上,它的像素数量是1920 1080,即横边有1920个像素,而竖边为1080个.一个像素就是一个单位色块,是由rgba四个通道混合而成. ...
- webpack-第一个demo
1.webpack概念 webpack是前端的一个项目构建工具,它是基于node.js开发出来的一个前端工具:借助webpack这个前端自动化构建工具,可以完美实现资源的合并.打包.压缩.混淆等诸多功 ...
- 安装原版 Windows 7 后需要安装的微软更新 和 必备系统组件
Windows 7 SP1 和 Windows Server 2008 R2 SP1 更新历史记录 https://support.microsoft.com/zh-cn/help/4009469 微 ...
- [luogu]P1026 统计单词个数[DP][字符串]
[luogu]P1026 统计单词个数 题目描述 给出一个长度不超过200的由小写英文字母组成的字母串(约定;该字串以每行20个字母的方式输入,且保证每行一定为20个).要求将此字母串分成k份(1&l ...
- 病毒 x
04:病毒 查看 提交 统计 提问 总时间限制: 1000ms 内存限制: 65535kB 描述 有一天,小y突然发现自己的计算机感染了一种病毒!还好,小y发现这种病毒很弱,只是会把文档中的所有字 ...
- qtp识别验证码
花了两天时间才完整的完成识别验证码的登录操作,在网上看到很多关于验证码识别的方法,但是我用的qtp版本比较高级,所以还是要自己花心思研究.po上我的识别验证码的详细历程: 一.读取浏览器中的图片验证码 ...
- linux文件重定向
1:标准输出:2:错误输出 1,exec启动一个新的shell将STDOUT文件描述符重定向到文件 #!/bin/shecho "test exec..."exec > ou ...
- LeetCode_21.合并两个有序链表
LeetCode_21 LeetCode-21.合并两个有序链表 将两个有序链表合并为一个新的有序链表并返回. 新链表是通过拼接给定的两个链表的所有节点组成的. 示例: 输入:1->2-> ...
- C#高级应用
学习编程也有大半年了,想起老师前天说的:“你们写的代码都是小儿科”,顿时有点心塞...想想也是,不可能就写一个For循环或者Foreach循环就可以拿到高薪了?我也觉得不太可能,下面我就来为大家简单介 ...
- 阶段3 1.Mybatis_01.Mybatis课程介绍及环境搭建_01.mybatis课程介绍