（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相关推荐

（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 ...
（29）打鸡儿教你Vue.js
web阅读器开发 epub格式的解析原理 Vue.js+epub.js实现一个简单的阅读器实现阅读器的基础功能字号选择,背景颜色有上一页,下一页的功能设置字号,切换主题,进度按钮电子书目录 ...
（1）打鸡儿教你Vue.js
当今世界不会Vue.js,前端必定路难走一个JavaScript MVVM库以数据驱动和组件化的思想构建的 Vue.js是数据驱动 HTML/CSS/JavaScript/ES6/HTTP协议/V ...
（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 重点看,重 ...
（13）打鸡儿教你Vue.js
一小时复习 vue.js是一个JavaScriptmvvm库,是以数据驱动和组件化的思想构建的,相比angular.js,vue.js提供了更加简洁,更加容易理解的api,如果习惯了jquery操作d ...

（15）打鸡儿教你Vue.js

请点赞！因为你的鼓励是我写作的最大动力！

（15）打鸡儿教你Vue.js相关推荐

最新文章

热门文章