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 更容易理解代码,从而提供高亮.格式化等辅助功能 更容易使用现有 ...
随机推荐
- docker启动时报错Error response from daemon: driver failed programming external connectivity on endpoint *
公司服务器由于断电重启,部署在docker服务上的一些web服务需要重新开启容器, [root@localhost ~]# docker ps CONTAINER ID IMAGE COMMAND C ...
- 关于Centos7 firewalld防火墙开放端口后仍不能访问ftp和nginx的问题解决
我在阿里轻量应用服务器搭建ftp服务器这篇博客中把防火墙换为iptables,因为当时无论我怎么设置firewalld,就是无法访问ftp服务器,今天在翻看其他博客的时候,突然发现firewalld有 ...
- at android.view.LayoutInflater.createViewFromTag的错误原因
创建对话框时出现下面的错误: Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'boolean ...
- geoserver 常见问题笔记
1.cql查询示例,根据点查询返回code的空间查询示例 http://192.168.0.226:8080/geoserver/lgum/ows?service=WFS&version=1. ...
- mysql数据库数据备份与恢复
备份数据: C:\Users\Administrator>mysqldump -uroot --password -v test01 test02 >e:\temp\\a3.sql Ent ...
- 插件开发-滑条(slide)开发
自己一直很喜欢开发组件,只是OPP学的不是很精,自己在项目中用别人的框架进行项目开发,难免受制于人,也许这就是个人实际项目需求和框架提供的多少有点不符,引导我自己尝试开发一些自己常用的组件,话不多说, ...
- Python: 如何写一个异常
例子1 try: #test area function() except Exception, e: print e.message 例子2:用raise抛出一个异常 if bool_var is ...
- Java基础方面
1.作用域public,private,protected,以及不写时的区别 答:区别如下: 作用域 当前类 同一package 子孙类 其他package ...
- 【Linux】【Jenkins】Jenkins安装和配置等
Jenkins配置详解: http://lib.csdn.net/article/git/18342 Jenkins介绍 Jenkins是基于Java开发的一种持续集成工具,用于监控持续重复的工作,功 ...
- django---单表操作之增删改
首先找到操作的首页面‘ 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...