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 对象中的值,我们可以在具体函数中计算,改变相应的变量,以 ...
随机推荐
- 【CSS】323- 深度解析 CSS 中的“浮动”
对于浮动这篇文章解析的狠透彻 ~ 写在最前 习惯性去谷歌翻译看了看 float 的解释: 其中有一句这样写的: she relaxed, floating gently in the water 瞬间 ...
- 带你使用Visual Studio 2019创建一个MVC Web应用
工欲善其事必先利其器,我们既然有Visual Studio2019这样的IDE为什么不用?学.Net Core而不用Visual Studio进行开发可谓是多么另类呀!既然你已经安装了VS2019的话 ...
- Vue ---- 表单指令 条件指令 循环指令 分隔符 过滤器 计算属性 监听属性
目录 案例讲解: 一. 表单指令 1.重点: 补充 2.单选框 3.单一复选框 4.多复选框 二 . 条件指令 v-if/v-show ... v-clock 三 . 循环指令 string arra ...
- JSON在线解析及格式化校验工具 jsonin.com
JSON在线解析及格式化校验工具 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它使得人们很容易的进行阅读和编写.同时也方便了机器进行解析和生成.它是基 ...
- RabbitMQ之交换机及spring整合
交换机 交换机属性: Name:交换机名称 Type:交换机类型 direct.topic.fanout.headers Durability:是否需要持久化,true为持久化 Auto Delete ...
- 红帽杯-MISC-Advertising for Marriage
convert -flip screenshot.png screensho1.png 本篇结合我上一博客https://www.cnblogs.com/qq3285862072/p/11869403 ...
- Blazor(WebAssembly) + .NETCore 实现斗地主
之前群里大神发了一个 html5+ .NETCore的斗地主,刚好在看Blazor WebAssembly 就尝试重写试试. 还有就是有些标题党了,因为文章里几乎没有斗地主的相关实现:),这里主要介绍 ...
- JS 操作符、控制流程、循环、字符串/数组方法
操作符 算术运算符:+ .- . * . / . %.++.-- 赋值运算符:= .+=.-=. *=./=.%= 比较运算符:>.>=.<.<=.!=.==.===(全等,数 ...
- 深度学习优质学习项目大放送！-AI Studio精选开源项目合集推荐
近期 在AI Studio上发现了不少优质的开源深度学习项目,从深度学习入门到进阶,涵盖了CV.NLP.生成对抗网络.强化学习多个研究方向,还有最新的动态图,都以NoteBook的方式直接开源出来,并 ...
- java开发两三事（2）-java多数据源+java8stream与LocalDateTime时间差
1. 场景描述 最近在工作中碰到的几个问题,有点坑,记录下,遇到相同或类似问题的朋友可以参考下. 2. 解决方案 2.1 拼接sql后,多数据源执行 采用Spring+DruidDataSource数 ...