Vue获取DOM，数据监听，组件，混合和插槽
Vue获取DOM，数据监听，组件，混合和插槽
注：“:” 是指令 “v-bind”的缩写，“@”是指令“v-on”的缩写；“.”是修饰符。
Vue获取DOM
给标签加ref属性：ref="my_box"
获取：this.$refs.my_box;
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
.my_box{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<div ref="my_box"></div>
<button v-on:click="my_click">点击显示文本</button>
</div>
<script>
const app = new Vue({
el:"#app",
data:{},
methods:{
my_click: function(){
let ele = this.$refs.my_box;
console.log(ele);
ele.innerText = "hello"
}
}
})
</script>
</body>
</html>
computed：计算属性，放的是需要处理的数据
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
.my_box{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<table>
<tr>
<th>科目</th>
<th>成绩</th>
</tr>
<tr>
<td>Python</td>
<td><input type="text" v-model.number="python"></td>
</tr>
<tr>
<td>Java</td>
<td><input type="text" v-model.number="java"></td>
</tr>
<tr>
<td>Go</td>
<td><input type="text" v-model.number="go"></td>
</tr>
<tr>
<td>总分</td>
<td>{{total}}</td>
</tr>
<tr>
<td>平均分</td>
<td>{{average}}</td>
</tr>
<!-- 繁琐方法 -->
<!-- <tr> -->
<!-- <td>总分</td> -->
<!-- <td>{{python + java + go}}</td> -->
<!-- </tr> -->
<!-- <tr> -->
<!-- <td>平均分</td> -->
<!-- <td>{{total/3}}</td> -->
<!-- </tr> -->
</table>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
python:"",
java:"",
go:""
},
methods:{},
computed:{
total: function(){
return this.python + this.java + this.go
},
average: function(){
return this.total/3
}
}
})
</script>
</body>
</html>
数据监听
watch ：监听不到可以添加deep属性
deep:true ：深度监听，deep监听不到，可以使用 $.set() 属性操作值
$.set()
字符串监听：监听到的新旧值不同。
数组：只能监听到长度的变化，新旧值相同，改变数组值的时候要使用 $set(array,index,value)
对象：只能监听到value的改变，必须深度监听：deep，增加对象的key必须使用：$set(array,key,value)
注：数组监听有坑
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
.my_box{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
{{name}}
<br>
{{hobby}}
<br>
{{obj}}
<br>
<button v-on:click="my_click">点我改变数据</button>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
name:"eric",
hobby:["打游戏","打豆豆"],
obj:{
boy:"PDD",
age:23
}
},
methods:{
my_click: function(){
// 修改name数据
this.name = "bob";
// this.hobby.push("潜水");
// this.hobby[0] = "潜水";
// app.$set(this.hobby,0,"潜水");
// this.obj.age = 20;
// this.obj["sex"] = "男";
app.$set(this.obj,"sex","男");
}
},
watch: {
name: {
handler: function(val,oldVal){
console.log(val);
console.log(oldVal);
}
},
hobby: {
handler: function(val,oldVal){
// 改变数组的长度的时候新旧值相同
console.log(val);
console.log(oldVal);
},
// deep: true
},
obj: {
handler: function(val,oldVal){
console.log(val);
console.log(oldVal);
},
deep: true
}
}
})
</script>
</body>
</html>
组件
可复用
全局组件的定义：Vue.component("myheader",{}）
全局组件的使用：<myheader></myheader>
<!-- 全局注册组件 -->
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
.my_box{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<myheader></myheader>
</div>
<div id="apps">
<myheader></myheader>
</div>
<script>
Vue.component("myheader",{
template: '<div><h1>{{ title }}</h1></div>',
// template: '<div><h1>Hello world!</h1></div>',
data(){ // 对象的单体模式
return{
title: "HelloWorld！"
}
},
methods:{}
});
const app = new Vue({
el:"#app",
data:{},
methods:{}
});
const apps = new Vue({
el:"#apps",
data:{},
methods:{}
})
</script>
</body>
</html>
局部组件的定义：components: {my_com: my_com_config}
局部组件的使用：<my_com></my_com>
<!-- 局部注册组件 -->
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
.my_box{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<my_com></my_com>
</div>
<script>
let my_com_config = {
template: '<div><h1>局部组件</h1></div>'
};
const app = new Vue({
el:"#app",
components: {
my_com: my_com_config
}
})
</script>
</body>
</html>
父子组件：
注：组件只识别一个作用域块
<!-- 父子组件的进本使用 -->
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
.my_box{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<my_com></my_com>
</div>
<script>
let child_config = {
template: '<div><h2>子组件</h2></div>'
};
let my_com_config = {
template: '<div><h1>父组件</h1><child></child></div>',
components: {
child: child_config
}
};
const app = new Vue({
el:"#app",
components: {
my_com: my_com_config
}
})
</script>
</body>
</html>
父子组件的通信：
父子通信（主操作在父级）：
父级定义方法：:father_say="f_say"
子级调用方法：props: ['father_say']
子级使用方法（模板语言直接调用）：{{father_say}}
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
.my_box{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<my_com></my_com>
</div>
<script>
let child_config = {
template: '<div><h2>子组件</h2><p>father_say：{{father_say}}</p></div>',
props: ['father_say']
};
let my_com_config = {
template: '<div><h1>父组件</h1><child :father_say="f_say"></child></div>',
components: {
child: child_config
},
data(){
return {
f_say: "滚~~"
}
}
};
const app = new Vue({
el:"#app",
components: {
my_com: my_com_config
}
})
</script>
</body>
</html>
子父通信（主操作在子级）：
子集定义方法：@click='my_click'
子级提交事件：this.$emit("事件名",data)
父级绑定子级提交的事件：@事件名="处理的方法"
父级处理方法： methods: {处理的方法: function(data){data 数据处理} }
父级使用方法（模板语言直接调用）：{{say}}
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
.my_box{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<my_com></my_com>
</div>
<script>
let child_config = {
template: "" +
"<div>" +
"<h2>子组件</h2>" +
"<button @click='my_click'>向父级传送数据</button>" +
"</div>",
methods: {
my_click(){
// 子组件提交事件名称
this.$emit("son_say","滚~~")
}
}
};
let my_com_config = {
template: '' +
'<div>' +
'<h1>父组件</h1>' +
'<child @son_say="my_son_say"></child>' +
'<p>son_say：{{say}}</p>' +
'</div>',
components: {
child: child_config
},
data(){
return {
say:""
}
},
methods: {
my_son_say: function(data){
this.say = data
}
}
};
const app = new Vue({
el:"#app",
components: {
my_com: my_com_config
}
})
</script>
</body>
</html>
非父子级通信：
定义中间调度器：let event = new Vue()
需要通信的组件向中间调度器提交事件：event.$emit("事件名", data)
接收通信的组件监听中间调度器里的事件：event.$on("事件名", function(data){data操作(注意：this的问题)})
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
.my_box{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<eric></eric>
<jing></jing>
</div>
<script>
let midlen = new Vue();
let eric = {
template: "" +
"<div>" +
"<h1>This is Eric</h1>" +
"<button @click='my_click'>点击通知静静</button>" +
"</div>",
methods: {
my_click(){
// 通知bob，晚上等我
// 向bob，提交事件
midlen.$emit("email","晚上，一起吃饭")
}
}
};
let jing = {
template: "" +
"<div>" +
"<h1>This is jing</h1>" +
"<p>eric和我说：{{ eric_email }}</p>" +
"</div>",
data(){
return {
eric_email: ""
}
},
mounted(){
// 组件加载完成后执行的方法
let that = this;
midlen.$on("email", function(data){
that.eric_email = data;
// console.log(data);
})
}
};
const app = new Vue({
el:"#app",
components: {
eric: eric,
jing: jing
}
})
</script>
</body>
</html>
混合
实际上在框架中用的很少
作用：复用共用的代码块
minxins:[base]
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
.my_box{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<button @click=\"show_text\">点击显示文本</button>
<button @click=\"hide_text\">点击隐藏文本</button>
<button @mouseenter="show_text" @mouseleave="hide_text">提示框</button>
<div v-show=\"is_show\"><h1>look wyl and kjj</h1></div>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
is_show:false
},
methods: {
show_text: function(){
this.is_show = true
},
hide_text: function(){
this.is_show = false
}
}
})
</script>
</body>
</html>
<!-- 混合示例 -->
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
.my_box{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<com1></com1>
<com2></com2>
</div>
<script>
let base = {
data(){
return {
is_show:false
};
},
methods: {
show_text(){
this.is_show = true
},
hide_text(){
this.is_show = false
}
}
};
let com1 = {
template:"" +
"<div>" +
"<button @click=\"show_text\">点击显示文本</button>" +
"<button @click=\"hide_text\">点击隐藏文本</button>" +
"<div v-show=\"is_show\"><h1>look wyl and kjj</h1></div>" +
"</div>",
mixins: [base],
data(){
return {
is_show: true
}
}
};
let com2 = {
template:"" +
"<div>" +
"<button @mouseenter=\"show_text\" @mouseleave=\"hide_text\">提示框</button>" +
"<div v-show=\"is_show\"><h1>look wyl and kjj</h1></div>" +
"</div>",
mixins: [base],
};
const app = new Vue({
el:"#app",
components: {
com1: com1,
com2: com2
}
})
</script>
</body>
</html>
插槽
作用：实现组件内容的分发
slot:
直接使用slot标签：<slot></slot>
名命slot标签：
先给slot加name属性：<slot name="title"></slot>
给标签元素添加slot属性：<h3 slot="title">Python</h3>
<!-- 未命名的slot标签 -->
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
.my_box{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<com>
<slot>This is jing</slot>
</com>
<com>
<slot>This is wyl</slot>
</com>
</div>
<template id="my_com">
<div>
<h1>这是一个组件</h1>
<slot></slot>
</div>
</template>
<script>
let com = {
template: "#my_com"
};
const app = new Vue({
el:"#app",
components: {
com: com
}
})
</script>
</body>
</html>
<!-- 命名的slot标签 -->
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
.my_box{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<com>
<h3 slot="title">Python</h3>
<p slot="brief">This is jing</p>
</com>
<com>
<h3 slot="title">Git</h3>
<p slot="brief">This is wyl</p>
</com>
</div>
<template id="my_com">
<div>
<h1>这是一个组件</h1>
<slot name="title"></slot>
<slot name="brief"></slot>
</div>
</template>
<script>
let com = {
template: "#my_com"
};
const app = new Vue({
el:"#app",
components: {
com: com
}
})
</script>
</body>
</html>
Vue获取DOM，数据监听，组件，混合和插槽的更多相关文章
- vue中的数据监听以及数据交互
现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[,,] } }).$watch("ar ...
- Vue获取dom和数据监听
Vue获取dom对象 在js和jq中我们都能获取dom对象例如 // 获取id=1的div标签 <div id=d1>dom对象</div> // js语法 let ele = ...
- vue（4）—— vue的过滤器，监听属性，生命周期函数，获取DOM元素
过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...
- Vue中如何监听组件的原生事件
在首页开发中,右下角有一个返回顶部的小箭头,将它单独封装成一个BackTop组件,但是它何时出现需要依赖于首页的滑动,即另外一个Scroll组件.如果直接在BackTop组件里面监听,则需要通过thi ...
- Blazor和Vue对比学习（基础1.8）：Blazor中实现计算属性和数据监听
1.7章<传递UI片断>,需要做几个案例,这部分暂停消化几天.我们先把基础部分相对简单的最后两章学习了. 计算属性和数据监听是Vue当中的概念,本质上都是监听数据的变化,然后做出响应.两者 ...
- Vue之数据监听存在的问题
Vue之数据监听 当数据监听的是列表时,数据发生改变,不会被监听到. // 用$set修改数组中的数组能够被监听 // app.$set(this.hobby, 0, "爱你哦") ...
- Vue3 为何使用 Proxy 实现数据监听
博客地址:https://ainyi.com/93 vue3 响应式数据放弃了 Object.defineProperty,而使用Proxy来代替它 我们知道,在 vue2 中,实现数据监听是使用Ob ...
- Python黑客编程基础3网络数据监听和过滤
网络数据监听和过滤 课程的实验环境如下: • 操作系统:kali Linux 2.0 • 编程工具:Wing IDE • Python版本:2.7.9 • 涉及 ...
- 谈谈数据监听observable的实现
一.概述 数据监听实现上就是当数据变化时会通知我们的监听器去更新所有的订阅处理,如: var vm = new Observer({a:{b:{x:1,y:2}}}); vm.watch('a.b.x ...
- 在vue中使用watch监听对象或数组
最近发现在vue中使用watch监听对象或者数组时,当数组或者对象只是单一的值改变时,并不会出发watch中的事件. 在找问题过程中,发现当数组使用push一类的方法时,会触发watch,如果只是单一 ...
随机推荐
- 人形机器人-强化学习算法-PPO算法的实现细节是否会对算法性能有大的影响.
PPO算法是强化学习算法中目前应用最广的算法,虽然这个算法是2017年发表的,但是至今在整个AI领域下的agent子领域中这个算法都是最主要的强化学习算法(至少目前还没有之一),这个算法尤其在Chat ...
- The Bento Box Adventure
题目来源:codeforces 2041A 题目名称:The Bento Box Adventure 题目链接:https://codeforces.com/contest/2041/problem/ ...
- Golang之工作区workspace
快速开始 创建工作区 写一个最简单的基础项目实际演练一下 Go workspace. 首先,创建 workspace 工作区. $: mkdir workspace $: cd workspace $ ...
- 使用certbot申请免费SSL证书
现在网站使用https已经成为标配,但是SSL证书最便宜的DV证书也要几百块钱一年,对于个人开发者来说很不划算.好在,我们有Let's Encrypt,它是能提供免费的SSL证书,应该也是市面上使用最 ...
- xtrabackup脚本
xtrabackup是MySQL的一种物理备份工具,相对于mysqldump,备份和还原速度更快 , 我写了一份可以进行备份 + 还原的脚本 #!bin/bash all_bak_path=" ...
- Xpath解析及其语法
XPath解析 XPath(XML Path Language)是一种用于在XML和HTML文档中查找信息的语言,其通过路径表达式来定位节点,属性和文本内容,并支持复杂查询条件,XPath 是许多 W ...
- WxPython跨平台开发框架之用户选择和标签组件的设计
在系统的权限管理中,往往都会涉及到用户的选择处理,特别是基于角色的访问控制中,很多情况下需要用到选择用户的处理.本篇随笔,基于WxPython跨平台开发框架,采用原有开发框架成熟的一套权限系统理念,对 ...
- Jetpack Compose学习(15)——Pager组件的使用(对标ViewPager)
原文地址: Jetpack Compose学习(15)--Pager组件的使用(对标ViewPager)-Stars-One的杂货小窝 从名字可以看出,Pager这个就是ViewPager的替代产物 ...
- C#中 CancellationTokenSource的妙用
在.NET中,CancellationTokenSource.CancellationToken和Task是处理异步操作和取消任务的重要工具.本文将通过一些简单的例子,帮助你理解它们的用法和协作方式. ...
- Nginx make报错处理
https://blog.csdn.net/zhengdong12345/article/details/130669711 make报错:fatal error:sys/sysctl.h:No su ...