06Vue.js快速入门-Vue组件化开发
组件其实就是一个拥有样式、动画、js逻辑、HTML结构的综合块。前端组件化确实让大的前端团队更高效的开发前端项目。而作为前端比较流行的框架之一，Vue的组件和也做的非常彻底，而且有自己的特色。尤其是她单文件组件开发的方式更是非常方便，而且第三方工具支持也非常丰富，社区也非常活跃，第三方组件也呈井喷之势。当然学习和使用Vue的组件也是我们的最重要的目标。
6.1. 全局扩展方法Vue.extend
Vue提供了一个全局的API，Vue.extend可以帮助我们对Vue实例进行扩展，扩展完了之后，就可以用此扩展对象创建新的Vue实例了。 类似于继承的方式。
语法：Vue.extend( options )
参数：
{Object} options
用法：
使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象[后面会细讲]。
data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数
下面是一个官网demo：
<div id="mount-point"></div>
<script>
// 创建构造器
var Profile = Vue.extend({
// 新的对象的模板，所有子实例都会拥有此模板
template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
data: function () { // 创建的Vue实例时，data可以是Object 也可以是Function，但是在扩展
return { // 的时候，data必须是一个函数，而且要返回值奥。
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
</script>
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')
// .$mount() 方法跟设置 el属性效果是一致的。
结果如下：
<p>Walter White aka Heisenberg</p>
综合案例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门之extend全局方法</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
var myVue = Vue.extend({
template: '<div>{{ name }} - {{ age }} - {{ mail }}</div>',
data: function () {
return {
name: 'malun',
age: '19',
mail: 'flydragonml@gmail.com'
};
}
});
var app = new myVue({
el: '#app'
});
</script>
</body>
</html>
6.2. 创建组件和注册组件
当然上面的方式只是能让我们继承Vue实例做一些扩展的动作。看Vue中如何创建一个组件并注册使用。
Vue提供了一个全局注册组件的方法：Vue.component。
语法： Vue.component( id, [definition] )
参数：
{string} id 组件的名字，可以当HTML标签用，注意组件的名字都是小写，而且最好有横线和字母组合。
{Function | Object} [definition] 组件的设置
用法：
注册或获取全局组件。注册还会自动使用给定的id设置组件的名称
// 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))
// 注册组件，传入一个选项对象（自动调用 Vue.extend）
Vue.component('my-component', { /* ... */ })
// 获取注册的组件（始终返回构造器）
var MyComponent = Vue.component('my-component')
简单demo：
<div id="example">
<!--组件直接跟普通的标签一样的使用。-->
<my-component></my-component>
</div>
// 注册一个组件
Vue.component('my-component', {
// 模板选项设置当前组件，最终输出的html模板。注意：有且只有一个根元素。
template: '<div>A custom component!</div>'
})
// 创建根实例
new Vue({
el: '#example'
})
那么我们注册一个组件自动帮我生成 label和radiobutton组合。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门之extend全局方法</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--组件名直接可以当标签使用。-->
<radio-tag rid="rBas" txt="篮球" val="1"></radio-tag>
<!--组件的属性也可以使用Vue的绑定的语法，下面是动态绑定数据给子组件-->
<radio-tag :rid="demoId" :txt="demoText" :val="demoVal"></radio-tag>
</div>
<script>
// 定义组件模板，模板必须有且只有一个根元素。
var temp = '<div><label v-bind:for="rid">{{ txt }}</label><input :id="rid" type="radio" v-bind:value="val"></div>';
// 注册一个全局的组件
Vue.component('radio-tag', { // 组件的名字不能有大写字母，跟React的曲别啊。另外组件名最好是小写字母加横线组合。
template: temp,
props: ['rid', 'txt', 'val'], // 设置组件的属性有哪些，定义标签的属性一致。
data: function () { // 注意属性名都得是小写，不然会不认的。
return { // 在组件的定义中data必须是函数，而且必须有返回值。
age: 19, // 此地方的 age 和 emial都是演示，并么有有到。
email: 'flydragonml@gmail.com'
}
}
});
// 初始化一个Vue实例
var app = new Vue({
el: '#app',
data: {
demoId: 'ft',
demoText: '足球',
demoVal: 2
}
});
</script>
</body>
</html>
注意结果点
- 组件的名字都必须是小写【其实是非必须，但是为了不麻烦就强制吧】！！！而且建议是小写字母和横线的组合比如： my-radiobtn
- 注册组件的时候，可以传入一个选项对象进行配置。其中
props是设置当前组件的属性，属性也都必须小写。属性是连接父容器和子组件的桥梁。 - 注意：属性名和组件的名字都要小写啊，不然vue不会认的。
- 编写组件代码最好配合Vue的chrome插件：vue-devtool
- 组件可以返还自己的数据，但是必须是函数。data必须是Function
6.3. 局部注册组件
全局注册组件就是使用全局API
Vue.componet(id, {....})就行了，当然我们有时候需要注册一个局部模块的自己用的组件。那么就可以用下面的方式了。
var Child = {
template: '<div>A custom component!</div>'
}
new Vue({
// ...
components: {
// <my-component> 将只在父模板可用
'my-component': Child
}
})
6.4. 组件的slot
使用组件的时候，经常需要在父组件中为子组件中插入一些标签等。当然其实可以通过属性等操作，但是比较麻烦，直接写标签还是方便很多。 那么Vue提供了slot协助子组件对父容器写入的标签进行管理。
当父容器写了额外的内容时， 如果子组件恰好有一个slot标签，那边子容器的slot标签会被父容器写入的内容替换掉。
比如下面的例子：
<!DOCTYPE html>
<<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门之extend全局方法</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--父容器输入标签-->
<my-slot>
<h3>这里是父容器写入的</h3>
</my-slot>
<!--父容器绑定数据到子容器的slot,这里的作用域是父容器的啊。-->
<my-slot>{{ email }}</my-slot>
<!--父容器什么都不传内容-->
<my-slot></my-slot>
</div>
<script>
// 反引号：可以定义多行字符串。
var temp = `
<div>
<h1>这里是子组件</h1>
<hr>
<slot>slot标签会被父容器写的额外的内容替换掉，如果父容器没有写入任何东西，此标签将保留！</slot>
</div>
`;
Vue.component('MySlot', { // 如果定义的组件为MySlot，那么用组件的时候：<my-slot></my-slot>
template: temp,
});
// 初始化一个Vue实例
var app = new Vue({
el: '#app',
data: {
email: 'flydragon@gmail.com'
}
});
</script>
</body>
</html>
最终结果：
<div id="app">
<div>
<h1>这里是子组件</h1>
<hr>
<h3>这里是父容器写入的</h3>
</div>
<div>
<h1>这里是子组件</h1>
<hr> flydragon@gmail.com
</div>
<div>
<h1>这里是子组件</h1>
<hr> slot标签会被父容器写的额外的内容替换掉，如果父容器没有写入任何东西，此标签将删除！
</div>
</div>
6.5. 单文件组件的使用方式介绍
通过上面我们定义组件的方式，就已经感觉很不爽了，尤其是模板的定义，而且样式怎么处理也没有很好的进行规整。 Vue可以通过Webpack等第三方工具实现单文件的开发的方式。当然这里会牵扯到很多es6的语法、第三方工具实现前端模块化等很多知识， 我们大概看一眼指导Vue的组件可以直接写一个文件中，其他地方就可以直接导入这个模块了。后面做项目的时候我还会再讲一下怎么用。
<template>
<div>
<nav class="navbar navbar-dark navbar-fixed-top">
</nav>
<div class="col-md-3 sidebar">
<ul>
<li v-for="item in list" >
<router-link :to="{ path: item.url }">{{ item.name }}</router-link>
</li>
</ul>
</div>
<div class="container-fluid content">
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
// 这里怎么回事
import Axios from 'axios'
export default {
name: 'app',
components: {
},
data: function () {
return {
list: []
}
},
mounted: function () { // 挂在完成后
this.$nextTick(function () {
Axios.get('/api/menulist', {
params: {
}
}).then(function (res) {
this.list = res.data
}.bind(this))
})
}
}
</script>
<style>
ul, li {
list-style: none;
}
.router-link-active {
background-color: #f6f6f6;
}
.navbar {
height: 50px;
background-color: #303030;
}
.content {
margin-top: 50px;
padding-left: 210px;
}
.sidebar {
background-color: #f5f5f5;
border-right: 1px solid #eee;
width: 200px;
}
@media (min-width: 768px) {
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
background-color: #f5f5f5;
border-right: 1px solid #eee;
}
}
</style>
单文件书写组件的方式必须要配合webpack之类的工具才行，所以这里暂时不讲解如何做，后面到项目阶段的时候再详细讲解。 不过你可以参考：Vue官网单文件组件
6.6. 组件总结
Vue的组件化还是做的比较彻底的。不像Angular1.0中的模块那么鸡肋。组件化确实让前端模块化开发更加容易实现， Vue的单文件开发组件的方式也是Vue的一大创新，也发非常好用。
联系老马
对应视频地址：https://chuanke.baidu.com/s5508922.html
老马qq： 515154084
老马微信：请扫码
06Vue.js快速入门-Vue组件化开发的更多相关文章
- Vue 入门之组件化开发
Vue 入门之组件化开发 组件其实就是一个拥有样式.动画.js 逻辑.HTML 结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue 的组件和也做的非常 ...
- 二、vue组件化开发（轻松入门vue）
轻松入门vue系列 Vue组件化开发 五.组件化开发 1. 组件注册 组件命名规范 组件注册注意事项 全局组件注册 局部组件注册 2. Vue调试工具下载 3. 组件间数据交互 父组件向子组件传值 p ...
- 08Vue.js快速入门-Vue综合实战项目
8.1. 前置知识学习 npm 学习 官方文档 推荐资料 npm入门 npm介绍 需要了解的知识点 package.json 文件相关配置选项 npm 本地安装.全局安装.本地开发安装等区别及相关命令 ...
- vue组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单 ...
- day69:Vue:组件化开发&Vue-Router&Vue-client
目录 组件化开发 1.什么是组件? 2.局部组件 3.全局组件 4.父组件向子组件传值 5.子组件往父组件传值 6.平行组件传值 Vue-Router的使用 Vue自动化工具:Vue-Client 组 ...
- Vue 组件化开发
组件化开发 基本概念 在最开始的时候,已经大概的聊了聊Vue是单页面开发,用户总是在一个页面上进行操作,看到的不同内容也是由不同组件构成的. 通过用户的操作,Vue将会向用户展示某些组件,也会隐藏某些 ...
- Vue 组件化开发之插槽
插槽的作用 相信看过前一篇组件化开发后,你对组件化开发有了新的认识. 插槽是干什么的呢?它其实是配合组件一起使用的,让一个组件能够更加的灵活多变,如下图所示,你可以将组件当作一块电脑主板,将插槽当作主 ...
- Vue组件化开发
Vue的组件化 组件化是Vue的精髓,Vue就是由一个一个的组件构成的.Vue的组件化设计到的内容又非常多,当在面试时,被问到:谈一下你对Vue组件化的理解.这时候又有可能无从下手,因此在这里阐释一下 ...
- 09Vue.js快速入门-Vue入门之Vuex实战
9.1. 引言 Vue组件化做的确实非常彻底,它独有的vue单文件组件也是做的非常有特色.组件化的同时带来的是:组件之间的数据共享和通信的难题. 尤其Vue组件设计的就是,父组件通过子组件的prop进 ...
随机推荐
- linux达人养成计划学习笔记（五）—— 关机和重启命令
一.shutdown 1.格式: shutdown [选项] 时间(now) 选项: -c: 取消前一个关机命令 -h: 关机 -r: 重启 2.程序放入后台执行: shutdown -r 时间 &a ...
- ubuntu(14.04) 下配置重写
1.开启rewrite模块,使用命令:a2enmod rewrite 2.在apache2.conf,配置你网站的目录(是目录而定)
- sql的行转列(PIVOT)与列转行(UNPIVOT) webapi 跨域问题 Dapper 链式查询 扩展 T4 代码生成 Demo (抽奖程序)
sql的行转列(PIVOT)与列转行(UNPIVOT) 在做数据统计的时候,行转列,列转行是经常碰到的问题.case when方式太麻烦了,而且可扩展性不强,可以使用 PIVOT,UNPIVOT比 ...
- 一步一步掌握线程机制(六)---Atomic变量和Thread局部变量
前面我们已经讲过如何让对象具有Thread安全性,让它们能够在同一时间在两个或以上的Thread中使用.Thread的安全性在多线程设计中非常重要,因为race condition是非常难以重现和修正 ...
- MYSQL内存评估
### MySQL Memory Calculator Procedure ### http://kedar.nitty-witty.com/blog/calculte-mysql-memory-us ...
- linux arm的高端内存映射
linux arm的高端内存映射(1) vmalloc 高端内存映射 与高端映射对立的是低端映射或所谓直接映射,内核中有关变量定义它们的它们的分界点,全局变量high_memory,该变量定义在m ...
- samba 服务器搭建
为了能在两台机器上共享代码,方便测试不同平台性能和搭建分布式的web server,今天耗费半天时间搭建一个samba服务器共享数据,要求开放写权限,但多次实验均告失败,最终在 鸟哥 的提醒下 检查发 ...
- iOS 9 学习系列: Xcode Code Coverage
Code coverage 是一个计算你的单元測试覆盖率的工具. 高水平的覆盖给你的单元測试带来信心.也表明你的应用被彻底的測试过了. 你可能写了几千个单元測试,但假设覆盖率不高.那么你写的这套測试可 ...
- 命令行运行python项目文件，报错：ModuleNotFoundError: No module named 'xxxx' 解决办法
在pycharm中写好了自动化测试脚本,并能在pycharm中正常运行,由于要考虑到无人值守时能自动执行,执行时就需要脱离pycharm,直接能用命令执行.但是直接用命令执行用例文件:python3 ...
- Eclipse 快速提取一个方法 （重构）
选择一块代码并将其转换为一个方法.Eclipse 会自动地推知方法参数及返回类型. 我们有的时候方法太大,但是自己复制粘贴重构又比较麻烦 eclispe拥有这个功能 alt+shift+m 也可以右键 ...