一个简单的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特性 替换/合并已有的特性 禁用特性继承 自定 ...
随机推荐
- IDEA 2018.1可用License服务（持续更新）
1. http://idea.congm.in 2.http://idea.toocruel.net
- 【shell】awk的next用法
awk的next相当于循环中continue的作用,next后面的语句将不再执行. 例如,下面的例子中,包含数字3的那行的print语句没有被执行. [root]$ seq | awk '{print ...
- shell练习--PAT题目1008：数组元素循环右移问题 (失败案例，运行超时)
一个数组A中存有N(>)个整数,在不允许使用另外数组的前提下,将每个整数循环向右移M(≥)个位置,即将A中的数据由(A0A1⋯AN−1)变换为(AN−M⋯AN−1A ...
- postman—创建collection，执行collection和批量执行
接口测试中,可以在 Postman 逐个创建请求.但当请求逐渐增多时,如果我们不采取任何措施管理,散乱的请求维护起来就比较麻烦了.这个时候我们可以创建测试集 Collection 来对这些请求进行管理 ...
- CF1260F
题目大意 一棵树,每个节点的权为L[i]~R[i],一棵树的贡献为\(\sum\limits_{h_{i} = h_{j}, 1 \le i < j \le n}{dis(i,j)}\),其中\ ...
- 6.re正则表达式
import re import unicodedata s = "a00xoghasalexjkdfldhfjk" v = s.find("alex") pr ...
- mysql AUTO INCREMENT字段 语法
mysql AUTO INCREMENT字段 语法 作用:在新记录插入表中时生成一个唯一的数字 说明:我们通常希望在每次插入新记录时,自动地创建主键字段的值.我们可以在表中创建一个 auto-incr ...
- maven工程项目与项目之间的依赖方式
首先看一下项目结构: 1.需要在父工程中把子工程为坐标引进来,同时标注父工程为pom工程: 2.同时在父工程中把子工程当作一个模块引进来 3.需要在每一个子项目中通过parent标签,标注 ...
- 大数据笔记（二十四）——Scala面向对象编程实例
===================== Scala语言的面向对象编程 ======================== 一.面向对象的基本概念:把数据和操作数据的方法放到一起,作为一个整体(类 c ...
- mysq远程连接报错，host..
在本机登入mysql后,更改"mysql"数据库里的"user"表里的"host"项,从"localhost"改为'%' ...