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 更容易理解代码,从而提供高亮.格式化等辅助功能 更容易使用现有 ...
随机推荐
- hierarchical_mutex函数问题（C++ Concurrent in Action）
C++ Concurrent in Action(英文版)书上(No.52-No.53)写的hierarchical_mutex函数,只适合结合std::lock_guard使用,直接使用如果不考虑顺 ...
- vue todolist 封装localstorage
//封装操作localstorage本地存储的方法 模块化的文件 // nodejs 基础 var storage={ set(key,value){ localStorage.setItem(key ...
- 在线学习和在线凸优化（online learning and online convex optimization）—在线凸优化框架3
近年来,许多有效的在线学习算法的设计受到凸优化工具的影响. 此外,据观察,大多数先前提出的有效算法可以基于以下优雅模型联合分析: 凸集的定义: 一个向量 的Regret定义为: 如前所述,算法相对于竞 ...
- CentOS用户和用户组管理
groupadd grptest1 按照系统默认的gid创建组.根uid一样,gid也是从1000开始的. groupadd -g 1008 grptest2 创建gid=1008的用户组:g ...
- 2-java内省机制(Introspector)
来一个简单的示例吧 package com.my.test; import java.beans.BeanInfo; import java.beans.Introspector; import ja ...
- 第2章 GNS3和PacketTracer网络模拟器（1）_GNS3概述
1. 安装和配置GNS3 1.1 GNS3概述 (1)GNS3是一款具有图形化界面,可运行在多平台(包括Windows.Linux.Mac OS等)上面的网络虚拟软件. (2)可以在虚拟环境中运行Ci ...
- 最精简的自定义.net 开发框架
一. 通过自定义的HttpModule和HttpHandler,重写url,自定义路由规则,实现 Web API功能. 简单说 就是 请求路径 例如 service/method, 那么就指向当前应 ...
- TP微信扫码支付
1.官网下载php扫码支付adk,放在项目引入第三方类库中 2.配置config中相关参数 注意:可能会遇到问题 微信支付错误问题的解决:curl出错,错误码:60 Fatal error: Unca ...
- Solr高效利用：Solr实现SQL的查询与统计
1.如何高效使用Solr查询功能 ?2.单个字段分组统计如何实现? 3.IN条件查询有几种方式? 4.多个字段分组统计是否只支持count? Cloudera公司已经推出了基于Hadoop平台的查询统 ...
- WPF 获取文件夹路径，目录路径，复制文件，选择下载文件夹/目录
private void Border_MouseLeftButtonUp_4(object sender, MouseButtonEventArgs e) { //获取项目中文件 , System. ...