全局组件和局部组件
1.全局组件
定义在vue对象外面,在挂载了vue对象上的html标签中,都可以使用:
- 一定要先定义组件,再进行vue的挂载
- 模板中必需有一个根标签,否则没有效果
- 取名的问题: 如果使用驼峰命名法 myTag
<!--
全局组件:
在挂载了vue对象上的html标签中,都可以使用:
-->
<div id="app">
<mytag></mytag>
<mytag></mytag>
</div>
<!--没有在div标签中,没有效果,不会打印-->
<mytag></mytag>
<!--再定义一个div-->
<div id="app1">
<mytag></mytag>
</div>
<!--
注意事项:
1.一定要先定义组件,再进行vue的挂载
2.模板中必需有一个根标签,比如<h1>
3.取名的问题:如果使用驼峰命名法 myTag -> <my-tag>,尽量不同驼峰命名
自定义一个全局组件。将相同的代码弄成一个组件,以后方便调用
全局组件:被vue挂载到的地方都可以直接使用
定义一个组件:
第一个参数:组件的名字
第二个参数:模块
-->
<script>
Vue.component("mytag",{
//组件的模板。必须要有根标签,否则没有效果
template:"<h1>比如有一万句html</h1>"
})
new Vue({
el:"#app"
})
//给另一个div创建一个vue对象
new Vue({
el:"#app1"
})
</script>
- 局部组件
定义在vue对象中,只能在挂载的html标签中使用;
<!--
局部组件:
只能在挂载的html标签中使用;
-->
<div id="app">
<mytag></mytag>
</div>
<div id="app2">
<mytag></mytag>
</div>
<script>
new Vue({
el: "#app",
//组件(多个)
components: {
mytag: {
template: "<h2>我是局部组件,在vue对象里面定义</h2>"
}
}
})
</script
- 全局组件和局部组件的区别
全局组件可以作用于全局的挂载对象;
局部组件:只能作用于挂载的当前对象;
事件修饰符详解
vue提倡的是在方法中只有对数据的处理,所以提供了事件修饰符用于DOM的事件处理,常用的事件修饰符有以下几个:
(1). stop:阻止冒泡(通俗讲就是阻止事件向上级DOM元素传递)
点击内层div的结果:
点击外层div的结果:
修改代码,为内层点击事件添加事件".stop"修饰符:
(2). prevent:阻止默认事件的发生
默认事件指对DOM的操作会引起自动执行的动作,比如点击超链接的时候会进行页面的跳转,点击表单提交按钮时会 重新加载页面等,使用".prevent"修饰符可以阻止这些事件的发生。
(3). capture:捕获冒泡,即有冒泡发生时,有该修饰符的dom元素会先执行,如果有多个,从外到内依次执行,然后再按自 然顺序执行触发的事件。
此时点击最内层div,结果如下:
多个获取事件 :
(4). self:将事件绑定到自身,只有自身才能触发,通常用于避免冒泡事件的影响
此时点击最内层:
(5). once:设置事件只能触发一次,比如按钮的点击等。
(6). passive:该修饰符大概意思用于对DOM的默认事件进行性能优化,根据官网的例子比如超出最大范围的滚动条滚动的 方法,可以使用该修饰符进行加强,但是效果并没有感觉到,如果有实际使用过的小伙伴可以留言补充。