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>
