//创建属于自己的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组件开发示例的更多相关文章

  1. 一个简单的 vue.js 实践教程

    https://segmentfault.com/a/1190000006776243?utm_source=tuicool&utm_medium=referral 感觉需要改善的地方有: ( ...

  2. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  3. 搭建Vue.js环境，建立一个简单的Vue项目

    基于vue-cli快速构建 Vue是近年来比较火的一个前端框架,所以搭建Vue.js环境,要装webpack,vue-cli,Vue 安装webpack命令如下 $ cnpm install webp ...

  4. VUE.JS组件化

    VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...

  5. vue.js应用开发笔记

    看vue.js有几天了,之前也零零散散的瞅过,不过一直没有动手去写过demo,这几天后台事比较少,一直在讨论各种需求(其实公司对需求还是比较重视与严谨的,一个项目需求讨论就差不多一周了,这要搁之前,天 ...

  6. Vue.js 组件编码规范

    本规范提供了一种统一的编码规范来编写 Vue.js 代码.这使得代码具有如下的特性: 其它开发者或是团队成员更容易阅读和理解. IDEs 更容易理解代码,从而提供高亮.格式化等辅助功能 更容易使用现有 ...

  7. Vue.js 组件的三个 API：prop、event、slot

    组件的构成 一个再复杂的组件,都是由三部分组成的:prop.event.slot,它们构成了 Vue.js 组件的 API.如果你开发的是一个通用组件,那一定要事先设计好这三部分,因为组件一旦发布,后 ...

  8. 手把手教你从零写一个简单的 VUE

    本系列是一个教程,下面贴下目录~1.手把手教你从零写一个简单的 VUE2.手把手教你从零写一个简单的 VUE--模板篇 今天给大家带来的是实现一个简单的类似 VUE 一样的前端框架,VUE 框架现在应 ...

  9. 浅尝Vue.js组件(一)

    本篇目录: 组件名 组件注册 全局注册 基础组件的自动化全局注册 局部注册 在模块系统中局部注册 Prop 单向数据流 Prop验证 类型检查 非Prop特性 替换/合并已有的特性 禁用特性继承 自定 ...

随机推荐

  1. 使用jquery给html标签加点击事件

    //直接给所有img标签绑定click事件 $("img").click(function(){ alert('你点击了图片'); }) //使用bind方法绑定click事件 $ ...

  2. oracle 7.4安装nvidia驱动

    2019-8-28 参考网页: 如何在k8s集群中安装nvidia.cuda并使用GPU进行训练 https://blog.csdn.net/u013042928/article/details/78 ...

  3. case 函数两种格式

    1.简单case函数 CASE sex WHEN '0' THEN '男' WHEN '1' THEN '女' ELSE '其他' END 2.case搜索函数 CASE WHEN sex = '0' ...

  4. java8中接口default、static新特性，与抽象类区别

    之前Java接口中的方法默认都是public abstract,成员变量默认都是public static final,偶然发现接口中可以有default类型的方法,才知道java8中接口可以有自己的 ...

  5. Codeforces 950E Data Center Maintenance ( 思维 && 强连通分量缩点 )

    题意 : 给出 n 个点,每个点有一个维护时间 a[i].m 个条件,每个条件有2个点(x,y)且 a[x] != a[y].选择最少的 k (最少一个)个点,使其值加1后,m个条件仍成立. 分析 : ...

  6. 【转】Django restful framework中自动生成API文档

    转自 https://www.cnblogs.com/sui776265233/p/11350434.html 自动生成api文档(不管是函数视图还是类视图都能显示) 1.安装rest_framewo ...

  7. Vue中基本指令用法

    指令在Vue中是个很重要的功能,在Vue项目中是必不可少的.根据官网的介绍,指令 (Directives) 是带有 v- 前缀的特殊属性.指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地 ...

  8. 《Effective Java》读书笔记 - 11.序列化

    Chapter 11 Serialization Item 74: Implement Serializable judiciously 让一个类的实例可以被序列化不仅仅是在类的声明中加上" ...

  9. activemq 笔记

    官网下载好后,修改下conf下activemq.xml配置文件就可以了. 主要将这里的ip改成我们这里用的locahost就可以了: <transportConnectors> <! ...

  10. imu tool使用

    安装imu tool sudo apt-get install ros-melodic-imu-tools launch文件: <!-- imu_node launch file--> & ...