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从入门到进阶的笔记,方便一些新手从头开始开发的时候,可以参考一下. 写的或许是很简单的文章,提供给新手参考.暂时都是一些入门级别的. 以后会慢慢的加深,进阶,写出一些更好,更 ...
随机推荐
- 继承中成员变量和成员方法的访问特点-java se进阶篇 day01
1.继承中成员变量的访问特点 1.成员变量重名 如图 父类中有age变量,子类中也有age变量,这时打印age,出现的是10还是20呢? 答:根据就近原则,出现的是20 2.使用父类成员变量--sup ...
- ASP.NET之设置默认文档
通常... <!--Web.config--> <configuration> <!--指定默认文档 Start Author:JAnnn Time:2015-01-10 ...
- 又一款眼前一亮的Linux终端工具！
大家好,我是良许. 最近二舅视频刷爆了全网,大家有没去看呢?强烈推荐大家观看一波,也就 11 分钟,保证会触动你的泪点. 不过今天不讲二舅哈,还是来聊聊技术. 今天给大家介绍一款最近发现的功能十分强大 ...
- web自动化：Javascript操作页面元素
某些特殊情况下,使用selenium的api无法操作页面元素,可以通过js来完成 一．Js定位 js操作中的webelement通过console控制台来进行js定位: WebElement webe ...
- 智能语音备忘录：SpeechRecognition与gTTS的奇妙融合
引言:智能语音备忘录的时代已经到来 在这个信息爆炸的时代,我们每天需要处理大量的事务和信息.传统的文字记录方式虽然可靠,但在效率上往往难以满足快节奏生活的需求.想象一下,如果你能在驾车.散步或是灵感突 ...
- react项目vite报错:UnhandledPromiseRejectionWarning: SyntaxError: Unexpected token '??='
问题: vite报错:UnhandledPromiseRejectionWarning: SyntaxError: Unexpected token '??=' 今天clone一个vite的项目,安装 ...
- 倍增 & Tarjan 求解LCA
什么是LCA? 假设我们有一棵树: 1 / \ 2 3 / \ / 4 5 6 对于 \(2\) 和 \(6\) 的LCA,就是最近公共祖先,即为距离 \(2\) 和 \(6\) 最近的两个节点公有的 ...
- 82.7K star！大气炫酷UI开源项目，超级火！
嗨,大家好,我是小华同学,关注我们获得"最新.最全.最优质"开源项目和高效工作学习方法 shadcn/ui 是一款基于 Radix UI 和 Tailwind CSS 构建的现代化 ...
- HttpServletResponse相关
目录 返回给客户端数据:字节流和字符流 解决返回字节流和字符流乱码问题 万能解决乱码 文件下载 tomcat提供的默认下载方式 手动编写的DownloadServlet 返回给客户端数据:字节流和字符 ...
- 市盈率指标EP在A股市场的分析
因子经济金融特性 EP因子即市盈率因子,常被投资者使用的几个估值因子之一.一般使用PE,即Price to Earning, 维基百科上的解释:市盈率指每股市价除以每股盈利(Earning Per S ...