一个简单的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特性 替换/合并已有的特性 禁用特性继承 自定 ...
随机推荐
- Scala传递参数遇到的坑
1.方法中的参数全为val型. 例: def insertMap(map:=>Map[String,Int]):Unit={ map+=("b"->2) //报错 ...
- javaScript中的 this
普通函数中的 this // es3中 function foo() { console.log(this);// 这里的this是 window } foo(); // 在es5中 严格模式下 fu ...
- 【leetcode】1190. Reverse Substrings Between Each Pair of Parentheses
题目如下: Given a string s that consists of lower case English letters and brackets. Reverse the strings ...
- asp.net mvc 异步控制器
参考:https://blog.csdn.net/niewq/article/details/20490707 https://www.cnblogs.com/visonme/p/5537190.ht ...
- Luogu P2678 跳石头
题目链接:Click here Solution: 最小值最大,显然二分,二分出mid后贪心去除石头,判断m次内是否可行即可 Code: #include<bits/stdc++.h> # ...
- 【BZOJ2022】Pku1837 Balance
Description Gigel has a strange "balance" and he wants to poise it. Actually, the device i ...
- pycharm如何添加固定代码块
1. file -- settings -- 搜索框输入live,找到 Live Templates 2. 选择你要添加到哪个语言中去,打开python组,并点击右上角 “+”,选择 1.Live T ...
- css使用1
一.引入css的三种方式 一.CSS(Cascading Style Sheet):层叠样式表 二.CSS样式由两个组成部分:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束 语法结构 选 ...
- [CSP-S模拟测试]:Smooth（数学）
题目传送门(内部题84) 输入格式 两个整数$B,K$ 输出格式 一个整数表示答案 样例 样例输入: 5 100 样例输出: 数据范围与提示 对于$40\%$的数据,保证答案小于$10^7$对于另$2 ...
- Java中用正则表达式截取字符串中
Java中用正则表达式截取字符串中第一个出现的英文左括号之前的字符串.比如:北京市(海淀区)(朝阳区)(西城区),截取结果为:北京市.正则表达式为() A ".*?(?=\\()" ...