1. 组件的作用：为了能够让功能与功能之间互不影响，使代码更加清晰整洁
  2.  
  3.  1 <!DOCTYPE html>
  4.  <html lang="en">
  5.  <head>
  6.  <meta charset="UTF-8">
  7.  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  9.  <title>Document</title>
  10.  <script src="../vue2.4.4.js"></script>
  11.  </head>
  12.  
  13.  <body>
  14.  <!-- 定义一个vue的管理区块，（MVVM中的View） -->
  15.  <div id="app">
  16.      <!-- <login></login> -->
  17.  
  18.      <template id="tlogin">
  19.          <div>
  20.              用户名: <input type="text">
  21.              密码： <input type="text">
  22.          </div>
  23.      </template> 
  24.  
  25.      <!--<script type="x-template" id="tlogin">
  26.              <div>
  27.                      用户名: <input type="text">
  28.                      密a码： <input type="text">
  29.              </div>
  30.          </script>-->
  31.  </div>
  32.  
  33.  </body>
  34.  
  35.  <script>
  36.      //公有组件
  37.      //注意:
  38.      // 1.所有的模板代码都必须要有一个根标签
  39.      // 2.如果组件的名称如果首字母大写
  40.          // a.所有的字母全部小写
  41.          // b.如果首字母和内部如果也有大写将大写字母改为小写并且在这个字母之前加上一个"-"
  42.              //UserName  -> user-name 
  43.  
  44.      // 1.0将组件的定义与组成分两步来执行
  45.      // 定义：
  46.      // Vue.extend({
  47.      //     template:"组件的html代码"
  48.      // });
  49.      /*var login = Vue.extend({
  50.          template:"<h1>我是login</h1>"
  51.      });
  52.      // 注册：
  53.      // 参数一： 当前组成组件的名称
  54.      // 参数二： 组件对象
  55.      //Vue.component("login",login); // 向Vue中注册组件
  56.      Vue.component("login",login);
  57.     */
  58.  
  59.     //2.0组件的定义和组成一步到位
  60.     // 使用组件时候，一定要给组件一定要加上根标签 否则会报编译错误
  61.      /*Vue.component("login",{
  62.         template:"<h1>login</h1>"
  63.     });*/
  64.  
  65.     // 以上两种写template麻烦
  66.     //3.0组件的使用三 （！！！常用）
  67.     Vue.component("login",{
  68.         template:"#tlogin"
  69.     });

  71.     //4.0 组件的使用四（了解即可）
  72.  //    Vue.component("login",{
  73.  //         template:"#tlogin"
  74.  //    });
  75.  
  76.      // 实例化vue对象（MVVM中的View Model）
  77.      new Vue({
  78.          // vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
  79.          el:'#app',
  80.          data:{
  81.          // 数据 （MVVM中的Model）
  82.          },
  83.          methods:{
  84.  
  85.          }
  86.      })
  87.  </script>
  88.  </html>

Vue--公有组件以及组件的使用和特点的更多相关文章

  1. Vue.js——60分钟组件快速入门（上篇）

    组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML ...

  2. Vue.js——60分钟组件快速入门（下篇）

    概述 上一篇我们重点介绍了组件的创建.注册和使用,熟练这几个步骤将有助于深入组件的开发.另外,在子组件中定义props,可以让父组件的数据传递下来,这就好比子组件告诉父组件:"嘿,老哥,我开 ...

  3. 转： Vue.js——60分钟组件快速入门（上篇）

    转自: http://www.cnblogs.com/keepfool/p/5625583.html Vue.js——60分钟组件快速入门(上篇)   组件简介 组件系统是Vue.js其中一个重要的概 ...

  4. Vue.js学习 Item11 – 组件与组件间的通信

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...

  5. vue实现简单表格组件

    本来想这一周做一个关于vuex的总结的,但是由于朋友反应说还不知道如何用vue去写一个组件,所以在此写写一篇文章来说明下如何去写vue页面或者组件.vue的核心思想就是组件,什么是组件呢?按照我的理解 ...

  6. vue.js2.0 自定义组件初体验

    理解 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...

  7. 浅谈Vue不同场景下组件间的数据交流

    浅谈Vue不同场景下组件间的数据“交流”   Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...

  8. vue.js学习之组件（下篇）

    本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...

  9. 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...

  10. vue.js实例对象+组件树

    vue的实例对象 首先用js的new关键字实例化一个vue el: vue组件或对象装载在页面的位置,可通过id或class或标签名 template: 装载的内容.HTML代码/包含指令或者其他组件 ...

随机推荐

  1. 实用的 JavaScript 调试小技巧

    ‘debugger;’ 除了console.log,debugger就是另一个我很喜欢的快速调试的工具,将debugger加入代码之后,Chrome会自动在插入它的地方停止,很像C或者Java里面打断 ...

  2. eclipse下项目复制改名注意事项

    当在Eclipse下复制Web工程时 1.需要修改复制后新工程源码文件下 .settings 文件夹下的org.eclipse.wst.common.component中的内容为本工程名,明细如图:

  3. 解决IDEA中，maven依赖不自动补全的问题

    转载: 作者:七个榴莲链接:https://www.jianshu.com/p/46a423bdde31来源:简书 遇到的问题:Maven依赖不自动补全 在idea上使用maven插件时,发现在pom ...

  4. 【核心核心】8.Spring【AOP】注解方式

    1.引入jar包 sprig框架基础包+JUntil整合包+日志包+AOP包 spring的传统AOP的开发的包 spring-aop-4.2.4.RELEASE.jar com.springsour ...

  5. python 运行python -m pip list 出现错误

    1.出现如下错误提示 2解决方案 解决方法:(windows)在C:\Users{用户名}\ 目录下创建名称为pip的文件夹,里面创建文本文件,内容为 [list] format=columns 保存 ...

  6. Joomla - akeeba backup（joomla网站备份、迁移扩展）

    在所有 joomla 的网站中,如果只允许安装一个扩展,估计超过90%的人都会选择 akeeba backup,这基本是每个joomla都必备的一个扩展: akeeba backup 的更多资料可以到 ...

  7. Java 普通代码块，构造代码块，静态代码块

    具体百度... 这里只记下,构造构造代码块在构造函数之前执行,每创建一个对象则执行一次. 静态代码块属于类,而不是对象,只执行一次.

  8. ArcMap应用——三维场景中井盖的属性配置

    在精细三维场景中,有地面(包括道路面.马路牙子).有部件数据(包括井盖).我们会发现有马路牙子的地方比道路面要高出一部分,比如0.1米,但是雨水井盖却有些在路面上.有些在道路以外.就是说在道路面上的井 ...

  9. Python爬虫工程师必学——App数据抓取实战

    Python爬虫工程师必学 App数据抓取实战 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身没问题,大 ...

  10. mysql 对数据库操作的常用sql语句

    1.查看创建某个数据库的 创建语句 show create database mysql 这个sql语句的意思是 展示创建名为mysql的数据库的 语句.执行之后如下图所示 仿造上面这个创建语句 创建 ...