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 对象中的值,我们可以在具体函数中计算,改变相应的变量,以 ...
随机推荐
- win10配置git SSH
1.安装的过程就不说了,直接去官网下载git for windows 安装便可 安装完了,无非就是像用它,就想从github上clone项目下来,仅仅是安装了git还不能直接从远程下载项目下来哦,还需 ...
- 【Feign】自定义配置
[Feign]自定义配置 转载: 自定义配置,如果在同一个工程,注意配置不要和@SpringBootApplication或@ComponentSacan放在用一个包下,就是不要被扫描上 packag ...
- hdu 1028 Ignatius and the Princess III (n的划分)
Ignatius and the Princess III Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K ...
- Winform修改配置文件节点保存到配置文件
主要使用: Configuration config = ConfigurationManager.OpenExeConfiguration(ConfigurationUserLevel.None); ...
- mybatis初级映射
一 前言 系统学习知识请认准知识追寻者(同公众号),错过作者,你有可能要走好多弯路 经过第一篇的入门文章,小白们都对mybatis的搭建流程应该都很熟悉,这篇文章主讲的是如何使用mybatis实现数据 ...
- 语句知识总结（js）
函数声明语句和函数定义表达式有什么不同 首先看一下函数声明语句和函数定义表达式的例子,表达式会返回一个值,而语句就是js中的一整句,下面例子中第6行是函数声明语句,第10行是函数定义表达式. f(); ...
- Maven 项目在 Eclipse 的创建配置
第1步 New 菜单 Other.. -> Maven -> Maven Project ,然后单击 Next .如下图所示 第2步 在New Maven Project向导中,选择Cre ...
- Redis—数据备份与恢复
https://www.cnblogs.com/shizhengwen/p/9283973.html https://blog.csdn.net/w2393040183/article/details ...
- SpringBoot+Redis简单使用
1.引入依赖 在pom.xml中加入 <dependency> <groupId>org.springframework.boot</groupId> <ar ...
- Hive初步认识，理解Hive（一）
Hive初步认识,理解Hive(一) 用了有一段时间的Hive了,之前一直以为hive是个数据库,类似Mysql.Oracle等数据库一样,其实不然. Hive是实现Hadoop 的MapReduce ...