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 对象中的值,我们可以在具体函数中计算,改变相应的变量,以 ...
随机推荐
- Java类中static的用法
关于Java中static的使用有以下四种情况: 1.静态成员变量 被static修饰的成员变量,叫静态成员变量或类变量:没有被static修饰的变量,叫实例变量. 两者的区别是: ...
- drf源码分析系列---认证
认证的使用 from rest_framework.authentication import BaseAuthentication from api import models # 认证类 clas ...
- WebService创建、发布及在IIS上部署
一.项目创建 1. 首先打开VS,这里我以VS2013为例 2. 点击“新建项目”,依次选择“Web”——>“Visual Studio 2012”——>“ASP.NET空 ...
- 设计模式：规约模式（Specification-Pattern）
"其实地上本没有路,走的人多了,也便成了路"--鲁迅<故乡> 这句话很好的描述了设计模式的由来.前辈们通过实践和总结,将优秀的编程思想沉淀成设计模式,为开发者提供了解决 ...
- Cortex-A7处理器算数运算指令和逻辑运算指令
汇编中也可以进行算术运算, 比如加减乘除,常用的运算指令用法如表所示: 常用运算指令 在嵌入式开发中最常会用的就是加减指令,乘除基本用不到. 我们用 C 语言进行CPU 寄存器配置的时候常常需要用 ...
- MPV源码探究：源码结构和调用层次
源码结构和调用层次 源码结构 从 Github 上拉取最新的源码,目录结构大致如下: H:\MPV ├─.github ├─audio │ ├─decode │ ├─filter │ └─out ├─ ...
- mac下使用minicom几个注意事项
一 安装: 安装是比较简单的,直接: brew install minicom 二 查找串口驱动 这里不得不吐槽苹果公司,搞一个串口,从来就不像ubuntu中那样很简洁的名字,这里的名字一般是一长串, ...
- Java之JDK配置
目录 JDK配置 进入配置界面 配置JAVA_HOME 配置Path 配置CLASSPATH 查看是否成功 JDK配置 系统重装,由于要设置各种环境变量,怕之后还会遇到这个情况,特此记录一下. 前提: ...
- sqlserver 标准系统数据库
SQL server系统数据库很重要,大部分时候都不应该修改他们.唯一例外的是model数据库和tempdb数据库.model数据库允许部署更改到任何新创建的数据库(如存储过程),而更改tempdb数 ...
- jQuery总结02_jq的dom操作+属性操作
一:JQuery知识点 *:JQuery的dom操作 *:获取节点.给节点添加内容 *:动态创建dom节点 比如动态创建表格等,在js里面进行完成. *删除节点 这里面的删除就是将其放在了一个地方,并 ...