（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" ...
随机推荐
- redis订阅与发布系统
一.概述 1.redis通过publish.subscribe等命令实现了订阅与发布模式. 2.这个功能提供两种信息机制,分别是订阅/发布到频道和订阅/发布到模式. 二.频道的订阅与信息发送 1.re ...
- Linux 中ifconfig和ip addr命令看不到ip
解决方案: 输入 vi /etc/sysconfig/network-scripts/ifcfg-ens33 将ONBOOT权限改为yes 保存退出,按Esc,输入:wq 重启网络服务,输入 sudo ...
- java之hibernate之配置讲解
1.映射文件:User.hbm.xml <!-- package 指向class中所有类的包名,可以直接在指定类名时同时指定包名 --> <hibernate-mapping pac ...
- C#通用公共类库ZXNetStandardDepot.Common
总结了一下写项目中遇到的各种方法,总结前辈们的经验,生成了该类库,引用net standard类库,支持net core/net framework. 使用方法 1.nuget 搜索 ZXNetSta ...
- Python接口自动化基础---环境准备
安装requests模块 pip install requests request帮助文档查看 import requests print(help(requests)) Help on packag ...
- OO——UML解析
目录 第四单元博客作业 一.前两次作业架构设计 1. 第一次作业 2. 第二次作业 二.架构设计以及对OO方法理解的演进 1. 表达式求导 2. 多线程电梯 3. 地铁线路查询 4. UML图的解析 ...
- 【iOS录音与播放】实现利用音频队列，通过缓存进行对声音的采集与播放
都说iOS最恶心的部分是流媒体,其中恶心的恶心之处更在即时语音. 所以我们先不谈即时语音,研究一下,iOS中声音采集与播放的实现. 要在iOS设备上实现录音和播放功能,苹果提供了简单的做法,那就是利用 ...
- redis3集群管理
以下操作基于redis3.X版本:Redis集群存储原理:Redis 集群使用数据分片(sharding),而非一致性哈希(consistency hashing)来实现,一个 Redis 集群包含 ...
- 【hadoop】在eclipse上运行WordCount的操作过程
序:本以为今天花点时间将WordCount例子完全理解到,但高估自己了,更别说我只是在大学选修一学期的java,之后再也没碰过java语言了 总的来说,从宏观上能理解具体的程序思路,但具体到每个代码有 ...
- c# IEnumerable集合