vue.js快速入门（三）~组件入门~
组件系统是vue的一个重要的概念。他可以让我们使用独立的，可复用的小组件来构建大的复杂的应用，任何应用都可以看作是组件树。组件可以看做是自定义的Html代码。可扩展的html，封装可重用的html。
使用组件的使用分为三步
创建组件构造器，调用Vue.extend()创建，这是Vue构造器的扩展。他有个选项对象。选项对象有个template属性，定义组件要渲染的html
注册组件 ，Vue.compontent()注册
使用组件（在Vue实例的作用范围内使用组件，必须挂载在实例下，否则不生效）
举例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app1">
<my-component></my-component>
</div>
<div id="app2">
<my-component></my-component>
</div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js">
</script>
<script>
var mycomponent = Vue.extend({
template:'<div>啊啊啊，苍天大地</div>'
});
var app1 = new Vue({
el: '#app1',
components : {'my-component' :mycomponent}
})
//以下就没效果
var app1 = new Vue({
el: '#app2',
})
</script> </html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
table tr td{
border:1px solid gray;
padding:10px; }
table{
border-collapse:collapse;
width:800px;
table-layout:fixed;
}
tr.firstLine{
background-color: lightGray;
}
</style>
<body>
<!--view层 -->
<div id="app">
<parent-component></parent-component>
</div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js">
</script>
<script >
/* Model层 */
var exampleData ={
exchange: 6.4,
rmb:0
}
//创建子组件
var Child =Vue.extend({
template:'<p>这是个子组件</p>'
})
//创建父组件
var Parent =Vue.extend({
//在Parent组件里使用 <child-component>标签
template:'<p>这是个父组件 <child-component></child-component></p>',
//局部注册子组件
components:{
'child-component':Child
}
})
//全局注册下Parent组件
Vue.component('parent-component',Parent)
new Vue({
//...
el:'#app' })
</script>
</html>
结果如下：
1，//局部注册子组件
components:{
'child-component':Child
}
这是在子组件注册到父组件中，并将子组件的标签设置为 child-component
2，template:'<p>这是个父组件 <child-component></child-component></p>',
这就是说 在父组件内以标签形式使用子组件。在页面用标签渲染父组件的内容，同时子组件的内容也被渲染出来。
上面的例子，子组件是在父组件里注册的，它只能在父组件里的template里使用。
下面示范下两种错误的使用子组件的例子
错误1：
<div id="app">
<parent-component>
<child-component></child-component>
</parent-component>
</div>
解释下为什么无效呢？
当子组件注册到父组件下时候，Vue.js会编译好父组件的模板，模板的内容已经决定了父组件即将要渲染的HTML
<parent-component>
..... </parent-component>相当于他的子标签只能当做普通的HMTL执行，他不是普通的html标签，就会被忽略。
上面注册有点繁琐：
Vue简化了上面的步骤，如下举例子：
Vue.component('parent-component',{template:'<p>这是个父组件呢 <child-component></child-component></p>'})
第一个参数是标签名称，第二个是选项对象，使用选项对象的template属性定义组件模板。
这种方法Vue在背后自动调用Vue.extend()
但是呢，尽管上面简化了步骤，还是得在template里拼接html，依然麻烦。
Vue提供了两种方式将定义在js里的html模板分离出来。script标签和template标签
1.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
table tr td{
border:1px solid gray;
padding:10px; }
table{
border-collapse:collapse;
width:800px;
table-layout:fixed;
}
tr.firstLine{
background-color: lightGray;
}
</style>
<body>
<!--view层 -->
<div id="app">
<my-component>
</my-component>
</div>
<script type="text/x-template" id="my-component">
<div>This is my-component</div>
</script>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js">
</script>
<script >
/* Model层 */
//全局注册下Parent组件
Vue.component('my-component',{
//template选项现在不是html元素，而是一个id，Vue.js根据这id查找对应的元素，然后把这个元素内的html作为模板
//进行编译
template:'#my-component'
})
new Vue({
//...
el:'#app' })
</script>
</html>
2，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
table tr td{
border:1px solid gray;
padding:10px; }
table{
border-collapse:collapse;
width:800px;
table-layout:fixed;
}
tr.firstLine{
background-color: lightGray;
}
</style>
<body>
<!--view层 -->
<div id="app">
<my-component>
</my-component>
</div>
<template id="my-component">
<div>This is my-component</div>
</template>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js">
</script>
<script >
/* Model层 */
//全局注册下Parent组件
Vue.component('my-component',{
//template选项现在不是html元素，而是一个id，Vue.js根据这id查找对应的元素，然后把这个元素内的html作为模板
//进行编译
template:'#my-component'
})
new Vue({
//...
el:'#app' })
</script>
</html>
上面两种效果近似。重点看script和template标签的差别。
传入Vue构造器的多数选项也可以在Vue.compontent()和Vue.extend（）中使用。不过有两个例外。data和el选项例外。
Vue.js规定，定义组件的选项时，data和el选项必须使用函数。
不然会报错。但是测试下如下代码没报错。为什么？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
table tr td{
border:1px solid gray;
padding:10px; }
table{
border-collapse:collapse;
width:800px;
table-layout:fixed;
}
tr.firstLine{
background-color: lightGray;
}
</style>
<body>
<!--view层 -->
<div id="app">
<my-component>
</my-component>
</div>
<template id="my-component">
<div>This is my-component</div>
</template>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js">
</script>
<script >
/* Model层 */
//全局注册下Parent组件
Vue.component('my-component',{
template:'#my-component',
data:{
a:1
}
})
new Vue({
//...
el:'#app' })
</script>
</html>
如果让组件的data选项指向一个对象，意味着所有的组件共用一个data。应该使用一个函数作为data选项，让这个函数返回一个新对象。
引子：虽然Vue常用于双向绑定，互相影响，但是有单向绑定怎么办呢？父组件影响子组件，子组件修改的影响不了父组件。
引出props选项：
props基础：
组件的作用域都是孤立的，这意味着不能且不应该直接在子组件的模板里直接用父组件的数据。用prop把数据传给子组件。
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head> <body>
<!--view层 -->
<div id="app">
<my-component v-bind:my-name="name" v-bind:my-age="age">
</my-component>
</div>
<template id="mycomponent">
<table>
<tr>
<th colspan="2">
子组件数据
</th>
</tr>
<tr>
<td>my name</td>
<td>{{ myName }}</td>
</tr>
<tr>
<td>my age</td>
<td>{{ myAge }}</td>
</tr>
</table>
</template>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js">
</script>
<script >
/* Model层 */ var vm =new Vue({
//...
el:'#app',
data:{
name:'小章',
age:23
},
components:{'my-component':{
template:'#mycomponent',
props:['myName','myAge']
}
} })
</script> </html>
注意一点：
子组件的props选项时候需要是驼峰命名法。对应的HTML不分大小写，用-隔离。像上面用法。对应起来。
props单向影响联系。
下面例子演示影响修改父组件数据影响。
vue.js快速入门（三）~组件入门~的更多相关文章
- Vue.JS快速上手（组件生命周期）
一.什么是组件 组成网页独立功能基本单元(片段), 复用.维护.性能, Vue.js中的组件就是一个Vue的实例,Vue中的组件包含data/methods/computed. 一个Vue.js的应用 ...
- Vue.JS快速上手（组件间的通信）
前言 Vue采用的是组件化思想,那么这些组件间是如何通信的呢?下面详细介绍一下. 所谓组件间通信,不单单是我们字面上理解的相互传递数据,这里还包括一个组件访问另一个组件的实例方法等,如父组件通过ref ...
- Vue.js+vue-element搭建属于自己的后台管理模板：Vue.js快速入门（二）
Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...
- Vue.js 快速入门
什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备 我推荐 ...
- Vue.js快速入门
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...
- Vue.js—快速入门
Vue.js是什么 Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目 ...
- Vue.js——快速入门Vuex
一. 什么是Vuex? Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化. 上图中绿色虚线包裹起 ...
- Vue.js——快速入门
Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使 ...
- Vue.js—快速入门及实现用户信息的增删
Vue.js是什么 Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目 ...
- vue.js最最最基础的入门案例
打算自己写一点vue.js从入门到进阶的笔记,方便一些新手从头开始开发的时候,可以参考一下. 写的或许是很简单的文章,提供给新手参考.暂时都是一些入门级别的. 以后会慢慢的加深,进阶,写出一些更好,更 ...
随机推荐
- 【Git】基本操作
一.Git 基础 1.Git 介绍 Git 是目前世界上最先进的分布式版本控制系统. 版本控制系统: 设计师在设计的时候做了很多版本 经过了数天去问设计师每个版本都改了些啥,设计师此时可能就说不上来了 ...
- lombok用法
加入 maven 依赖 <dependency> <groupId>org.projectlombok</groupId> <artifactId>lo ...
- 武汉工程大学2020GPLT选拔赛（重现赛）
L2-4 缘之空 1.使用倍增法求最近公共祖先,然后利用公共祖先计算两点的树上距离 2.但是此题并没有提供根节点,所以要先找到根节点以后才可以进行倍增法求lca /** - swj - * /> ...
- win11开启hyper-v安装windows虚拟机
序言: 这周要居家办公了, 趁周末赶紧配置办公环境,因为公司注重安全保密,所以要用对应安全软件,我就干脆整台虚拟机来运行这些东西吧. 开启hyper-v服务 好像是由于电脑装的是windows家庭版, ...
- .NET 原生驾驭 AI 新基建实战系列（二）：Semantic Kernel 整合对向量数据库的统一支持
1. 引言 在人工智能(AI)应用开发迅猛发展的今天,向量数据库作为存储和检索高维数据的重要工具,已经成为许多场景(如自然语言处理.推荐系统和语义搜索)的核心组件. 对于.NET生态系统的开发者而言, ...
- MQTT消息传递过程中，序列化协议如何选择？文本序列化还是二进制序列化协议。
字符串消息的序列化 在上一篇文章中,我们使用MQTTnet 框架,实现了一个MQTT服务器.MQTT发布者进程.MQTT订阅者进程.在消息传递过程中,我们将控制台的字符串直接传递.因为MQTT是应用层 ...
- Fortify工具安装以及使用
工具简介: Fortify是一款强大的静态代码扫描分析工具,其发现代码漏洞缺陷的能力十分强悍,主要是将代码经过编译,依托于其强大的内置规则库来发现漏洞的.Fortify 是一个静态的.白盒的软件源代 ...
- 3.4K star！全能PDF处理神器开源！文档转换/OCR识别一键搞定
嗨,大家好,我是小华同学,关注我们获得"最新.最全.最优质"开源项目和高效工作学习方法 PDF-Guru 是一款开箱即用的全能型PDF处理工具,支持跨平台文档转换.智能OCR识别. ...
- 看完这章你也会黑盒edu通杀
负责声明: 请勿利用文章内的相关技术从事非法测试,由于传播.利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失,均由使用者本人负责,所产生的一切不良后果与文章作者无关.该文章仅供学习用途 ...
- js技术之“自定义包含方案”
调用 // 用于判断包含 function diaoyong(arr, str){ // 初始化 var sizes = ['L','XL','S','M']; for (var i = 0; i & ...