vue入门(一)----组件
由于工作需要,最近在写一些前端的东西。经过向开发经验丰富的前端工程师的请教之后,得出一个结论----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入门(一)----组件的更多相关文章
- Vue 入门之组件化开发
Vue 入门之组件化开发 组件其实就是一个拥有样式.动画.js 逻辑.HTML 结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue 的组件和也做的非常 ...
- vue 入门1 组件管理
全局 组件.局部组件 // Vue.component('todo-list',{ // template:'<li >item</li>' // }); //全局 // va ...
- vue入门——组件基础todolist
1. 以下是 todolist 的例子,没有用到组件:下面的3 会通过组件拆分todolist <!DOCTYPE html> <html lang="en"&g ...
- vue入门:(组件)
模板:(template)模板声明了数据和最终展现给用户的DOM之间的映射关系. 初始数据:(data)一个组件的初始数据状态.对于可复用的组件来说,通常是私有的状态. 接收外部参数:(props)组 ...
- vue入门学习(基础篇)
vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...
- VUE 入门笔记
前端的MVVM概念今年来也算是如火如荼,了解完 MVVM的概念,也该找个去尝试下 首先我先试了下 国内小而美的 VUE 试着照着文档敲出入门文件,内容都在注释里 <!doctype html&g ...
- webpack入坑之旅(五)加载vue单文件组件
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- Vue 入门指南 JS
Vue 入门指南 章节导航 英文:http://vuejs.org/guide/index.html 介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式 ...
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
随机推荐
- STL头文件有哪些及简单介绍
#include <iostream>标准输入输出cin cout等 #include <algorithm> 算法库 如sort find等 #include <vec ...
- Codeforces 478D Red-Green Towers:dp
题目链接:http://codeforces.com/problemset/problem/478/D 题意: 给你r个红方块和g个绿方块,让你用这些方块堆一个塔. 最高层有1个方块,每往下一层块数+ ...
- Jquery 取值,赋值学习总结
<h2>获取和设置文本框值:</h2> <input type="button" value="赋值文件框" id="v ...
- mysql数据库更新
在使用mysql数据库的时候,A方使用一个版本,B方在使用一个版本数据库进行开发使用,B方在开发的时候,有新的需求,需要添加表字段和所需要的表.但是A方已经在使用之前的版本数据库并且数据库里面有真实的 ...
- Linux 网卡操作与安全初始化
一.Linux网络相关概念和修改IP地址的方法 1.1 网卡命名方式 CENTOS6的网卡命名方式: 它会根据情况有所改变而非唯一且固定,在CENTOS6之前,网络接口使用连续号码命名: eth0. ...
- PHP中怎样让数组以字母为键值来递增
//小写字母 $key = 97; $arr = array(); for($i=1;$i<=26;$i++){ $arr[chr($key)] = $i; $key++; } print_r( ...
- C语言小程序(四)、杨辉三角
输入要显示的杨辉三角的行数,会打印出金字塔型的杨辉三角,不过行数太多的话,效果不太好,可以再调整一下格式控制. #include <stdio.h> #include <stdlib ...
- Mybatis学习--XML映射配置文件
学习笔记,选自Mybatis官方中文文档:http://www.mybatis.org/mybatis-3/zh/configuration.html MyBatis 的配置文件包含了影响 MyBat ...
- ffmpeg捕捉摄像头发送rtmp
打印 DirectShow 支持的设备列表(true 可用1替换): ffmpeg -list_devices true -f dshow -i dummy 本计算机打印出的信息如下:[dshow @ ...
- 搭建 Http Dynamic Streaming 点播/直播服务器
1. HTTP Origin Module的处理数据流: a) 客户端发送媒体索引请求到Apache.例如: http://www.example.com/media/ ...