Vue 03
组件
- 组件就是html, css和js文件的集合体, 实现对代码的复用, 组件就是vue对象
组件的分类
- 根组件
<script>
// 像我们熟悉的new Vue({...})形式的, 就是根组件
new Vue ({
el: '#d1',
data: {
msg: '这是根组件'
},
`vue对象就是根组件, 其下面的el属性对应的挂载点就相当于template的占位符
根组件可以不明确template, template默认采用挂载点页面结构,
那如果根组件明确了template, 那就会把挂载点给替换掉`
tempalte: ''
})
</script>
- 局部组件
<script>
// 这样定义的只是个普通对象, 只有在父组件中注册之后, 才成为vue对象
let localTag = {
template: `
<div>
<p>这是一个局部标签</p>
</div>
`,
methods: {
fn() {
console.log(this)
}
}
};
</script>
- 全局组件
Vue.component
<script>
// 这样我们就定义了一个全局组件, 全局组件直接就是vue对象, 因此不需要在根组件中注册
Vue.component('globalTag', {
template: `
<div>
<p>这是一个全局组件</p>
</div>
`,
methods: {
fn() {
console.log(this)
}
}
});
</script>
组件的特点
- 组件都有管理组件html页面结果的template属性, 且template中只有且只有一个根标签
- 根组件永远都是爸爸(父组件), 而局部和全局组件及既可以是儿子(子组件)也可以是爸爸
- 子组件的数据需要隔离 (数据组件化, 每一个组件都拥有自己数据的名称空间)
- 局部组件必须注册后才能使用, 全局组件不需要注册, 提倡使用局部组件
- 组件自己的变量(模板和逻辑语句中)自己负责
组件的使用
- 声明组件
- 注册组件(局部组件)
- 渲染组件,
- 因为html对标签大小写不敏感, 在html代码中引用局部和全局组件时, 要采用 "-" 取代驼峰体, 如:
localTag --><local-tag></local-tag>
- 因为html对标签大小写不敏感, 在html代码中引用局部和全局组件时, 要采用 "-" 取代驼峰体, 如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件的使用</title>
<style>
body, h2 {
margin: 0;
}
.wrap {
width: 880px;
margin: 0 auto;
}
/*清除浮动带来的影响*/
.wrap:after {
content: '';
display: block;
clear: both;
}
.box {
width: 200px;
border-radius: 10px;
overflow: hidden;
background-color: grey;
float: left;
margin: 10px;
}
.box img {
width: 100%;
}
.box h2 {
text-align: center;
font-weight: normal;
font-size: 20px;
}
</style>
</head>
<body>
<div id="d1">
<div class="wrap">
<!--使用局部组件-->
<local-tag></local-tag>
<local-tag></local-tag>
<local-tag></local-tag>
<local-tag></local-tag>
<!--使用全局组件-->
<global-tag></global-tag>
<global-tag></global-tag>
<global-tag></global-tag>
<global-tag></global-tag>
</div>
</div>
<script src="vue/vue.js"></script>
<script>
// 定义局部组件
let localTag = {
template: `
<div class="box">
<img src="img/111.jpg" alt="">
<h2>玩手机</h2>
</div>
`,
methods: {
fn() {
console.log(this)
}
}
};
// 定义全局组件
Vue.component('globalTag', {
template: `
<div class="box">
<img src="img/222.jpg" alt="">
<h2>笑脸</h2>
</div>
`,
methods: {
fn() {
console.log(this)
}
}
});
// 根组件
new Vue({
el: '#d1',
data: {
msg: '这是根组件'
},
// 注册局部组件
components: {
localTag,
}
})
</script>
</body>
</html>
组件化
一个组件可能会被复用渲染多次, 要保证基于这个组件进行渲染的页面之间的数据是相互隔离的, 不然一个页面的数据发生了改变, 其他的不特么全都变了么
那如何保证数据隔离呢? 答案就是使用data函数, 然后用data函数返回我们需要的数据, 这样就保证了各自的数据都在各自data函数的名称空间中
<script>
// 使用data函数定义并返会变量
data() {
return
{ count: 0,}
},
</script>
组件传参-父传子
- 子组件可以通过props定义组件标签属性(采用反射机制, 因此需要使用字符串定义)
- 子组件标签在父组件标签中渲染, 因此子组件标签可以通过 "
:子标签属性=父组件变量" 来获取父组件的数据
<body>
<div id="d1">
<div class="wrap">
<!--利用子组件的标签的自定义属性来获取父组件的变量, 且是单向的-->
<local-tag :msg="msg"></local-tag>
</div>
</div>
<script src="vue/vue.js"></script>
<script>
// 局部组件
let localTag = {
// 通过props定义属性 (反射原理, 因此要用字符串定义)
props: ['msg'],
template: `
<div class="box" @click="fn">
<img src="img/111.jpg" alt="">
<h2>{{ this.msg }}</h2>
</div>
`,
};
// 根组件
new Vue({
el: '#d1',
data: {
msg: '这是根组件的变量msg'
},
// 注册局部组件
components: {
localTag,
}
})
</script>
</body>
组件传参-子传父
- 自定义事件, 子组件触发, 父组件实现
- 子组件通过
this.$emit("事件名", 传给父组件事件方法的参数) - 说的直白点, 就是在父组件中定义事件方法, 在子组件中调用该事件方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<h1>{{ h1 }}</h1>
<h3>{{ h3 }}</h3>
<!--action是自定义的事件, 这个事件方法在父组件中定义, 在子组件触发(调用)-->
<!--在父级标签中出现的所有变量由根组件控制, 因此这个actionFn是根组件的-->
<tag1 @aciton="actionFn"></tag1>
<hr>
<!--<tag2 @h1a="aFn1" @h3a="aFn3"></tag2>-->
</div>
<script src="vue/vue.js"></script>
<script>
let tag1 = {
template: `
<div>
<input type="text" v-model="t1">
<input type="text" v-model="t2">
// 在局部组件内部定义的点击事件
<button @click="changeTitle">修改标题</button>
</div>
`,
data() {
return {
t1: '',
t2: '',
}
},
methods: {
// 点击事件
changeTitle() {
if (this.t1 && this.t2) {
// 调用自定义事件
this.$emit('action', this.t1, this.t2);
this.t1 = '';
this.t2 = '';
}
}
}
};
let tag2 = {
template: `
<div>
主标题内容: <input type="text" v-model="t1" @input="t1Fn">
子标题内容: <input type="text" v-model="t2">
</div>
`,
data() {
return {
t1: '',
t2: '',
}
},
methods: {
t1Fn() {
this.$emit('h1a', this.t1);
}
},
watch: {
t2() {
this.$emit('h3a', this.t2)
}
}
};
new Vue({
el: '#d1',
data: {
h1: '主标题',
h3: '子标题',
},
components: {
tag1,
tag2,
},
methods: {
actionFn(a, b) {
this.h1= a;
this.h3 =b;
},
aFn1(a) {
if (!a) {
this.h1 = '主标题';
return;
}
this.h1 = a;
},
aFn3(a) {
if (!a) {
this.h3 = '子标题';
return;
}
this.h3 = a;
},
}
});
</script>
</body>
</html>
Vue 03的更多相关文章
- vue.js最最最最简单实例
vue.js最最最最简单实例 一.总结 一句话总结: 1.vue.js实现实现数据的双向绑定用的是什么标记? 双大括号:比如{{message}} 2.vue数据循环输出的标记是什么? 用的是标签的v ...
- Asky极简教程：零基础1小时学编程，已更新前8节
Asky极简架构 开源Asky极简架构.超轻量级.高并发.水平扩展.微服务架构 <Asky极简教程:零基础1小时学编程>开源教程 零基础入门,从零开始全程演示,如何开发一个大型互联网系统, ...
- Vuejs入门级简单实例
Vue作为2016年最火的框架之一,以其轻量.易学等特点深受大家的喜爱.今天简单介绍一下Vue的使用. 首先,需要在官网下载vuejs,或者直接用cdn库.以下实例使用Vue实现数据绑定与判断循环: ...
- 如何优雅的使用vue+vux开发app -03
如何优雅的使用vue+vux开发app -03 还是一个错误的示范,但是离优雅差的不远了... <!DOCTYPE html> <html> <head> < ...
- 黑马eesy_15 Vue：03.生命周期与ajax异步请求
黑马eesy_15 Vue:02.常用语法 黑马eesy_15 Vue:03.生命周期 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建) vue的生命周期与ajax异步请求 1.Vue的 ...
- vue视频学习笔记03
video 3 git page:任何仓库 master分支,都可以发布(git page)-------------------------------------双向过滤器:Vue.filter( ...
- 大白话Vue源码系列(03)：生成AST
阅读目录 AST 节点定义 标签的正则匹配 解析用到的工具方法 解析开始标签 解析结束标签 解析文本 解析整块 HTML 模板 未提及的细节 本篇探讨 Vue 根据 html 模板片段构建出 AST ...
- 大白话Vue源码系列(03)：生成render函数
阅读目录 优化 AST 生成 render 函数 小结 本来以为 Vue 的编译器模块比较好欺负,结果发现并没有那么简单.每一种语法指令都要考虑到,处理起来相当复杂.上篇已经生成了 AST,本篇依然对 ...
- vue 使用小结 2019.03
v-bind 中使用函数 :attr = 'num' 如上面的例子,通常 num 是 vue 实例中 data 的值,或者是 computed 对象中的值,我们可以在具体函数中计算,改变相应的变量,以 ...
随机推荐
- 【RabbitMQ】显示耗时处理进度
[RabbitMQ]显示耗时处理进度 通过网页提交一个耗时的请求,然后启动处理线程,请求返回.处理线程每完成一部分就给前台推送完成的数量,前端显示进度. 依赖jar <?xml version= ...
- verilog设计加法器
概述 本文利用了硬件行为描述.数据流描述.结构描述三种方法分别写了几个加法器 一位半加法器 即两个一位的二进制数相加,得到其正常相加的结果的最后一位. 仿真波形图 硬件行为描述 设计文件 123456 ...
- 还不懂MySQL索引？这1次彻底搞懂B+树和B-树
前言 看了很多关于索引的博客,讲的大同小异.但是始终没有让我明白关于索引的一些概念,如B-Tree索引,Hash索引,唯一索引….或许有很多人和我一样,没搞清楚概念就开始研究B-Tree,B+Tree ...
- JSP请求是如何被处理的？jsp的执行原理
客户端通过浏览器发送jsp请求,服务器端接受到请求后,判断是否是第一次请求该页面,或者该页面是否改变,若是,服务器将jsp页面翻译为servlet,jvm将servlet编译为.class文件,字节码 ...
- Spring Cloud第十篇 | 分布式配置中心Config
本文是Spring Cloud专栏的第十篇文章,了解前九篇文章内容有助于更好的理解本文: Spring Cloud第一篇 | Spring Cloud前言及其常用组件介绍概览 Spring Clo ...
- spf13-vim 显示neocomplete requires ...th Lua support
安装spf13-vim的时候下载了许多插件,neocomplete应该是比较重要的一个,毕竟自动补全.但是在使用时却一直有:neocomplete requires ...th Lua support ...
- 这几种JavaScript语法不要轻易使用，容易出事
文章目录 12种不宜使用的JavaScript语法 1. == 2. with 3. eval 4. continue 5. switch 贯穿 6. 单行的块结构 7. ++和-- 8. 位运算符 ...
- 创建基于ASP.NET core 3.1 的RazorPagesMovie项目（一）-创建和使用默认的模板
声明:参考于asp.net core 3.1 官网(以后不再说明) 本教程是系列教程中的第一个教程,介绍生成 ASP.NET Core Razor Pages Web 应用的基础知识. 在本系列结束时 ...
- Reproduction CVE_2019_0708
Xx_introduction Please protection,respect,love,"China's Internet Security Act"! For learni ...
- android只设置部分控件随着软键盘的出现而腾出空间
转载请标明出处:https://www.cnblogs.com/tangZH/p/12013685.html 在项目过程中,出现了一个需求,软键盘要顶起部分控件,而另一部分控件不动. 关于这种需求,我 ...