（15）打鸡儿教你Vue.js
组件化vue.js
组件单向绑定
组件双向绑定
组件单次绑定
创建组件构造器
注册组件
使用组件
Vue.extend()
Vue.component()
使用组件
<div id="app">
<my-component></my-component>
</div>
<script src="js/vue.js"></script>
// 创建一个组件构造器
var myComponent = Vue.extend({
template: '<div>my</div>'
})
// 注册组件
Vue.component('my-component', myComponent)
new Vue({
el: '#app'
});
全局注册和局部注册
局部注册的方式：
new Vue({
el: '#app',
components: {
'my-component' : myComponent
}
});
| | <!DOCTYPE html> |
| | <html> |
| |
|
| | <head> |
| | <meta charset="UTF-8"> |
| | <title></title> |
| | <link rel="stylesheet" href="[styles/demo.css](https://keepfool.github.io/vue-tutorials/02.Components/Part-1/styles/demo.css)" /> |
| | </head> |
| |
|
| | <body> |
| |
|
| | <div id="app"> |
| |
|
| | <table> |
| | <tr> |
| | <th colspan="3">父组件数据</td> |
| | </tr> |
| | <tr> |
| | <td>name</td> |
| | <td>{{ name }}</td> |
| | <td><input type="text" v-model="name" /></td> |
| | </tr> |
| | <tr> |
| | <td>age</td> |
| | <td>{{ age }}</td> |
| | <td><input type="text" v-model="age" /></td> |
| | </tr> |
| | </table> |
| | <my-component v-bind:my-name="name" v-bind:my-age="age"></my-component> |
| | </div> |
| |
|
| | <template id="myComponent"> |
| | <table> |
| | <tr> |
| | <th colspan="3">子组件数据</td> |
| | </tr> |
| | <tr> |
| | <td>my name</td> |
| | <td>{{ myName }}</td> |
| | <td><input type="text" v-model="myName" /></td> |
| | </tr> |
| | <tr> |
| | <td>my age</td> |
| | <td>{{ myAge }}</td> |
| | <td><input type="text" v-model="myAge" /></td> |
| | </tr> |
| | </table> |
| | </template> |
| | </body> |
| | <script src="[js/vue.js](https://keepfool.github.io/vue-tutorials/02.Components/Part-1/js/vue.js)"></script> |
| | <script> |
| | var vm = new Vue({ |
| | el: '#app', |
| | data: { |
| | name: 'keepfool', |
| | age: 28 |
| | }, |
| | components: { |
| | 'my-component': { |
| | template: '#myComponent', |
| | props: ['myName', 'myAge'] |
| | } |
| | } |
| | }) |
| | </script> |
| |
|
| | </html> |
组件注册语法糖
Vue.component()
// 全局注册：
Vue.component('my-component', {
template: '<div>this is the first component!</div>'
})
var vm1=new Vue({
el: '#app'
})
局部注册：
var vm = new Vue({
el: '#app',
components: {
// 局部注册
'my-component': {
template: '<div></div>'
},
}
})
| <!DOCTYPE html> |
| | <html> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <title></title> |
| | </head> |
| | <body> |
| | <div id="app1"> |
| | <my-component1></my-component1> |
| | </div> |
| | ---------------app1和ap2的分割线--------------- |
| | <div id="app2"> |
| | <my-component1></my-component1> |
| | <my-component2></my-component2> |
| | <my-component3></my-component3> |
| | </div> |
| | </body> |
| | <script src="[js/vue.js](https://keepfool.github.io/vue-tutorials/02.Components/Part-1/js/vue.js)"></script> |
| | <script> |
| | |
| | // 全局注册，my-component1是标签名称 |
| | Vue.component('my-component1',{ |
| | template: '<div>This is the first component!</div>' |
| | }) |
| | |
| | var vm1 = new Vue({ |
| | el: '#app1' |
| | }) |
| | |
| | var vm2 = new Vue({ |
| | el: '#app2', |
| | components: { |
| | // 局部注册，my-component2是标签名称 |
| | 'my-component2': { |
| | template: '<div>This is the second component!</div>' |
| | }, |
| | // 局部注册，my-component3是标签名称 |
| | 'my-component3': { |
| | template: '<div>This is the third component!</div>' |
| | } |
| | } |
| | }) |
| | |
| | </script> |
| | </html> |
| |
<!DOCTYPE html>
<html>
<body>
<div id="app">
<my-component></my-component>
</div>
<script type="text/x-template" id="myComponent">
<div>this is a component</div>
</script>
</body>
<script src="js/vue.js"></script>
<script>
Vue.component('my-component',{
template: '#myComponent'
})
new Vue({
el: '#app'
})
</script>
</html>
使用标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<template id="myComponent">
<div>this is a component</div>
</template>
</body>
<script src="js/vue.js"></script>
<script>
Vue.component('my-component',{
template: '#myComponent'
})
new Vue({
el: '#app'
})
</script>
</html>
使用props
var vm = new Vue({
el: '#app',
data: {
name: 'jeskson',
age: 0
},
components: {
'my-component': {
template: '#myComponent',
props: ['myName', 'myAge']
}
}
})
如果我们想使父组件的数据，则必须先在子组件中定义props属性
定义子组件的html模板：
<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>
将父组件数据通过已定义好的props属性传递给子组件：
<div id="app">
<my-component v-bind:my-name="name" v-bind:my-age="age"></my-component>
</div>
在prop中定义的myName，在用作特性时需要转换为my-name
prop的绑定类型
单向绑定-修改了子组件的数据，没有影响父组件的数据
<my-component v-bind:my-name="name" v-bind:my-age="age"></my-component">
<template id="myComponent">
<table>
<tr>
<ht colspan="3">子组件数据</td>
</tr>
<tr>
<td>my name</td>
<td>{{ myName}}</td>
<td><input type="text" v-model="myName"/></td>
<tr>
<td>my age</td>
<td>{{myAge}}</td>
<td><input type="text" v-model="myAge"/></td>
</tr>
</table>
</template>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="styles/demo.css" />
</head>
<body>
<div id="app">
<table>
<tr>
<th colspan="3">父组件数据</td>
</tr>
<tr>
<td>name</td>
<td>{{ name }}</td>
<td><input type="text" v-model="name" /></td>
</tr>
<tr>
<td>age</td>
<td>{{ age }}</td>
<td><input type="text" v-model="age" /></td>
</tr>
</table>
<my-component v-bind:my-name="name" v-bind:my-age="age"></my-component>
</div>
<template id="myComponent">
<table>
<tr>
<th colspan="3">子组件数据</td>
</tr>
<tr>
<td>my name</td>
<td>{{ myName }}</td>
<td><input type="text" v-model="myName" /></td>
</tr>
<tr>
<td>my age</td>
<td>{{ myAge }}</td>
<td><input type="text" v-model="myAge" /></td>
</tr>
</table>
</template>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'keepfool',
age: 28
},
components: {
'my-component': {
template: '#myComponent',
props: ['myName', 'myAge']
}
}
})
</script>
</html>
双向绑定
使用.sync
<my-component v-bind:my-name.sync="name" v-bind:my-age.sync="age"></my-component>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="styles/demo.css" />
</head>
<body>
<div id="app">
<table>
<tr>
<th colspan="3">父组件数据</td>
</tr>
<tr>
<td>name</td>
<td>{{ name }}</td>
<td><input type="text" v-model="name" /></td>
</tr>
<tr>
<td>age</td>
<td>{{ age }}</td>
<td><input type="text" v-model="age" /></td>
</tr>
</table>
<my-component v-bind:my-name.sync="name" v-bind:my-age.sync="age"></my-component>
</div>
<template id="myComponent">
<table>
<tr>
<th colspan="3">子组件数据</td>
</tr>
<tr>
<td>my name</td>
<td>{{ myName }}</td>
<td><input type="text" v-model="myName" /></td>
</tr>
<tr>
<td>my age</td>
<td>{{ myAge }}</td>
<td><input type="text" v-model="myAge" /></td>
</tr>
</table>
</template>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'keepfool',
age: 28
},
components: {
'my-component': {
template: '#myComponent',
props: ['myName', 'myAge']
}
}
})
</script>
</html>
单次绑定：
使用.once
<my-component v-bind:my-name.once="name" v-bind:my-age.once="age"></my-component>
修改了数据，也不会传导给子组件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="styles/demo.css" />
</head>
<body>
<div id="app">
<table>
<tr>
<th colspan="3">父组件数据</td>
</tr>
<tr>
<td>name</td>
<td>{{ name }}</td>
<td><input type="text" v-model="name" /></td>
</tr>
<tr>
<td>age</td>
<td>{{ age }}</td>
<td><input type="text" v-model="age" /></td>
</tr>
</table>
<my-component v-bind:my-name.once="name" v-bind:my-age.once="age"></my-component>
</div>
<template id="myComponent">
<table>
<tr>
<th colspan="3">子组件数据</td>
</tr>
<tr>
<td>my name</td>
<td>{{ myName }}</td>
<td><input type="text" v-model="myName" /></td>
</tr>
<tr>
<td>my age</td>
<td>{{ myAge }}</td>
<td><input type="text" v-model="myAge" /></td>
</tr>
</table>
</template>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'keepfool',
age: 28
},
components: {
'my-component': {
template: '#myComponent',
props: ['myName', 'myAge']
}
}
})
</script>
</html>
请点赞！因为你的鼓励是我写作的最大动力！
吹逼交流群：711613774
（15）打鸡儿教你Vue.js的更多相关文章
- （29）打鸡儿教你Vue.js
web阅读器开发 epub格式的解析原理 Vue.js+epub.js实现一个简单的阅读器 实现阅读器的基础功能 字号选择,背景颜色 有上一页,下一页的功能 设置字号,切换主题,进度按钮 电子书目录 ...
- （26）打鸡儿教你Vue.js
weex框架的使用 1.weex开发入门 2.weex开发环境搭建 3.掌握部分weex组件模块 4.了解一些vue基本常见语法 5.制作一个接近原生应用体验的app weex介绍 安装开发环境 We ...
- （22）打鸡儿教你Vue.js
vue.js 单页面,多页面 Vue cli工具 复杂单页面应用Vue cli工具 交互设计,逻辑设计,接口设计 代码实现,线上测试 git clone,git int 创建分支,推送分支,合并分支 ...
- （21）打鸡儿教你Vue.js
组件化思想: 组件化实现功能模块的复用 高执行效率 开发单页面复杂应用 组件状态管理(vuex) 多组件的混合使用 vue-router 代码规范 vue-router <template> ...
- （19）打鸡儿教你Vue.js
了解vue2.x的核心技术 建立前端组件化的思想 常用的vue语法 vue-router,vuex,vue-cli 使用vue-cli工具 Vue框架常用知识点 vue核心技术 集成Vue 重点看,重 ...
- （18）打鸡儿教你Vue.js
介绍一下怎么安装Vue.js vue.js Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性. Vue.js是一个渐进的,可逐步采用的Jav ...
- （17）打鸡儿教你Vue.js
vue-router <a class="list-group-item" v-link="{ path: '/home'}">Home</a ...
- （13）打鸡儿教你Vue.js
一小时复习 vue.js是一个JavaScriptmvvm库,是以数据驱动和组件化的思想构建的,相比angular.js,vue.js提供了更加简洁,更加容易理解的api,如果习惯了jquery操作d ...
- （12）打鸡儿教你Vue.js
组件 语法格式如下: Vue.component(tagName, options) <tagName></tagName> <div id="app" ...
随机推荐
- GRE
第一个技术是GRE,全称Generic Routing Encapsulation,它是一种IP-over-IP的隧道技术.它将IP包封装在GRE包里,外面加上IP头,在隧道的一端封装数据包,并在通路 ...
- 一个 Vim 重度用户总结的 vim 超全指南
我本人是 Vim 的重度使用者,就因为喜欢上这种双手不离键盘就可以操控一切的feel,Vim 可以让我对文本的操作更加精准.高效. 对于未使用过 Vim 的朋友来说,可能还无法体会到这种感觉.由于使用 ...
- JavaScript的变量和常量
1.什么是常量? 常量表示一些固定不变的数据 现实生活中人的性别其实就可以看做是常量, 生下来是男孩一辈子都是男孩, 生下来是女孩一辈子都是女孩 2.JavaScript中常量的分类 2.1整型常量 ...
- springboot2.1.3 + redisTemplate + Lock 操作 redis 3.0.5
近期在整合springboot + redis 的功能,本来想用原生的jedit api,最后想想有点 low,搜了一把,boot已经提供给我们操作的方法,那就是 使用 redisTemplate 或 ...
- 18，flask项目中使用celery
导包: from celery import Celery from celery.result import AsyncResult app.config['CELERY_BROKER_URL'] ...
- c# Directory类的常用方法
- Python 中 plt 画柱状图和折线图
1. 背景 Python在一些数据可视化的过程中需要使用 plt 函数画柱状图和折线图. 2. 导入 import matplotlib.pyplot as plt 3. 柱状图 array= np. ...
- python 私有和保护成员变量如何实现？—— "单下划线 " 开始的成员变量叫做保护变量，意思是只有类实例和子类实例能访问到这些变量；" 双下划线 " 开始的是私有成员，意思是只有类对象自己能访问，连子类对象也不能访问到这个数据
默认情况下,Python中的成员函数和成员变量都是公开的(public),在python中没有类似public,private等关键词来修饰成员函数和成员变量.在python中定义私有变量只需要在变量 ...
- 用 Python 加密文件
生活中,有时候我们需要对一些重要的文件进行加密,Python 提供了诸如 hashlib,base64 等便于使用的加密库. 但对于日常学习而言,我们可以借助异或操作,实现一个简单的文件加密程序,从而 ...
- 关于C3P0-mySQL关于url的细节问题
1.为url设置?useUnicode=true&characterEncoding=UTF-8 为了统一编码,我们会为数据库封装的实体类加上上面的那句话,但是C3P0数据库连接池是xml配置 ...