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,如果只是单一 ...
随机推荐
- WebLogic XMLDecoder反序列化漏洞
目录 前言 XMLDecoder概述 XMLDecoder反序列化漏洞 漏洞复现 前言 上篇复现了T3反序列化漏洞,XMLDecoder反序列化在WebLogic中也是一类影响很大的反序化漏洞. XM ...
- JavaScript 绑定this
1.临时改变函数调用时this的指向 方法:call()与apply(),第一个参数为此次调用时的this指向,如果不传,则则等同于指定全局对象,后面的参数为函数原本的参数 区别:apply()方法传 ...
- Redis探秘Sentinel（哨兵模式）
概述 Redis的高可用机制有持久化.复制.哨兵和集群.其主要的作用和解决的问题分别是: 持久化:持久化是最简单的高可用方法(有时甚至不被归为高可用的手段),主要作用是数据备份,即将数据存储在硬盘,保 ...
- 原创单总线传输协议b2s （附全部verilog源码）
一.b2s协议背景介绍 本单总线传输协议为精橙FPGA团队原创,含传送端(transmitter)和接收端(receiver)两部分,基于verilog语言,仅使用单个I/O口进行多位数据的传输,传输 ...
- 优雅地打印 HEX 数据
转载至知乎Murphy https://zhuanlan.zhihu.com/p/320391096 前言 在调试的时候经常要打印内存里的数据,来看看数据及格式是否在预期范围内:以及在调试二进制协议的 ...
- 【原创】xenomai环境下开源实时数控系统LinuxCNC编译安装
linuxcnc 在xenomai下的构建简单记录,参考链接https://www.linuxcnc.org/docs/devel/html/code/building-linuxcnc.html 1 ...
- 2024年1月Java项目开发指南4：IDEA里配置MYSQL
提前声明:文章首发博客园(cnblogs.com/mllt) 自动"搬家"(同步)到CSDN,如果博客园中文章发生修改是不会同步过去的,所以建议大家到我的博客园中查看 前提条件: ...
- Linux命令行/终端连接(隐藏)SSID的WiFi
推荐看完Linux命令行/终端连接隐藏SSID的WiFi(续篇)和本文后,再按照实际情况采用network-manager或者ifupdown 多数Linux系统默认自带有线网络的驱动和配置软件,但是 ...
- remove a git submodule
参考: http://stackoverflow.com/questions/1260748/how-do-i-remove-a-submodule 1. Delete the relevant se ...
- FISCO BCOS 控制台 部署合约 调用 查看已部署合约的地址
deploy 部署合约.(默认提供HelloWorld合约和TableTest.sol进行示例使用) 参数: 合约路径:合约文件的路径,支持相对路径.绝对路径和默认路径三种方式.用户输入为文件名时,从 ...