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 更容易理解代码,从而提供高亮.格式化等辅助功能 更容易使用现有 ...
随机推荐
- HDOJ 2003 求绝对值
#include<cstdio> #include<cmath> int main() { double a; while (scanf_s("%lf", ...
- 如何进行CodeReview
一.代码规范的要点 代码规范主要分为风格规范与设计规范两大类: 1.代码风格规范 主要是文字上的规定,看似表面文章,实际上非常重要. 具体有如下几个方面: (1)缩进 (2)行宽 (3)断行/空白行 ...
- 标准C库函数
标准库函数由15个头文件组成 1.math.h 1.1 绝对值函数 1.2 幂函数.开平方函数 1.3 指数函数.对数函数 1.5 三角函数 注意参数范围: 1.6 取整函数.取余函数 2.字符串处理 ...
- 函数的进阶(动态参数,命名空间和作用域,函数的嵌套,gloabal和nonlocal关键字)
1. 函数参数--动态传参 昨天已经解过了传参, 如果需要给一个函数传参,而参数又是不确定的. 或者我们给一个函数传很多参数, 我的形参就要写很多, 写起来就很麻烦, 这时我们可以考虑使用动态参数.形 ...
- Jmeter（三十三）Stepping Thread Group
碰巧最近在做性能测试,就记一下Jmeter的第三方插件Stepping Thread Group. 具体一些插件信息,可以去:jmeter-plugins.org去进行下载. 该插件目前是已经被弃用的 ...
- [UE4]封装蓝图函数Print String
World Context Object一定要赋值才会在多人游戏中出现Server和Client,如下图所示:
- [UE4]扔枪
1.把枪Detach掉:DetachFromActor 3个都选择“Keep World” 2.模拟物理 3.给一个向前的速度 4.切枪,到上一个武器,或者捡起脚底下的武器 注意Get Compone ...
- SerializeHelper
using System; using System.Collections.Generic; using System.Configuration; using System.IO; using S ...
- elasticsearch 外网访问9200端口访问
可以访问127.0.0.1:9200,但不能访问 公网IP:9200 后面ip就是127.0.0.1的局域网ip,如何解决? 修改配置文件 config/elasticsearch.yml netwo ...
- php数组和部分操作函数
1. 数组定义 数组的定义使用 array()方式定义,可以定义空数组: <?php $number = array(1,3,5,7,9); //定义空数组 $result = array(); ...