一 外部引入文件：（全局注册）

 //建模版

  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组件示例的更多相关文章

  1. Vue.js 组件编码规范

    本规范提供了一种统一的编码规范来编写 Vue.js 代码.这使得代码具有如下的特性: 其它开发者或是团队成员更容易阅读和理解. IDEs 更容易理解代码,从而提供高亮.格式化等辅助功能 更容易使用现有 ...

  2. Vue.js 组件的三个 API：prop、event、slot

    组件的构成 一个再复杂的组件,都是由三部分组成的:prop.event.slot,它们构成了 Vue.js 组件的 API.如果你开发的是一个通用组件,那一定要事先设计好这三部分,因为组件一旦发布,后 ...

  3. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  4. 如何理解vue.js组件的作用域是独立的

    vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...

  5. VUE.JS组件化

    VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...

  6. 浅尝Vue.js组件(一)

    本篇目录: 组件名 组件注册 全局注册 基础组件的自动化全局注册 局部注册 在模块系统中局部注册 Prop 单向数据流 Prop验证 类型检查 非Prop特性 替换/合并已有的特性 禁用特性继承 自定 ...

  7. Vue.js组件的重要选项

    Vue.js组件的重要选项 实例化Vue对象一些很重要的选项,Vue的所有数据都是放在data里面的,Vue的参数是个对象,对象里面的字段叫做data,data里面也是对象,data也可以写作是thi ...

  8. 一个简单的Vue.js组件开发示例

    //创建属于自己的vue组件库 (function(Vue, undefined) { Vue.component("my-component", { template: '< ...

  9. Vue.js组件学习

    组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素.组件系统提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用. 一个简单组件例子(全局注册) &l ...

随机推荐

  1. matlab练习程序（简单多边形的核）

    还是计算几何, 多边形的核可以这样理解:这个核为原多边形内部的一个多边形,站在这个叫核的多边形中,我们能看到原多边形的任何一个位置. 算法步骤如下: 1.根据原多边形最大和最小的x,y初始化核多边形, ...

  2. loj 1002(spfa变形）

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=25828 题意:求所有点到给定的目标顶点的路径上的权值的最大值的最小 ...

  3. 初识WCF

    以前,总是说自己的基础知识不牢靠,就是因为自己总是不总结.昨天,学费交了,顿时感觉不一样了,心里有劲也有力了,知道了以前的自己到底为什么会那样了,因为没有压力. --题记 我参加过浩哥的招标项目,参加 ...

  4. UVA136 求第1500个丑数

    枚举大范围数据..暴力检查题目条件 #include <iostream> #include <cstdio> #include <vector> #include ...

  5. kylin查询出现日期对应不上的情况

    情况: 查询的是2016年1月2日的数据,但返回解析出来的数据确实是2号的,可是时间竟然变成了2016年1月1日. 解决: 是时区问题,修改本地时区 具体代码,主要是看加红加粗的: public st ...

  6. Linux中查看jdk版本

    linux查看java jdk安装路径和设置环境变量 windows: set java_home:查看JDK安装路径 java -version:查看JDK版本 linux: whereis jav ...

  7. Portlet简述

    一.Portlet是什么? Portlet是基于java的web组件,由portlet容器管理,并由容器处理请求,生产动态内容.Portals使用portlets作为可插拔用户接口组件,提供信息系统的 ...

  8. JSON 和 XML 优缺点的比较

    JSON 和 XML 优缺点的比较 1.JSON定义(JavaScript Object Notation) 一种轻量级的数据交换格式,具有良好的可读和便于快速编写的特性.可在不同平台之间进行数据交换 ...

  9. 06_Java多线程、线程间通信

    1. 线程的概念      1.1多进程与多线程 进程:一个正在执行的程序.每个进程执行都有一个执行顺序,该顺序是一个执行路径,或叫一个控制单元. 一个进程至少有一个线程. 线程:就是进程中的一个独立 ...

  10. 【面试题】TB

    动态库与静态库区别: 堆栈区别,这样区分的意义: 不用第三个变量,交换两个变量的值: 链表公共节点: 判断链表是否有环: 常用排序算法,哪个可以链表实现: 哪科学的好,感兴趣: 项目介绍,遇到的最大问 ...