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/[email protected]/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/[email protected]/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/[email protected]/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://www.cnblogs.com/wylshkjj/p/"https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<style>
.my_box{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
<body>
區域組件的定義：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://www.cnblogs.com/wylshkjj/p/"https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<style>
.my_box{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
<body>
父子組件：
注：組件只識別一個作用域塊
<!-- 父子組件的進本使用 -->
<!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://www.cnblogs.com/wylshkjj/p/"https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<style>
.my_box{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
<body>
父子組件的通信：
父子通信（主操作在父級）：
父級定義方法：: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://www.cnblogs.com/wylshkjj/p/"https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<style>
.my_box{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
<body>
子父通信（主操作在子級）：
子集定義方法：@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://www.cnblogs.com/wylshkjj/p/"https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<style>
.my_box{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
<body>
子組件
" +
"