事件修饰符
事件修饰符:
//.stop阻止事件冒泡
//. pr event阻止事件的默认行为
//. capture事件捕获
//.se1f自身触发
//. once只触发一次
组件
组件式yue最强大的功能之一
可以扩展htm|元素,封装可以重用的代码
优点:
1.能减少代码的重用,提高开发效率
2.降低页面的融合度,使页面更方便维护和管理
//“es6模板字符串
var str = "he11o world";
var str =、he11o world^ ;
//^、支持强制换行不出错!而 ' '强制换行会报错
//”es 6模板字符串
var str = "he11o world";
var str =、 he11o wor1d^ ;
//、支持强制换行不出错!而'' 强制换行会报错
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>这个更简单诶</h3>
</div>
var vm = new Vue({
e1:"#app"，
data:{
}，
components:{
})
</script>
</body>
组件之间的通信传值
父子组件给子组件传值(多个组件传值) $parent调用的是父组件
<! 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>我这个是父组件奥</h3>
<cpn1 :text="maa"></cpn1>
</div>
data: functionO{
return{
maa: "我这里是传过去的子组件啊"
})
Vue . component('cpn1' ,{
template:
<div>
<h1>我这个是子组件奥</h1>
{{text}}
</div>
props:['text']
})
var vm = new Vue({
e1:"#app"
data:{
}
})
</script>
</body>
</htm1>
父组件给子组件传值(当只有一个组件时. vue传值vue实例是父组件)
<!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实例哦</h1>
<p>{{txt}}</p>
</div>
props:['txt']
})
var vm = new Vue({
e1:"#app",
data:{
cccc: "这里是父组件哦"
})
</script>
</body>
</htm1>
