（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" ...
随机推荐
- js获取项目名称
//获取路径 var pathName=window.document.location.pathname; //截取,得到项目名称 var projectName=pathName.substrin ...
- iOS - WWDC18 iOS 自动生成强密码和自动填充验证码/密码
本文将介绍WWDC18 Automatic Strong Passwords and Security Code Autofill和WWDC17 Introducing Password AutoFi ...
- vue中使用iview组件库实现图片的上传
vue文件如下: iview中Upload 属性详情 https://www.iviewui.com/components/upload js文件 :
- VS2017 Git failed with a fatal error. error: open(".vs/xxxxxx/v15/Server/sqlite3/db.lock"): Permission denied fatal: Unable to process path .vs/xxxxxx/v15/Server/sqlite3/db.lock
具体错误信息:Git failed with a fatal error. error: open(".vs/xxxxxx/v15/Server/sqlite3/db.lock") ...
- Cephfs 部署 创建 metadata 池 data池
上一次部署了ceph分布式存储,接下来我们部署ceph的文件系统.Ceph文件系统至少需要两个RADOS池,一个用于数据,一个用于元数据. 创建metadata 池 后面数字表示 PG 和pgp数 c ...
- 码云和Git使用说明
Git下载网站: https://git-scm.com/download/win 码云网站 :https://gitee.com 下载Git,并一路下一步安装. 鼠标空白处右键点击,出现两个 ...
- WIN8输入法的问题
在win8下输入法的添加和删除,使用第三方的软件很难处理好,而且容易造成系统的不稳定.比如搜狗输入法有个输入法管理器. 正确的做法: 1.Win+C打开侧边栏,点击 设置,选择“更改电脑设置” 这个选 ...
- Office2016专业增强版永久激活
Office2016专业增强版永久激活码:Microsoft Office 2016 Pro Plus Retail Mak序列号XNTT9-CWMM3-RM2YM-D7KB2-JB6DVBHXN7- ...
- 软件测试过程中如何区分什么是功能bug，什么是需求bug，什么是设计bug？
问题描述: 测试过程中如何区分什么是功能bug,什么是需求bug,什么是设计bug? 精彩答案: 会员 土土的豆豆: 本期问题其实主要是针对不同方面或纬度上对于bug的一个归类和定位. 个人认为,从软 ...
- VS Code中配置Markdown
其实,对我来说是反过来的,我是为了使用Markdown而安装VS Code(虽然久仰大名) 安装VS Code 安装Markdown插件 使用篇 1. 安装vscode 之所以啰嗦一下,是因为据说安装 ...