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 ...
随机推荐
- SELF, self in CORE DATA
Predicate SELF Represents the object being evaluated. CORE DATA Retrieving Specific Objects If your ...
- C++中的new与delete
C++中对象数组创建时,主要注意的点有:虚函数和带参数的构造函数,当出现虚函数时,对象数组中如通过父对象指向子对象,因为需要做Slice,析构时会造成指针错误引发内存泄露.测试程序如下: class ...
- 系统中异常公共处理模块 in spring boot
最近在用spring boot 做微服务,所以对于异常信息的 [友好展示]有要求,我设计了两点: 一. 在业务逻辑代码中,异常的抛出 我做了限定,一般只会是三种: 1. OmcException // ...
- ln 软硬链接
链接 在谈软链接与硬链接之前,先来说说文件系统基础知识. Linux 系统中,一切皆文件. 文件包含两部分:文件属性与权限(inode),文件内容(data-block). 一个文件可由1个inode ...
- ionic的tabs
<ion-tabs class="tabs-icon-top/bottom(决定这个tabs是置于上面还是底部) tabs-color-active-positive(图标与字体色) ...
- 【转】使用Eclipse搭建Python开发环境
因为要进行自动化测试,所以要搭建Python开发环境.这里将使用Eclipse+pyDev进行搭建,在此作为笔记记录下来. 需要的组件: 1.Eclipse SDK 3.7(这里将不再叙述Eclips ...
- Spring Boot 框架@Temporal(TemporalType.DATE)
使用spring boot框架开发项目时,遇到这样一个问题: 查询pgSQL数据库中表A中某date数据类型的列B,想得到YYYY-MM-DD格式的日期,结果返回的为时间戳(长整型数据). 解决办法: ...
- jdb调试命令
常用调试命令: run GeoHashTest #带参数运行 stop at GeoHashTest:22 #断点GeoHashTest文件的22行 stop in GeoHashEncode.Enc ...
- Eclipse中的Link with Editor功能是如何实现
Eclipse中的Link with Editor功能是如何实现 - kaukiyou的专栏 - 博客频道 - CSDN.NEThttp://blog.csdn.net/kaukiyou/articl ...
- MyEclipse黑色主题
第一步:打开链接http://www.eclipsecolorthemes.org/选中一款:下载其中的epf格式. 如图: 在eclipse中打开:file > import > Gen ...