vue组件一
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<simple-counter></simple-counter>
<simple-counter></simple-counter>
<simple-counter></simple-counter>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var data = {
counter: 0
}
Vue.component("simple-counter" , {
template: '<button v-on:click="counter += 1">{{counter}}</button>',
data: function(){
return{
counter: 0
}
}
});
new Vue({
el: '#app'
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<child message="hello" my-message="gunduzi"></child>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
Vue.component('child' , {
props: ['message','myMessage'],
template: '<div><span>{{message}}</span> <span>{{myMessage}}</span></div>'
}); new Vue({
el:'#app'
});
</script>
</body>
</html>
vue组件一的更多相关文章
- vue组件
分享出来让思路更成熟. 首先组件是 Vue.js 最强大的功能之一. 可以减少很多的工作量,提高工作效率. 编写一个可复用性的组件,虽然官网上也有.... 编写可复用性的vue组件 具备一下的几个要求 ...
- vue组件的配置属性
vue组件的声明语法: Vue.component('component-name',{ template:'<p>段落{{prop1}} {{prop2}}</p>', da ...
- vue组件，撸第一个
实现此例您可以学到: vue-cli的基本应用 父组件如何向子组件传递值 单文件组件如何引入scss v-on和v-for的基础应用 源码下载 一.搭建vue开发环境 更换镜像到cnpmnpm ins ...
- vue组件最佳实践
看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...
- JS组件系列——又一款MVVM组件：Vue（二：构建自己的Vue组件）
前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...
- vue组件大集合 component
vue组件分为全局组件.局部组件和父子组件,其中局部组件只能在el定义的范围内使用, 全局组件可以在随意地方使用,父子组件之间的传值问题等. Vue.extend 创建一个组件构造器 template ...
- 【Vue】详解Vue组件系统
Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...
- 关于vue组件的一个小结
用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维 ...
- Vue组件基础用法
前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...
- Vue组件模板形式实现对象数组数据循环为树形结构
数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout ...
随机推荐
- 【Mocha.js 101】钩子函数
前情提要 在上一篇文章<[Mocha.js 101]同步.异步与 Promise>中,我们学会了如何对同步方法.异步回调方法以及 Promise 进行测试. 在本篇文章中,我们将了解到 M ...
- C/C++代码覆盖率生成
初始状态下只有一个源代码文件 nosoul@linux:testCov> ls test.c nosoul@linux:testCov> 第一步:编译.链接.执行可执行文件 gcc -o ...
- 控制面板中java设置项如何删除
卸载jdk或者jre后,如果控制面板中仍然有java项,重新安装可能仍然无法设置,提示找不到"javacpl.exe" 解决办法:删除C:\windows\system32\下的j ...
- (原创)VM中的CentOS6.4中安装CloudStack6.3①
CloudStack是一个功能强大.UI友好的开源云(IaaS)计算解决方案.自Ctrix将CloudStack捐献给 apache 后,一直持续高速发展,其社区活跃度已经渐渐赶上风头一时无两的另一开 ...
- 关于ellipsis多行换行的方案
WebKit浏览器或移动端的页面在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit- ...
- android 中theme和style的语法相关
1.theme和style都是一组属性的集合,用于定义文本.颜色.大小等显示风格.他们都是资源,可以用android系统级别的一些默认的风格和主题资源,你也可以自定义你自己的主题和风格资源. 2.自定 ...
- linux grep,sed,awk和diff的使用
1:grep//显示行 # grep 'main' /home/myhome/a.c//将a.c含有main的行显示出来 # grep -v 'main' /home/myhome/a.c //显示除 ...
- php日历
一.计算数据 1.new一个Calendar类 2.初始化两个下拉框中的数据,年份与月份 3.初始化要搜索的年份和月份 4.计算得出日历中每一天的数据信息,包括css.天数 <?php requ ...
- Apache2.4.6服务器安装及配置
一.系统环境 系统版本:Aliyun Linux release 5.7 内核版本:2.6.18-274.el5 apr版本:apr-1.4.8 apr-util版本:apr-util-1.5.2 p ...
- 《C专家编程》第一章——C：穿越时空的迷雾
这一章讲的是C语言的发展史,包括它是多么不经意的诞生,而后又经历了早期C.K&C.ANSI C的各种阶段,直到它现在形成的这个样子.C语言从来不是一门完美的语言,所以它一直在发展,直到今日,它 ...