Web前端学习第7章 Vue基础教程7 插槽、DOM操作、过

学习猿地

发布于 2020-06-28 11:03:25

3440

发布于 2020-06-28 11:03:25

文章被收录于专栏：学习猿地学习猿地

一、插槽

插槽基础

默认的情况下，引入的组件，开始标签和结束标签之间不可以添加内容（如果添加了也会被忽略）。

插槽可以用来扩展组件的自定义能力，例如我们可以创建一个MyButton的自定义按钮，然后通过插槽来定义内部的文本。

 1 <!-- MyButton.vue -->
 2 <template>
 3     <div>
 4         <slot></slot>
 5     </div>
 6 </template>
 7 <!-- app.vue -->
 8 <template>
 9     <my-button>测试文本</my-button>
10 </template>

具名插槽

有的时候一个组件会带有多个插槽，可以为slot标签添加name属性来区分不同的插槽，实例代码如下所示

 1 <!-- Layout.vue -->
 2 <template>
 3     <div>
 4         <header>
 5             <slot name="header"></slot>
 6         </header>
 7         center
 8         <footer>
 9             <slot name="footer"></slot>
10         </footer>
11     </div>
12 </template>

引入组件后，可以通过template标签指定插槽的属性，实例代码如下所示。

 1 <!-- app.vue -->
 2 <template>
 3     <layout>
 4       <template v-slot:header>
 5         this is header
 6       </template>
 7       <template v-slot:footer>
 8         this is footer
 9       </template>
10     </layout>
11 </template>

v-slot可以用#缩写，上面的代码可以缩写为

1 <layout>
2     <template #header>
3     this is header
4     </template>
5     <template #footer>
6     this is footer
7     </template>
8 </layout>

我们使用的很多Vue的第三方UI库多是使用插槽原理实现的，我们会在后面的课程中继续学习插槽在项目中的应用。

二、获取真实DOM

在此前的课程中，我们都是通过虚拟DOM实现的页面操作。在项目开发过程中，我们偶尔也会需要获取真实的DOM节点。

例如下面的例子，我们定义了一个空的div，然后在Vue中获取这个div的样式。

可以通过ref属性为元素添加引用信息，然后通过$refs来获这个元素。示例代码如下所示

 1 <template>
 2     <div class="content" ref="box">
 3 
 4     </div>
 5 </template>
 6 
 7 <script>
 8 export default {
 9     //window.getComputedStyle方法可以获取元素的样式。
10     mounted(){
11          console.log(window.getComputedStyle(this.$refs.box).height)
12     }
13 }
14 </script>
15 
16 <style scoped>
17 .content{
18     border:1px solid red;
19     width:100px;
20     height:100px;
21 }
22 </style>

三、过滤器

 1 <template>
 2     <div>
 3         <h1>{{date | dateForma}}</h1>
 4     </div>
 5 </template>

 6 export default {
 7     data(){
 8         return {
 9             date:"2020-1-1"
10         }
11     },
12     filters:{
13         dateForma(value){
14             let dateTime = new Date(value);
15             let year = dateTime.getFullYear();
16             let month = dateTime.getMonth();
17             let date = dateTime.getDate();
18             return `${year}年${month+1}月${date}日`
19         }
20     }
21 }

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/06/23 ，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

vue.js

登录后参与评论

0 条评论

热度