（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" ...
随机推荐
- idea 终端terminal修改git bash
1 Ctrl+Alt+s 打开设置修改shell path 2 Alt +12 或View + Tool Windows + Terminal 修改成功
- 8 search中的timeout参数
默认的search,是没有时间限制的.比如,一个search,可能要10分钟才能搜完,那么,es就会等10分钟,直到结果出来. 然而,在某些场景下,客户是等不了10分钟的.比如,电商网站,客户宁可 ...
- python3-使用requests模拟登录网易云音乐
# -*- coding: utf-8 -*- from Crypto.Cipher import AES import base64 import random import codecs impo ...
- 修改Excel脚本
批量修改Excel TODO: 批量修改Excel 功能: 将图片防止在本地,读取excel数据,拆分数据之后根本地照片名称对比,然后上传服务器,创建新得excel. #!/usr/bin/pytho ...
- Spring Boot 实战 —— MyBatis（注解版）使用方法
原文链接: Spring Boot 实战 -- MyBatis(注解版)使用方法 简介 MyBatis 官网 是这么介绍它自己的: MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过 ...
- C++线程同步之临界区
#include <iostream> #include <windows.h> using namespace std; CRITICAL_SECTION cs; // Lo ...
- HP-UX 解压缩tar.gz
对于tar.gz包分两步: gunzip *.tar.gz 解压为tar包 tar xf *.tar 解压完成
- 经典数据结构与算法在经典软件(linux kernel)中的应用
参考文章:Core Alorgithms deployed linux中的priority search tree数据结构研究 虚拟内存: 1.红黑树,管理与进程关联的vm_area_struct实例 ...
- git注册和基本命令
注册账户以及创建仓库 要想使用github第一步当然是注册github账号了.之后就可以创建仓库了(免费用户只能建公共仓库),Create a New Repository,填好名称后Create,之 ...
- Spring-Security-Oauth2 基于JDBC存储令牌和RBAC权限认证
相关配置来自李哥博客: https://funtl.com/zh/spring-security-oauth2/ (本文仅记录自己学习过程,说的不详细,可以观看李哥博客) 认证服务器和资源服务器 ...