Vue.js组件示例
一 外部引入文件：（全局注册）
//建模版
var mycomponent=Vue.extend(
{template:"<div><a href='#'>我爱Javascript!</div>"}
); //注册组件
Vue.component('my-component',mycomponent);
页面引用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../../vue.js"></script>
<!-- 加载自定义元素封装的html模板 -->
<script src="exm.js"></script> </head>
<body>
<div id="exm">
<my-component></my-component>
</div> <script>
//渲染时自动解析自定义元素及绑定内容
var vm=new Vue(
{
el:"#exm" }
);
</script> </body>
</html>
二 局部注册：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../../vue.js"></script>
</head>
<body>
<div id="exm">
<far-component></far-component>
<!-- <my-component></my-component> -->
</div> <script>
var myComponent=Vue.extend(
{
template:"<div>我的Javascript</div>"
}
);
var far=Vue.extend(
{
template:"<div>我爱Javascript!<my-component></my-component></div>",
components:
{
"my-component":myComponent //不用全局注册myComponent,这里在far-component中局部注册了myComponent，并只能far-compoennt元素中解析
}
}
);
/* Vue.component("my-component",myComponent);//全局注册后，亦可以全局使用*/
Vue.component("far-component",far); new Vue(
{
el:"#exm"
}
);
</script> </body>
</html>
Vue.js组件示例的更多相关文章
- Vue.js 组件编码规范
本规范提供了一种统一的编码规范来编写 Vue.js 代码.这使得代码具有如下的特性: 其它开发者或是团队成员更容易阅读和理解. IDEs 更容易理解代码,从而提供高亮.格式化等辅助功能 更容易使用现有 ...
- Vue.js 组件的三个 API：prop、event、slot
组件的构成 一个再复杂的组件,都是由三部分组成的:prop.event.slot,它们构成了 Vue.js 组件的 API.如果你开发的是一个通用组件,那一定要事先设计好这三部分,因为组件一旦发布,后 ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- 如何理解vue.js组件的作用域是独立的
vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...
- VUE.JS组件化
VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
- 浅尝Vue.js组件(一)
本篇目录: 组件名 组件注册 全局注册 基础组件的自动化全局注册 局部注册 在模块系统中局部注册 Prop 单向数据流 Prop验证 类型检查 非Prop特性 替换/合并已有的特性 禁用特性继承 自定 ...
- Vue.js组件的重要选项
Vue.js组件的重要选项 实例化Vue对象一些很重要的选项,Vue的所有数据都是放在data里面的,Vue的参数是个对象,对象里面的字段叫做data,data里面也是对象,data也可以写作是thi ...
- 一个简单的Vue.js组件开发示例
//创建属于自己的vue组件库 (function(Vue, undefined) { Vue.component("my-component", { template: '< ...
- Vue.js组件学习
组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素.组件系统提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用. 一个简单组件例子(全局注册) &l ...
随机推荐
- 【POI xls Java map】使用POI处理xls 抽取出异常信息 --java1.8Group by ---map迭代 -- 设置单元格高度
代码处理逻辑: 代码流程: 1.首先需要创建一个实体 用来存储 相关信息 package com.sxd.test.unusualName; public class NameEntity { pri ...
- minix3（一）安装以及编辑文件
作为一条通信狗,最近开始自学操作系统.听说用MINIX3学操作系统很好,就决定跟UCSB的课程试试. 首先在虚拟机上安装MINIX3. 开始用的VM Station,按照百度文库里安装minix3的教 ...
- SQL初级第三课（上）
先建立一个表 create table Student --学生(Sno char(3) primary key , --学生学号Sname ...
- CDN（内容分发网络）是什么？
尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快.更稳定.其目的是使用户可就近取得所需内容,解决Internet网络拥挤的状况,提高用户访问网站的响应速度. 解决CDN缓 ...
- js小例子（多字溢出，省略号表示）
实现了div中字数较多,显示不下的时候,用省略号来表示,并且可以展开和收起: <html> <head> <meta http-equiv="Content-T ...
- [POJ1015]Jury Compromise
题目大意:要求你从n个人中选出m个,每个人有两个值p[i],D[i],要求选出的人p总和与D总和的差值最小.若有相同解,则输出p总+D总最大的方案. 动态规划. 一直在想到底是n枚举外面还是m放外面, ...
- COGS1752 [BOI2007]摩基亚Mokia（CDQ分治 + 二维前缀和 + 线段树）
题目这么说的: 摩尔瓦多的移动电话公司摩基亚(Mokia)设计出了一种新的用户定位系统.和其他的定位系统一样,它能够迅速回答任何形如“用户C的位置在哪?”的问题,精确到毫米.但其真正高科技之处在于,它 ...
- CF460 A. Vasya and Socks
A. Vasya and Socks time limit per test 1 second memory limit per test 256 megabytes input standard i ...
- 【Cocos2d-x游戏开发】浅谈游戏中的坐标系
无论是开发2D还是开发3D游戏,首先必须弄清楚坐标系的概念.在Cocos2d-x中,需要了解的有OpenGL坐标系.世界坐标系和节点坐标系. 1.UI坐标系 IOS/Android/Windows ...
- aspx与ashx
ashx在VS的中文版是新建“一般处理程序”,其实是一个实现类System.Web.IHttpHandler接口的类.而任何一个实现了IHttpHandler接口的类都能作为一个外部请求的目标程序.H ...