<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--角色：
vm
vm的v
vm的m
組件
組件的v
組件的m
-->
<div id="app">
<p><!--插值表達式-->{{msg}}</p>
<!--3、使用已經註冊過的組件-->
<!--瀏覽器會把我們標籤的大寫轉化成小寫，所以組件註冊的時候不要用大寫。-->
<!--組件訪問vm中data第2步：將vm的data中屬性與組件的同名屬性綁定起來-->
<!--在組件中調用vm中方法第1步：綁定一個自定義事件，名字隨意-->
<zujian1 :msg="msg" @callvmmethod="vmmethod"></zujian1>
</div>
<script src="js/vue.js"></script>
<script>
/*組件使用案例：*/
/*1、創建一個組件模板對象*/
/*1.1用vue.extend方法創建組件*/
/*var zujian1Template = Vue.extend({
template: '<div id="zujian1"><h2>800行代碼</h2><p>我是一段文本</p><p>我是一段文本</p><p>我是一段文本</p><p>我是一段文本</p><p>我是一段文本</p><p>我是一段文本</p></div>',
});*/
/*1.2用一種更偷懶的方式創建組件*/
var data = {
tiancimoney: 9999999,
}
var zujian1Template = {
/*這個template是用來設置組件的代碼模板*/
/*組件訪問vm中data第1步：設置props，props使組件具有了訪問vm中data屬性值的能力*/
props: ['msg'],
template: `
<div id="zujian1">
<h2>800行代碼</h2>
<p>我是組件的v，我正在試圖獲取vm的data中的msg的值：{{msg}}</p>
<p>我是組件的v，我正在試圖獲取我自己的的data中的tiancimoney的值：{{tiancimoney}}</p>
<!-- <button @click="vmmethod">我是組件的v，點我就會試圖調用vm對象中的methods下的vmmethod</button>-->
<button @click="$emit('callvmmethod')">我是組件的v，我會成功調用到vm中的vmmethod方法</button>
<button @click="tiancimoney-=100">點我一下，天賜money就會少一塊。</button>
</div>
`,
/*vm相當於一個大組件，但vm中data屬性使用的方式和組件中data屬性使用方式不一樣。*/
data: () => {
return {
tiancimoney: 9999999,
};
},
methods: {}
};
/*2、註冊組件到vue之中*/
/*2.1、全局註冊*/
/*注意：組件註冊不要用大寫*/
Vue.component('zujian1', zujian1Template);
var vm = new Vue({
el: '#app',
/*data是mvvm中的m——model*/
data: {
msg: 'vm的data中的數據',
money: 1999,
},
methods: {
vmmethod() {
alert('我被調用了');
}
}
/*2.2、私有組件註冊，在vm對象定義裏面，設置components屬性，註冊一個私有組件*/
// components: {d
// 'zujuan1': zujian1Template,
// }
});
</script>
</body>
</html>
組件案例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--角色：
vm
vm的v
vm的m
組件
組件的v
組件的m
-->
<div id="app">
<p><!--插值表達式-->{{msg}}</p>
<!--3、使用已經註冊過的組件-->
<!--瀏覽器會把我們標籤的大寫轉化成小寫，所以組件註冊的時候不要用大寫。-->
<!--組件訪問vm中data第2步：將vm的data中屬性與組件的同名屬性綁定起來-->
<zujian1 :msg="msg"></zujian1>
</div>
<script src="js/vue.js"></script>
<script>
/*組件使用案例：*/
/*1、創建一個組件模板對象*/
/*1.1用vue.extend方法創建組件*/
/*var zujian1Template = Vue.extend({
template: '<div id="zujian1"><h2>800行代碼</h2><p>我是一段文本</p><p>我是一段文本</p><p>我是一段文本</p><p>我是一段文本</p><p>我是一段文本</p><p>我是一段文本</p></div>',
});*/
/*1.2用一種更偷懶的方式創建組件*/
var zujian1Template = {
/*這個template是用來設置組件的代碼模板*/
/*組件訪問vm中data第1步：設置props，props使組件具有了訪問vm中data屬性值的能力*/
props: ['msg'],
template: `
<div id="zujian1">
<h2>800行代碼</h2>
<p>我是組件的v，我正在試圖獲取vm的data中的msg的值：{{msg}}</p>
<p>我是組件的v，我正在試圖獲取我自己的的data中的tiancimoney的值：{{tiancimoney}}</p>
<button @click="tiancimoney-=100">點我一下，天賜money就會少一塊。</button>
</div>
`,
data: () => {
return {
tiancimoney: 9999999,
}
},
methods: {
}
};
/*2、註冊組件到vue之中*/
/*2.1、全局註冊*/
/*注意：組件註冊不要用大寫*/
Vue.component('zujian1', zujian1Template);
var vm = new Vue({
el: '#app',
/*data是mvvm中的m——model*/
data: {
msg: 'vm的data中的數據',
money: 1999,
}
/*2.2、私有組件註冊，在vm對象定義裏面，設置components屬性，註冊一個私有組件*/
// components: {
// 'zujuan1': zujian1Template,
// }
});
</script>
</body>
</html>
人員管理成品代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--2、創建一個視圖div，id是app-->
<div id="app">
<div>
姓名：<input type="text" v-model="name"><br>
性別：<input type="text" v-model="sex"><br>
<button @click="add">新增用戶</button>
</div>
<div>
姓名：<input type="text" v-model="searchName"><br>
</div>
<table>
<thead>
<tr>
<td><input type="checkbox"></td>
<td>名字</td>
<td>性別</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr v-for="(user, index) in search(searchName)">
<td><input type="checkbox"></td>
<td>{{user.name}}</td>
<td>{{user.sex}}</td>
<td>
<button @click="del(index)">刪除</button>
</td>
</tr>
</tbody>
</table>
</div>
<!--1、導入vue.js-->
<script src="js/vue.js"></script>
<script>
/*3、創建vm對象*/
var vm = new Vue({
el: '#app',
data: {
name: '',
sex: '',
msg: 'hello',
searchName: '',
users: [
{name: '羅小黑', sex: '男'},
/*如果我們把對象的所有屬性值放進一個數組裏面,['羅小黑','男']*/
{name: '羅中黑', sex: '男'},
{name: '羅大黑', sex: '男'},
{name: '羅超大黑', sex: '男'},
{name: '上校的女朋友', sex: '女'},
],
},
methods: {
add() {
var user = {
name: this.name,
sex: this.sex
}
this.users.push(user);
},
del(index) {
this.users.splice(index, 1);
},
search(s) {
/*filter用來篩選數組中名字中有searchName的元素*/
var resultArray = this.users.filter((user) => {
/*判斷user是否符合條件，如果符合就返回true*/
// var flag = user.name.includes(s);
/*先把對象用Object的values方法變成數組，再調用數組的join方法把數組所有元素拼接成一個長字符串，最後調用字符串的includes方法判斷s是不是其子串*/
flag = Object.values(user).join('-').includes(s);
return flag;
});
return resultArray;
}
}
})
</script>
</body>
</html>
人員搜索案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--2、創建一個視圖div，id是app-->
<div id="app">
<div>
姓名：<input type="text" v-model="name"><br>
性別：<input type="text" v-model="sex"><br>
<button @click="add">新增用戶</button>
</div>
<div>
姓名：<input type="text" v-model="searchName"><br>
</div>
<table>
<thead>
<tr>
<td><input type="checkbox"></td>
<td>名字</td>
<td>性別</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr v-for="(user, index) in search(searchName)">
<td><input type="checkbox"></td>
<td>{{user.name}}</td>
<td>{{user.sex}}</td>
<td>
<button @click="del(index)">刪除</button>
</td>
</tr>
</tbody>
</table>
</div>
<!--1、導入vue.js-->
<script src="js/vue.js"></script>
<script>
/*3、創建vm對象*/
var vm = new Vue({
el: '#app',
data: {
name: '',
sex: '',
msg: 'hello',
searchName: '',
users: [
{name: '羅小黑', sex: '男'},
/*如果我們把對象的所有屬性值放進一個數組裏面,['羅小黑','男']*/
{name: '羅中黑', sex: '男'},
{name: '羅大黑', sex: '男'},
{name: '羅超大黑', sex: '男'},
],
},
methods: {
add() {
var user = {
name: this.name,
sex: this.sex
}
this.users.push(user);
},
del(index) {
this.users.splice(index, 1);
},
search(s) {
/*filter用來篩選數組中名字中有searchName的元素*/
var resultArray=this.users.filter((user) => {
/*判斷user是否符合條件，如果符合就返回true*/
var flag = user.name.includes(s);
alert(Object.values(user));
return flag;
})
return resultArray;
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--定義一個顯示商品信息的組件
.....省略若干定義代碼
-->
<!--<div id="app">-->
<!-- <div>顯示導航欄信息</div>-->
<!-- <商品組件></商品組件>-->
<!--</div>-->
<div id="app">
<p>我是vm的視圖，我正在試圖獲取msg：{{msg}}</p>
<input type="text" v-model="msg">
<!--使用組件其實是在使用組件的template中的代碼-->
<!--3、使用註冊好的組件-->
<zujian1 :msg="msg"></zujian1>
<zujian1></zujian1>
<zujian2></zujian2>
</div>
<script src="js/vue.js"></script>
<script>
/*使用組件的步驟*/
/*1、創建一個組件模板對象*/
/*1.1 使用extend進行創建*/
/*var comTemp = Vue.extend({
/!*組件的html代碼設置在template屬性中。*!/
template: '<h2>我是一個組件中的視圖</h2>',
})*/
/*1.2 使用字面量創建*/
var comTemp = {
/*組件的html代碼設置在template屬性中。*/
template: '<h2>我是一個組件中的視圖，我正在嘗試獲取vm的data中的msg：{{msg}}</h2>',
props: ['msg']
};
/*1.3 最偷懶的創建組件的方法就是將創建的組件模板對象直接寫在component函數第二個參數位置。*/
/*2、註冊公有或私有組件*/
/*2.1註冊公有組件，公有組件定義在外部，每一個vm對象的視圖中都可以使用到公有組件*/
Vue.component('zujian1', comTemp);
Vue.component('zujian2', {
template: '<p style="color:red">我是一個新的組件中的視圖代碼</p>'
});
/*創建一個vm對象*/
var vm = new Vue({
el: '#app',
data: {
msg: '一個文本信息',
money: 99,
},
/*components: {
/!*私有組件，只有當前vm的視圖中可以使用到這個組件*!/
'siyouzujian1': comTemp
}*/
})
</script>
</body>
</html>
使用組件的data
<div id="app">
<button-com></button-com>
</div>
<script src="js/vue.js"></script>
<script>
/*註冊一個組件*/
Vue.component('button-com', {
template: `
<div>
<p>count的值爲：{{count}}</p>
<button>點我就會把count的值+1</button>
</div>
`,
data: {
count: 0,
}
});
var vm = new Vue({
el: '#app',
})
</script>
組件中調用vm中定義的方法的基本代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button-com></button-com>
<button-com></button-com>
<button-com></button-com>
</div>
<script src="js/vue.js"></script>
<script>
/*註冊一個組件*/
Vue.component('button-com', {
template: `
<div>
<p>money的值爲：{{money}}</p>
<button @click="money--">點我就會把money的值-1</button>
<button @click="sonM">點我就會調用sonM方法</button>
<button @click="fatherM">點我就會去試着調用vm中的fatherM方法</button>
</div>
`,
data: ()=>{
/*當我們return 一個對象的時候，每次調用這個函數就會去重新創建一個對象並返回，所以我們應該return一個對象，因爲每次使用組件標籤，
都會去調用data的函數獲得一個當前組件的data對象，這個對象應該是一個新對象，避免一個組件多次使用公用了同一個data對象的問題。*/
return {
money: 999,
};
},
methods: {
sonM() {
alert('sonmethod')
}
}
});
var vm = new Vue({
el: '#app',
methods: {
fatherM() {
alert('vm中方法調用了')
}
}
})
</script>
</body>
</html>
