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,如果只是单一 ...
随机推荐
- golang之热加载Fresh&air
Fresh 是一个命令行工具,每次保存Go或模版文件时,该工具都会生成或重新启动Web应用程序.Fresh将监视文件事件,并且每次创建/修改/删除文件时,Fresh都会生成并重新启动应用程序.如果go ...
- README.md书写范例
具体参考: https://learnku.com/docs/laravel-specification/5.5/readme-examplemd/523
- docker环境一个奇怪的问题,容器进程正常运行,但是docker ps -a却找不到容器,也找不到镜像
一: 问题: docker环境一个奇怪的问题,使用容器跑的进程正常提供服务,在服务器上也能看到对应的端口正在监听,但是docker ps -a却找不到容器,也找不到镜像. 查看我使用docker容器启 ...
- Redis原理—4.核心原理摘要
大纲 1.Redis服务器的Socket网络连接建立 2.Redis多路复用监听与文件事件模型 3.基于队列串行化的文件事件处理机制 4.完整的Redis Server网络通信流程 5.Redis串行 ...
- 【Amadeus原创】docker安装apache
1, docker下载apache [root@it-1c2d webnav]# docker search apache [root@it-1c2d webnav]# docker pull htt ...
- Vue开启Gzip
Vue配置 1.安装 npm install --save-dev compression-webpack-plugin@5.0.0 const CompressionWebpackPlugin = ...
- 出现警告信息 Please enter a commit message to explain why this merge is necessary,
Please enter a commit message to explain why this merge is necessary, # especially if it merges an u ...
- R数据分析：做量性研究的必备“家伙什”-furniture包介绍
In conjunction with many other tidy tools, the package should be useful for health, behavioral, and ...
- HttpClientFactory in ASP.NET Core 2.1 Part 3: 对处理器使用对外请求中间件
HttpClientFactory in ASP.NET Core 2.1 Part 3: 对处理器使用对外请求中间件 原文地址:https://www.stevejgordon.co.uk/http ...
- 【Python】【Pandas】使用concat添加行
添加行 t = pd.DataFrame(columns=["姓名","平均分"]) t = t.append({"姓名":"小红 ...