事件修飾符
事件修飾符:
//.stop阻止事件冒泡
//. pr event阻止事件的默認(rèn)行為
//. capture事件捕獲
//.se1f自身觸發(fā)
//. once只觸發(fā)一次
組件
組件式y(tǒng)ue最強(qiáng)大的功能之一
可以擴(kuò)展htm|元素,封裝可以重用的代碼
優(yōu)點(diǎn):
1.能減少代碼的重用,提高開(kāi)發(fā)效率
2.降低頁(yè)面的融合度,使頁(yè)面更方便維護(hù)和管理
//“es6模板字符串
var str = "he11o world";
var str =、he11o world^ ;
//^渗蟹、支持強(qiáng)制換行不出錯(cuò)!而 ' '強(qiáng)制換行會(huì)報(bào)錯(cuò)
//”es 6模板字符串
var str = "he11o world";
var str =风秤、 he11o wor1d^ ;
//、支持強(qiáng)制換行不出錯(cuò)!而'' 強(qiáng)制換行會(huì)報(bào)錯(cuò)
Vue組件代碼!
<!DOCTYPE htm1>
<htm1 lang="en">
<head>
<meta charset="UTF-8">
<meta name="vi ewport" content ="wi dth=device-width, initial-scale=1. 0">
<tit1e>Document</title>
</head>
<body>
<div id=" app">
<cpn></cpn>
<cpn1></cpn1>
</div>
<script src="./vue.js"></script>
<script>
Vue . component('cpn',{
template:
<div>
<h3>這里是組件啊</h3>
</div>
})
Vue. component(' cpn1',{
template:
<div>
<cpn></cpn>
<h3>這個(gè)更簡(jiǎn)單誒</h3>
</div>
var vm = new Vue({
e1:"#app"甲棍，
data:{
}，
components:{
})
</script>
</body>
組件之間的通信傳值
父子組件給子組件傳值(多個(gè)組件傳值) $parent調(diào)用的是父組件
<! DOCTYPE htm1>
<htm1 lang="en">
<head>
<meta charset="UTF-8">
<meta name="vi ewport" cont ent="wi dth=device-width诺核，initial-scale=1.0">
<title>Document</title>
<script src="../vue. js"></script>
</head>
<body>
<div id="app">
<cpn></cpn>
</div>
<script>
Vue. component('cpn',{
template:
<div>
<h3>我這個(gè)是父組件奧</h3>
<cpn1 :text="maa"></cpn1>
</div>
data: functionO{
return{
maa: "我這里是傳過(guò)去的子組件啊"
})
Vue . component('cpn1' ,{
template:
<div>
<h1>我這個(gè)是子組件奧</h1>
{{text}}
</div>
props:['text']
})
var vm = new Vue({
e1:"#app"
data:{
}
})
</script>
</body>
</htm1>
父組件給子組件傳值(當(dāng)只有一個(gè)組件時(shí). vue傳值vue實(shí)例是父組件)
<!DOCTYPE htm1>
<htm1 lang="en">
<head>
<meta charset="UTF-8">
<meta name="vi ewport" cont ent="wi dth=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue. js"></script>
</head>
<body>
<div id="app">
<cpn :txt-="ccc"></cpn>
</div>
<script>
Vue. component(' cpn',{
template:
<div>
<h1>這里是子組件父組件是vue實(shí)例哦</h1>
<p>{{txt}}</p>
</div>
props:['txt']
})
var vm = new Vue({
e1:"#app",
data:{
cccc: "這里是父組件哦"
})
</script>
</body>
</htm1>
