vue.js 组件引用之初级 之二
1. template 标签也可以实现替换，这样可以省去script标签了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./vue/vue.js"></script>
<title>Document</title>
</head>
<body>
<div class="box" id="box">
<aaa class="a"></aaa>
<bbb class="b"></bbb>
</div>
<template class="a" id="a">
<h3>这是一个有意思的设计aaa</h3>
<h3>这是一个有意思的设计aaa</h3>
</template>
<template class="b" id="b">
<h3>这是哪里的地球呢bbb</h3>
<h3>这是哪里的地球呢bbb</h3>
</template> <script>
new Vue({
el: "#box",
components: {
'aaa': {
template: '#a'
},
'bbb': {
template: '#b'
}
}
});
</script>
</body>
</html>
运行结果：
2.1 子组件引用父组件的数据
<body>
<div class="box" id="box">
<aaa class="a"> </aaa>
<input type="text" value="nihao">
</div>
<template class="a" id="a">
<input type="text" :value="uName"><br>
<input type="text" :value="uAge"><br>
</template>
<script>
new Vue({
el: "#box",
data: {
uName: "huanying2015",
uAge: 25
},
components: {
'aaa': {
template: "#a"
}
}
});
</script>
运行结果：
2.2 子组件引用父组件的数据（引用成功）： 父组件的数据是user-name ,子组件对应的是userName (驼峰式命名)
<body>
<div class="box" id="box">
<aaa class="a" :user-name="uName" :user-age="uAge"></aaa>
</div>
<template class="a" id="a">
<input type="text" :value="userName" ><br>
<input type="text" :value="userAge"><br>
</template>
<script>
new Vue({
el: "#box",
data: {
uName: 'huanying2015',
uAge: 25
},
components: {
aaa: {
template: '#a',
props: ['userName', 'userAge']
} }
});
</script>
</body>
运行结果：
3. 子组件引用父组件的数据，子组件和父组件的对应连接名相同，都使用小写字符串
<body>
<div class="box" id="box">
<aaa class="a" :username="uName" :userage="uAge"></aaa>
</div>
<template id="a">
<input type="text" class="ss" :value="username"> <br>
<input type="text" class="ss" :value="userage">
</template>
<script>
new Vue({
el: "#box",
data: {
uName: 'huanying2015',
uAge: 25
},
components: {
aaa: {
template: '#a',
props: ['username', 'userage']
}
}
});
</script>
</body>
运行结果：
4. 子组件引用父组件的数据，默认不会改变父组件的数据，而父组件的数据变化时，子组件的数据也跟着变化
<body>
<div class="box" id="box">
<h3>父组件</h3>
<input type="text" v-model="uName">
<input type="text" v-model="uAge">
<aaa class="a" :username="uName" :userage="uAge"></aaa>
</div>
<template class="a" id="a">
<h3>子组件</h3>
<input type="text" v-model="username" >
<input type="text" v-model="userage" >
</template>
<script>
new Vue({
el: "#box",
data: {
uName: 'huanying2015',
uAge: 25
},
components: {
aaa: {
template: '#a',
props: ['username', 'userage']
}
}
});
</script>
</body>
运行结果：
5. 子组件使用父组件的数据，实现父组件与子组件数据的相互绑定，相互影响，就是使用传递时的属性 sync
<body>
<div class="box" id="box">
<h3>父组件</h3>
<input type="text" name="uName" class="a" v-model="uName">
<input type="text" name="uAge" class="a" v-model="uAge">
<aaa class="a" :username.sync="uName" :userage.sync="uAge"></aaa>
</div>
<template class="a" id="a">
<h3>子组件</h3>
<input type="text" v-model="username">
<input type="text" v-model="userage">
</template>
<script>
new Vue({
el: "#box",
data: {
uName: 'huanying2015',
uAge: 25
},
components: {
aaa: {
template: '#a',
props: ['username', 'userage']
}
}
});
</script>
</body>
运行结果：
6. 父子组件的单次绑定，在传递数据时，使用 .once 属性
<body>
<div class="box" id="box">
<h3>父组件</h3>
<input type="text" v-model="uName">
<input type="text" v-model="uAge">
<aaa class="a" :username.once="uName" :userage.once="uAge"></aaa>
</div>
<template class="a" id="a">
<h3>子组件</h3>
<input type="text" v-model="username">
<input type="text" v-model="userage">
</template>
<script>
new Vue({
el: "#box",
data: {
uName: "huanying2015",
uAge: 25
},
components: {
aaa: {
template: "#a",
props: ['username', 'userage'],
}
}
});
</script>
</body>
运行结果：父组件和子组件的数据交互只是实现一次，其它时候，就取消绑定了
vue.js 组件引用之初级 之二的更多相关文章
- vue.js 组件引用之初级
1. 构造组件,及组件引用:1.1 构造一个组件,1.2 注册一个组件,1.3 实例化Vue()即引用Vue() <!DOCTYPE html> <html lang=" ...
- 偏前端-vue.js学习之路初级（二）组件化构建
vue.js 组件化构建 组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型.自包含和通常可复用的组件构建大型应用.仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树: ...
- 偏前端-vue.js学习之路初级（一）概念
首先--不推荐新手直接使用 vue-cli,尤其是在你还不熟悉基于 Node.js 的构建工具时. 新建一个html,引入一下js: <!-- 开发环境版本,包含了有帮助的命令行警告 -- ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- VUE.JS组件化
VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
- 浅尝Vue.js组件(一)
本篇目录: 组件名 组件注册 全局注册 基础组件的自动化全局注册 局部注册 在模块系统中局部注册 Prop 单向数据流 Prop验证 类型检查 非Prop特性 替换/合并已有的特性 禁用特性继承 自定 ...
- Vue.js 组件的三个 API：prop、event、slot
组件的构成 一个再复杂的组件,都是由三部分组成的:prop.event.slot,它们构成了 Vue.js 组件的 API.如果你开发的是一个通用组件,那一定要事先设计好这三部分,因为组件一旦发布,后 ...
- 如何理解vue.js组件的作用域是独立的
vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...
- Vue.js 组件编码规范
本规范提供了一种统一的编码规范来编写 Vue.js 代码.这使得代码具有如下的特性: 其它开发者或是团队成员更容易阅读和理解. IDEs 更容易理解代码,从而提供高亮.格式化等辅助功能 更容易使用现有 ...
随机推荐
- keystone认证服务
实验操作平台:OpenStack单节点操作 一.相关概念 1.认证(authentication) 认证是确认允许一个用户访问的进程 2.证书(credentials) 用于确认用户身份的数据 3.令 ...
- MariaDB基础命令
关闭防火墙和selinux #systemctl stop firewalld 安装服务端和客户端mariadb # yum install mariadb-server mariadb -y mar ...
- fragment--的生命周期
官网帮助文档链接: http://developer.Android.com/guide/components/fragments.html 主要看两张图,和跑代码 1,Fragment的生命周: 2 ...
- [UE4]透明按钮
Background Color的透明度设置为0,就能让按钮背景完全透明,但是按钮里面的子控件并不会跟着透明
- [UE4]AnimOffset偏移动画
在每个在偏移动画要用到的动画文件中设置中设置上图属性. 也可以选择多个动画文件:
- SCCM2012 R2实战系列之五：发现方法
打开SCCM2012的控制台 点击左侧栏的“管理”选项,然后展开“层次结构配置”,点击“发现方法”来配置客户端发现. 勾选“启用Active Directory林发现”.“发现Active Direc ...
- javascript-关于赋值的那点事
var ary1=[3,4]; var ary2=ary1; ary2[0]=1; ary2=[6,5] console.log(ary1) console.log(ary2) 个人测试出的结果是:更 ...
- 《Linux 性能及调优指南》1.1 Linux进程管理
https://blog.csdn.net/ljianhui/article/details/46718835 本文为IBM RedBook的Linux Performanceand Tuning G ...
- ECharts动态加载堆叠柱状图的实例
一.引入echarts.js文件(下载页:http://echarts.baidu.com/download.html) 二.HTML代码: <div style="width: 10 ...
- linux 下的ssh免密登陆设置
一,原理 说明: A为linux服务器a B为linux服务器b 每台linux都有ssh的服务端和客户端,linux下的ssh命令就是一个客户端 我们常用ssh协议来进行登陆或者是文件的拷贝,都需要 ...