由于工作需要,最近在写一些前端的东西。经过向开发经验丰富的前端工程师的请教之后，得出一个结论----2016年前端被玩坏了，其实对于我来说我并不是太了解这句话的深刻含义，只是觉得是不是因为前端技术突飞猛进，导致前端的技术太多太杂。不管这些了，至少我不打算淌前端这趟浑水。

　　我们先说一下我学vue.js的原因，最近由于需要想写一个微信公众平台，前端部分由于只学过angularjs，但是通过测试发现并不适合用来做微信公众平台webapp的开发，因为这个框架并不能算是轻量级框架，如果你要求每一个访问微信公众平台的关注者每次都下载几百KB的lib库，我想这并不科学。所以决定使用vuejs，一个轻量级的前端mvmm框架。今天我们首先对vuejs的组件进行初步的学习。

1.IS特性，　　首先我们来解释一下组件这个基本的概念：组件可以扩展html，封装可重用的代码。同时组件也可以自定义元素，来达到对html的高度封装。当然组件也可以是原生的html代码，并以is特性扩展。其实这里如果大家之前有学过angularjs的话很好理解关于组件的封装这个特性，类似与angularjs中的自定义指令。但是is特性是什么意思？我们通过一个简单的例子来理解一下啊。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <title>Title</title>

</head>

<body>

    <div id="app">

        <h1 is="test"></h1>

    </div>

    <script type="text/javascript">

        var mytest = Vue.extend({

            template: '<h1>{{a}}</h1>',

            data: function () {

                return{

                    a: "this is a test"

                }

            }

        });

        var vm = new Vue({

            el: "#app",

            components: {

                "test": mytest

            }

        });

    </script>

</body>

</html>

我们解释一下这段代码： 首先是一个div元素，并且我们应该指定一个id或者class，这是为了我们下面能定位Vue初始化作用范围。接下来我们从创建Vue对象开始，提供了两个参数，el：指定了对象多用的元素，components指定了我们在元素范围内的组件，是一些k-v对，这里就是is特性的对应规则，我们通过html元素中is制定的值来映射到我们创建的组件中，这就是我们前面说的is特性。

2.组件构造：　　上面我们简单的介绍了一下组件的概念，下面我们来介绍一下组件的构造过程，语法结构如下：

　　A：　　创建组件：var myComponent = var.extend({.......});

　　B: 　　  将构造器用作组件：Var.component（“my-component",myComponent);

　　当然此时我们只需要对上面的代码进行小改动即可完成这种映射，我们只需要将html中<h1 is="test"></h1>换为我们创建的组件即可，如下：<test></test>。当然这里我们只是一个例子，在实战中我们还应该注意自定义标签的命名规则，应该尽量符合w3c的命名规则，即××-×××,例如：my-component（虽然并不强制）。

3.流程总结： 我们在进行自定义组件的时候应该尽量保持这样一个流程：

　　A: 　　定义组件：

var myComponent = Vue.extend({

    template: <h1>test</h1>

)}

　　B: 　　注册： 就是将我们自定义的组件与标签之间进行映射：　

var.component（”my-component",mycomponent);

　　C:　　创建vue实例，并在html中使用我们自定义的组件对应的标签。

4.局部注册：　　有时间我们并不是一个组件中只能包含html代码，在开发的过程中我们可能会在不同的组件中调用一些共同的代码，但是我们又不想重复来写这段程序。这样我们就可以把我们的这段共同代码封装成一个组件，在其他组件中进行局部注册即可。我们来看一个例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <title>Title</title>

</head>

<body>

    <div id="app">

        <my-component></my-component>

    </div>

    <script type="text/javascript">

        var son = Vue.extend({

            template: '<span>I am son</span>'

        });

        var father = Vue.extend({

            template: '<h1>I am father<my-son></my-son></h1>',

            components: {

                'my-son':son

            }

        })

        Vue.component("my-component",father);

        var vm = new Vue({

           el:'#app'

        });

    </script>

</body>

</html>

　　我们讲解一下语法： 为了让组件son能够正常的显示出来，我们需要在father中使用components属性，并在属性中对son进行注册，然后我们在father的template中进行调用。

