Vue.js组件
　　组件的作用：组件是自定义元素，可扩展html元素，封装可复用的代码。
　　组件的注册一定要在初始化根实例之前，负责组件是不起作用的。
　　全局组件在初始化实例的时候被使用
　　局部组件仅在实例/组件作用域中可用

1、组件的注册

　　

 <!DOCTYPE html>

 <html>

 <head lang="en">

         <meta charset="UTF-8">

          <title></title>

          <script type="text/javascript"  src="vue.js"></script>

      </head>

  <body>

      <div id="id">

         <global></global>

         <father></father>

      </div>

  </body>

  <script>

        Vue.component('global',{

            template: '<div>注册全局组件</div>'

        })

        var partial = { //局部组件仅在一个实例/组件的作用域中可用

            template: '<div>注册局部组件</div>'

        }

        new Vue({

            el: '#id',

            components:{

                'father':partial

            }

        })

      </script>

  </html>

2、DOM模板解释说明

当使用 DOM 作为模版时（例如，将 el 选项挂载到一个已存在的元素上）, 你会受到 HTML 的一些限制，因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模版内容。尤其像这些元素 <ul> ，<ol>，<table> ，<select> 限制了能被它包裹的元素， 而一些像 <option> 这样的元素只能出现在某些其它元素内部。

这时需要用到特殊的is属性

<table>

  <my-row>...</my-row>

</table>

<!--上面的组件是无效的-->

<table>

  <tr is="my-row"></tr>

</table>

<!--上面的组件使用is属性才能被解析->

3、通过Vue构造器传入的各种选项大多数都可以在组件里用。 data 是一个例外，它必须是函数。

 <!DOCTYPE html>

 <html>

 <head lang="en">

         <meta charset="UTF-8">

          <title></title>

          <script type="text/javascript"  src="vue.js"></script>

      </head>

  <body>

      <div id="id">

          <simple-counter></simple-counter>

          <simple-counter></simple-counter>

          <simple-counter></simple-counter>

      </div>

  </body>

  <script>

      var data = { counter: 0 }

      Vue.component('simple-counter', {

          template: '<button v-on:click="counter += 1">{{ counter }}</button>',

          // 技术上 data 的确是一个函数了，因此 Vue 不会警告，

          data: function () {

              //所有组件都是返回同意个对象

            //  return data

              //为每个组件返回全新的对象

              return{

                  counter:0

              }

          }

      })

        new Vue({

            el: '#id'

        })

      </script>

  </html>

Vue 什么是组件的更多相关文章

  1. Vue 给子组件传递参数

    Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div clas ...

  2. Vue.js说说组件

    什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTM ...

  3. Vue.js多重组件嵌套

    Vue.js多重组件嵌套 Vue.js中提供了非常棒的组件化思想,组件提高了代码的复用性.今天我们来实现一个形如 <app> <app-header></app-head ...

  4. 基于Vue封装分页组件

    使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} ...

  5. webpack入坑之旅（五）加载vue单文件组件

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  6. vue单文件组件的构建

    在很多Vue项目中,我们使用 Vue.component 来定义全局组件,这种方式在很多中小规模的项目中运作的很好. 但当在更复杂的项目中,就有了很大的弊端. 我们就可以用文件扩展名 .vue的单文件 ...

  7. 【原】vue单文件组件互相通讯

    在vue中,我们可以把一个页面各个部分单独封装起来,做成各种小组件,然后加载,这样的好处是代码维护起来比较容易,重复的代码多处调用! 在一个vue项目中,单文件组件以.vue形式文件命名 每个组件之间 ...

  8. vue.js之组件（上篇）

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

  9. [js高手之路] vue系列教程 - 组件定义与使用上部(7)

    组件是vue框架比较核心的内容,那么什么是组件呢? 通俗点讲:组件是由一堆html, css, javascript组成的代码片段, 作用是为了实现模块的重用 组件的基本用法: <div id= ...

  10. Vue自己写组件——Demo详细步骤

    公司近期发力,同时开了四五个大项目,并且都是用Vue来做的,我很荣幸的被分到了写项目公用模块的组,所以需要将公用的部分提取成组件的形式,供几个项目共同使用,下面详细讲一下写Vue组件的具体步骤. 一. ...

随机推荐

  1. 《从零开始学Swift》学习笔记（Day 42）——构造函数调用规则

    原创文章,欢迎转载.转载请注明:关东升的博客 在构造函数中可以使用构造函数代理帮助完成部分构造工作.类构造函数代理分为横向代理和向上代理,横向代理只能在发生在同一类内部,这种构造函数称为便利构造函数. ...

  2. 巨蟒python全栈开发django13:中间件部分

    1.回顾昨日内容 2.session认证装饰器 3.django整个流程 4.中间件简单应用 5.简单统计访问次数 6.中间件其他方法 7.orm单表内容回顾

  3. C 和 C++ 的标准库分别有自己的 locale 操作方法，C 标准库的 locale 设定函数是 setlocale()，而 C++ 标准库有 locale 类和流对象的 imbue() 方法（gcc使用zh_CN.GBK，或者zh_CN.UTF-8，VC++使用Chinese_People's Republic of China.936或者65001.）

    转自:http://zyxhome.org/wp/cc-prog-lang/c-stdlib-setlocale-usage-note/ [在此向原文作者说声谢谢!若有读者看到文章转载时请写该转载地址 ...

  4. UML初览（转）

    原文:UML初览 本章使用一个简单的例子对UML中所使用的概念和视图进行初览.本章的目的是要将高层UML概念组织成一系列较小的视图和图表来可视化说明这些概念,说明如何用各种不同的概念来描述一个系统以及 ...

  5. PAT 1068. 万绿丛中一点红(20)

    对于计算机而言,颜色不过是像素点对应的一个24位的数值.现给定一幅分辨率为MxN的画,要求你找出万绿丛中的一点红,即有独一无二颜色的那个像素点,并且该点的颜色与其周围8个相邻像素的颜色差充分大. 输入 ...

  6. Impala SQL 语言元素（翻译）

    摘要: http://www.cloudera.com/content/cloudera-content/cloudera-docs/Impala/latest/Installing-and-Usin ...

  7. GAN综述

    生成式对抗模型GAN (Generativeadversarial networks) 是Goodfellow等[1]在 2014年提出的一种生成式模型,目前已经成为人工智能学界一个热门的研究方向,著 ...

  8. 20170421 F110 常见问题

    F110常見問題以及處理方式 1. Vendor中沒有與F110中相同的Payment method 解決辦法: 在Vendor主檔中維護Payment method 2. 結報被Block 解決辦法 ...

  9. Android 编译错误——布局 Error parsing XML: not well-formed (invalid token)

    在修改了Android布局文件后,编译出现Error parsing XML: not well-formed (invalid token). 首先先排查xml文件的编码格式是否为UTF-8, &l ...

  10. 【python】获取列表中最长连续数字

    最近开发遇到一个功能需求,目的是要获取一个AI分析结果中最长连续帧,比如一个视频中连续3帧有人,那么我认为这个视频就是有人,我就要判断这个视频帧列表中是否有连续的三帧有人.本质就是获取列表中的最长连续 ...