目錄
一、vue中的組件
- 組件是vue最核心的東西
- 組件在
html文件中，只相當於一個占位符，真正渲染到瀏覽器上的是script標簽中書寫的組件中template成員定義的標簽模板
1. 組件的概念
- 組件就是html、css與js的集合體，為該集合體命名，用該名字復用html、css與js組成的集合體 => 復用性
- 說白了，組件就是就是Vue對象，直接通
new Vue()產生的Vue對象是根組件，在根組件掛載的父標簽內部的標簽所對應的組件就是該根組件的子組件。
2. 組件分類
- 根組件
- 子組件（子組件必須放在根組件之前定義）
- 局部組件（局部組件需要導根組件中注冊）
- 全局組件
3. 組件的特點
-
1）組件都有管理組件html頁面結果的 template 實例成員，template中有且只有一個根標簽 2）根組件都是作為最頂層父組件，局部與全局組件作為子組件，也可以成為其他局部與全局組件的父組件 3）子組件的數據需要隔離(數據組件化，每一個組件擁有自己數據的獨立名稱空間)，組件與組件之間數據是隔離的 4）局部組件必須注冊后才能使用，全局組件不需要注冊，提倡使用局部組件 5）組件中出現的所有變量（即模板中的、邏輯中的變量），由該組件自己提供管理 6) 局部、全局和根組件都是一個個Vue實例，一個實例對應一套html、css、js結構，所以實例就是組件，組件與組件之間數據是隔離的 -
1. 根組件，可以不明確template，template默認采用掛載點頁面結構；如果設置的template，掛載點內部的內容無效，因為會被替換 2. html，body標簽不能被替換，所以不能作為掛載點
4. 組件的定義
-
子組件必須放在根組件之前定義
-
# 在自定義組件時，組件名是駝峰體，則，在html頁面的標簽則是 -小寫 # 在html頁面的組件標簽 <my-tag></my-tag> # script中的組件名 let myTag{} -
// 根組件定義 new Vue ({ 組件代碼 }) // 局部組件定義 let 組件名 { 組件代碼 } // 全局組件定義 Vue.components('組件名',{ 組件代碼 }) -
實例
<body>
<div id="app">
<div class="wrap">
// 可以多次渲染
<local-tag></local-tag>
<local-tag></local-tag>
// 可以多次渲染
<global-tag></global-tag>
<global-tag></global-tag>
</div>
</div>
</body>
// 局部組件**********************
let localTag = {
// template 中只能有一個根標簽**********
template: `
<div class="box" @click="fn">
<img src="img/001.jpg" alt="">
<h2>美女</h2>
</div>
`,
methods: {
fn() {
console.log(this)
}
}
};
// 全局組件**********************
Vue.component('global-tag', {
template: `
<div class="box" @click="fn">
<img src="img/002.jpg" alt="">
<h2>大長腿</h2>
</div>
`,
methods: {
fn() {
console.log(this)
}
}
});
// 根組件**********************
new Vue({
el: '#app',
data: {},
components: { // 注冊組件
localTag,
}
})
-
根組件和子組件的
{}內的寫法基本相同，就是當做Vue對象來書寫，只是子組件的data當做方法來寫，並且有return返回值（為的就是讓每一個子組件對象擁有獨立的名稱空間）。而根組件的data是當做屬性來寫。如下：// 根組件data data:{} // 子組件data data(){ return {} // 在return的大括號內寫變量 }
5. 組件化
（1）用法和注意
- 數據需要組件化（即數據的渲染），需要用方法來修改更新（方法執行后會產生一個局部作用域，這樣每個被復用的組件中的變量就可以區別開，展示不同的效果了）
（2）數據組件化實例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>組件化</title>
<style>
body, h2 {
margin: 0;
}
.wrap {
width: 880px;
margin: 0 auto;
}
.wrap:after {
content: '';
display: block;
clear: both;
}
.box {
width: 200px;
border-radius: 10px;
overflow: hidden;
background-color: #eee;
float: left;
margin: 10px;
}
.box img {
width: 100%;
}
.box h2 {
text-align: center;
font-weight: normal;
font-size: 20px;
}
</style>
</head>
<body>
<div id="app">
<div class="wrap">
<!--數據組件化后，就可以讓，每個自定義標簽的數據獨立-->
<local-tag></local-tag>
<local-tag></local-tag>
<local-tag></local-tag>
<local-tag></local-tag>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let localTag = {
template: `
<div class="box" @click="fn">
<img src="img/001.jpg" alt="">
<h2>捶了美女{{ count }}下</h2>
</div>
`,
data() { // 局部或全局取件，一個組件可能會被復用多次，每個組件都應該有自己獨立的變量名稱空間
return {
count: 0,
}
}, // 數據需要組件化，作為方法的返回值（方法執行后會產生一個局部作用域）
methods: {
fn() {
console.log(this); // 用方法來更新數據
this.count++;
}
}
};
new Vue({
el: '#app',
data: {},
components: {
localTag,
}
});
</script>
</html>
6. 組件傳參——父傳子
（1）用法和注意
-
1）子組件可以通過props自定義組件屬性（采用反射機制，需要填寫字符串，但是使用時可以直接作為變量） 2）子組件會在父組件中渲染，渲染時，將父組件的變量綁定給子組件的自定義屬性，將可以將變量值傳遞給子組件 -
簡單來說，就是通過給自定義組件在組件標簽中添加屬性變量，將屬性變量作為媒介，子組件管理變量，父組件管理變量值。如：
<mytag :attr="value"></mytag>，子組件管理attr，父組件管理value -
這種方式只有父組件管理的變量值，在父組件中可以修改，而子組件管理的變量名只能進行讀取操作，不能修改。所以不能向雙向綁定一樣，互相影響，所以只能是父傳子，不能子傳父。
（2）父傳子實例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>父傳子</title>
<style>
body, h2 {
margin: 0;
}
.wrap {
width: 880px;
margin: 0 auto;
}
.wrap:after {
content: '';
display: block;
clear: both;
}
.box {
width: 200px;
border-radius: 10px;
overflow: hidden;
background-color: #eee;
float: left;
margin: 10px;
}
.box img {
width: 200px;
height: 240px;
}
.box h2 {
text-align: center;
font-weight: normal;
font-size: 20px;
}
</style>
</head>
<body>
<div id="app">
<div class="wrap">
<local-tag v-for="dog in dogs" :dog="dog" def="12345" :xyz="dog.name"></local-tag>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let dogs = [
{
name: '二哈1號',
img: 'img/100.jpg',
},
{
name: '二哈2號',
img: 'img/200.jpg',
},
{
name: '二哈3號',
img: 'img/300.jpg',
},
{
name: '二哈4號',
img: 'img/400.jpg',
},
{
name: '二哈1號',
img: 'img/100.jpg',
},
{
name: '二哈2號',
img: 'img/200.jpg',
},
{
name: '二哈3號',
img: 'img/300.jpg',
},
{
name: '二哈4號',
img: 'img/400.jpg',
}
];
// 1）子組件可以通過props自定義組件屬性（采用反射機制，需要填寫字符串，但是使用時可以直接作為變量）
// 2）子組件會在父組件中渲染，渲染時，將父組件的變量綁定給子組件的自定義屬性，將可以將變量值傳遞給子組件
let localTag = {
props: ['dog', 'def', 'xyz'],
template: `
<div class="box" @click="fn">
<img :src="dog.img" alt="">
<h2>捶{{ dog.name }}{{ count}}下</h2>
<!--<h3>{{ abc }}</h3>-->
<!--<h3>{{ def }}</h3>-->
<!--<h3>{{ xyz }}</h3>-->
</div>
`,
data() {
return {
count: 0,
}
},
methods: {
fn() {
console.log(this.dog);
this.count++;
}
}
};
new Vue({
el: '#app',
data: {
dogs,
},
components: {
localTag,
}
});
</script>
</html>
7. 組件傳參——子傳父
（1）用法和注意
- 簡單說，子傳父就是通過子組件自定義事件，再給這個事件傳參，然后子組件管理事件名，父組件管理事件值，中間通過子組件傳參和父組件接收參數進行子傳父。如`<tag @action="actionFn"></tag>`，子組件管理`action`，在`action`事件中傳參，父組件管理`actionFn`，並接收參數。
- 關鍵語法`this.$emit('action', this.t1, this.t2);`，`$emit`作用是讓事件`action`觸發。
### （2）子傳父實例
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>子傳父</title>
</head>
<body>
<div id="app">
<h1>{{ h1 }}</h1>
<h3>{{ h3 }}</h3>
<!--自定義組件標簽的事件
自定義事件是屬於子組件的，子組件在父組件中渲染並綁定事件方法，所以事件方法由父組件來實現
子組件如何觸發自定義事件：this.$emit('自定義事件名', 觸發事件回調的參數們)
子組件觸發自定義事件，攜帶出子組件的內容，在父組件中實現自定義事件的方法，拿到子組件傳遞給父組件的消息
-->
<tag @action="actionFn"></tag>
<hr>
<tag2 @h1a="aFn1" @h3a="aFn3"></tag2>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let tag = {
template: `
<div>
<input type="text" v-model="t1">
<input type="text" v-model="t2">
<button @click="changeTitle">修改標題</button>
</div>
`,
data() {
return {
t1: '',
t2: '',
}
},
methods: {
changeTitle() {
if (this.t1 && this.t2) {
// console.log(this.t1, this.t2);
this.$emit('action', this.t1, this.t2);
this.t1 = '';
this.t2 = '';
}
}
}
};
let tag2 = {
template: `
<div>
主標題內容：<input type="text" v-model="t1" @input="t1Fn">
子標題內容：<input type="text" v-model="t2">
</div>
`,
data() {
return {
t1: '',
t2: '',
}
},
methods: {
t1Fn() {
this.$emit('h1a', this.t1);
}
},
watch: {
t2 () {
this.$emit('h3a', this.t2);
}
}
};
new Vue({
el: '#app',
data: {
h1: '主標題',
h3: '子標題'
},
components: {
tag,
tag2,
},
methods: {
actionFn(a, b, c) {
// console.log('觸發了', a, b, c);
this.h1 = a;
this.h3 = b;
},
aFn1(a) {
if (!a) {
this.h1 = '主標題';
return;
}
this.h1 = a;
},
aFn3(a) {
if (!a) {
this.h3 = '子標題';
return;
}
this.h3 = a;
},
}
})
</script>
</html>
二、vue補充和總結
1. 補充
-
# 1. 在vue對象的指令語法中，如需要給標簽添加style屬性中的background-color 參數，那么在指令語法中要寫成backgroundColor <p :style="{backgroundColor:bgc,width:w}"></p> # 2. 在自定義組件時，組件名是駝峰體，則，在html頁面的標簽則是 -小寫 # 在html頁面的組件標簽 <my-tag></my-tag> # script中的組件名 let myTag{}
2. 總結
'''
實例成員：
el 掛載
data 聲明變量，給變量賦值
methods 事件成員
computed 計算成員
watch 監聽成員
filters 過濾成員
delimiters 分隔符，修改插值表達式的語法
props 子組件的組件標簽添加屬性時，用來反射屬性值
template 模板成員
components 注冊局部組件
指令：
{{}} 插值表達式
v-text 普通文本指令
v-html 能解析html代碼的文本指令
v-once 讓變量只解析一次的文本指令
v-on 事件指令
v-model 表單指令（用來雙向綁定，是否選中）
v-bind 屬性指令
v-if 條件指令（為false時，直接不在瀏覽器上顯示代碼）
v-show 條件指令（為false時，display:none來因此標簽）
v-else-if 條件指令
v-else 條件指令
v-for 循環指令
v-cloak 斗篷指令（避免頁面閃爍，原理：當加載到讓含有 v-cloak 的標簽時，先進行隱藏，等其中的vue相關執行完后，再進行展示）
'''
三、JS補充
1. JS中的循環遍歷
（1） for in
for in遍歷的是取值關鍵，意識是，遍歷的是數組的索引或者對象的key
// 例子
let scores = [
{ name: 'Bob', math: 97, chinese: 89, english: 67 },
{ name: 'Tom', math: 67, chinese: 52, english: 98 },
{ name: 'Jerry', math: 72, chinese: 87, english: 89 },
{ name: 'Ben', math: 92, chinese: 87, english: 59 },
{ name: 'Chan', math: 47, chinese: 85, english: 92 },
];
for (score in scores) {
console.log(score)
}
// 打印結果：0 1 2 3 4
（2）for of
for of遍歷的是值，遍歷的是數組的值，或對象的value
// 例子
let scores = { name: 'Bob', math: 97, chinese: 89, english: 67 }
;
for (score in scores) {
console.log(score)
}
// 打印結果：name math chinese english
for (score of scores) {
console.log(score)
}
// 打印結果：Bob 97 89 67
（3） each
- 下面是jQuery中，each的用法
- 遍歷數組時，需要注意
// 遍歷數組
let scores = ['a','b',['c','d'],'e'];
each(scores,function(ind,val){
consol.log(ind,val)
})
// 打印結果：0,['a'] 1,['b'] 2,[['c','d']] 3,['e']
// 遍歷對象
let scores = { name: 'Bob', math: 97, chinese: 89, english: 67 }
each(scores,function(key,val){
consol.log(key,val)
})
// 打印結果：name,Bob math,97 chinese,89 english,67
2. 加減運算和數據類型轉換
js是一種弱語言，
1. 相加：
對於兩數（一個字符串一個數字）相加，會先把兩個數當成字符串相加，不行的話再都轉成數字類型相加，都不行就是NaN
2. 相減：
對於兩數（一個字符串一個數字）相減，因為字符串沒有減法，所以會直接轉成數字類型相減，不行的話就是NaN
3. 字符串轉成數字：
如 '2' ——》 +'2' 或 Number('2')
3. 可變長參數
- JS中沒有關鍵字參數，所以只有類似python中的
*號。只不過在JS中用...來表示*
四、css補充
1. 取消選中
user-select: none
2. 鼠標變成小手
cursor：pointer