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 更容易理解代码,从而提供高亮.格式化等辅助功能 更容易使用现有 ...
随机推荐
- 廖雪峰Java3异常处理-2断言和日志-4使用Log4j
1.Log4j Log4j是目前最流行的日志框架.有两个版本 1.x:Log4j 2.x:Log4j2 Log4j下载地址https://www.apache.org/dyn/closer.lua/l ...
- Uc的个人中心很奇葩
Uc的个人中心很奇葩,未登录前点击头像是图2选择性别,点击云同步才是图3登录,登录之后,想退出,要点击图1的头像进入图4编辑资料,然后右上角退出登录…摸索了好久,差点抓狂…把你们的产品经理叫出来一下… ...
- keras LSTM学习实例
1. 购物时间预测 http://www.cnblogs.com/arkenstone/p/5794063.html https://github.com/CasiaFan/time_seires_p ...
- [UE4]Datasmith
Datasmith 是帮助您将内容导入到虚幻引擎4中的一组工具和插件. 作为虚幻工作室产品的部分,Datasmith设计用于解决非游戏行业人士所面临的独特挑战,例如建筑.工程.建造.制造.实时培训等行 ...
- css段落(后盾)
- ODBC数据源管理器-》系统DSN-》没有....Microsoft Access Driver(*mdb,*,accdb)
问题如标题: 解决方法:打开目录:“C:\Windows\SysWOW64”,双击该目录下的“odbcad32.exe”文件,就进去ODBC数据源管理界面了,现在这个界面中就有access的驱动了!
- 图片路径中含有中文在jsp下不能正常显示的问题
图片路径中含有中文在jsp下不能正常显示的问题~ 这里其实涉及到get请求编码和url编码的问题. jsp页面: 当路径中存在中文的时候,最简单的解决办法是改变tomcat的编码: 在conf/ser ...
- 03 Linux的目录结构与常见文件管理
Linux目录结构 根文件系统rootfs用来实现整个文件的管理: 而Linux下的所有文件都需要通过根文件系统才能访问: FHS:Filesystem Hierarchy Standard文件层次化 ...
- restframwork框架
一 APIView: class PublishView(APIView): def get(self,request): publish_list=Publish.objects.all() ret ...
- elastalert新增自定义警告推送
举例,博主公司有自己的内部通讯工具(类似QQ),接下来用IM代称该工具.于是希望elastalert的警告推送可以支持IM的公众号群发功能. 等博主这个月知识库写了再来补充hah