5.　　组件构造选项问题：　　组件在构造的时候，我们应该注意它的选项问题，传入Vue构造器的多数参数也可以同时传入到组件构造器中，除了data和el两个参数。如果我们在使用的时候简单的采用var data={a：××}这样的做法的时候，我们将会发现这样一个问题，我们构造的组件将会在全局共享data数据。正确的做法是：

　　A：   data：我们的正确做法是使data称为一个函数，并且在函数中返回对象：eg：data：function{ return{a:1}};

　　B: 　 el： 我们必须制定el为一个函数，并且返回el对应的元素

vue入门(一)----组件的更多相关文章

  1. Vue 入门之组件化开发

    Vue 入门之组件化开发 组件其实就是一个拥有样式.动画.js 逻辑.HTML 结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue 的组件和也做的非常 ...

  2. vue 入门1 组件管理

    全局 组件.局部组件 // Vue.component('todo-list',{ // template:'<li >item</li>' // }); //全局 // va ...

  3. vue入门——组件基础todolist

    1. 以下是 todolist 的例子,没有用到组件:下面的3 会通过组件拆分todolist <!DOCTYPE html> <html lang="en"&g ...

  4. vue入门：（组件）

    模板:(template)模板声明了数据和最终展现给用户的DOM之间的映射关系. 初始数据:(data)一个组件的初始数据状态.对于可复用的组件来说,通常是私有的状态. 接收外部参数:(props)组 ...

  5. vue入门学习（基础篇）

    vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...

  6. VUE 入门笔记

    前端的MVVM概念今年来也算是如火如荼,了解完 MVVM的概念,也该找个去尝试下 首先我先试了下 国内小而美的 VUE 试着照着文档敲出入门文件,内容都在注释里 <!doctype html&g ...

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

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

  8. Vue 入门指南 JS

    Vue 入门指南 章节导航 英文:http://vuejs.org/guide/index.html 介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式 ...

  9. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

随机推荐

  1. linux使用酷我在线听音乐

    一般linux系统自带音频播放器只能管理本地音乐,无法在线听歌.在线音乐如百度音乐盒,下载歌曲需要登录,比较麻烦.在github里有一个酷我音乐的开源项目,可以安装在linux系统下.链接地址:htt ...

  2. Unity3D之Mesh（六）绘制扇形、扇面、环形

    前言: 绘制了圆,就想到绘制与之相关的几何图形,以便更灵活的掌握Mesh动态创建模型的机制与方法. 一.分析: 首先,结合绘制圆的过程绘制环形: 圆形是由segments个等腰三角形组成的(上一篇中, ...

  3. Python-unittest参数化

    做接口测试的时候,同一个接口,输入的参数一样,参数值不一样,这时候,写多个case就是冗余的,就可以用参数化来实现,第三方模块有这个实现参数化的功能,安装pip  install nose-param ...

  4. 2017-2018-1 20179215《Linux内核原理与分析》第五周作业

    一.视频学习 1.系统调用的三层皮:xyz(API).system call(中断向量).sys_xyz(不同种类的服务程序). 2.Libc库定义个一些API引用了封装例程(wrapper rout ...

  5. spark提交异常日志分析

    java.lang.NoSuchMethodError: org.apache.spark.sql.SQLContext.sql(Ljava/lang/String;)Lorg/apache/spar ...

  6. Sublime 实践

    1.下载开发版:http://www.sublimetext.com/dev 2.安装Package control: (1)按键ctrl+~ (2)在命令行中输入:  import urllib2, ...

  7. java web项目创建

    https://www.cnblogs.com/kangjianwei101/p/5621738.html

  8. mysql命令之一：mysql常用命令之一

    一.登录 1.本地登录:MySQL 连接本地数据库,用户名为“root”,密码“123”(注意:“-p”和“123” 之间不能有空格) C:\>mysql -h localhost -u roo ...

  9. Unreal引擎术语表

    转自:http://www.cnblogs.com/hmxp8/archive/2012/02/10/2345274.html Unreal引擎术语表 转载自UDN: ‍Actor - 一个可以放置在 ...

  10. winfrom实现控件全屏效果

    用常规方法实现全屏显示时,由于采用的三方控件导致界面顶端一直有一条半透明的类似标题栏的东西无法去除,原因一直没找到. 下面综合整理下网上两位博主的用WindowsAPI实现全屏的方法: 控件全屏显示: ...