Vue2.0插槽的使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <div id="app">

       <mybutton>

        <!-- 插槽的内容指定 -->

        <!-- v-slot：简写 # -->

          <template #title>

               <div>添加信息</div>

          </template>

           保存

          <template #content>

               你好啊!11月

          </template>

          </mybutton>

          <hr>

              <mymenu>

                  <template #cn>产品中心</template>

                  <template #en>PRODUCT CENTER</template>

                  <!-- 解构插槽 -->

                  <template #default="{row,index}">

                    {{index}}  {{row.sortname}}

                 </template>

              </mymenu>

    </div>

    <script src="../js/vue.js"></script>

    <script>

        new Vue({

            components:{

                 mybutton:{

                    template:`<div>

                                <h1><slot name='title'></slot></h1>

                                <div><slot name='content'></slot></div>

                                <button>

                                    <!-- 定义插槽时，没有取名字，默认的名字就是default -->

                                  <slot></slot>

                                </button>

                              </div>`

                 },

                mymenu:{

                    data(){

                        return {

                            cate:[

                                {id:20,sortname:'公司新闻'},

                                {id:21,sortname:'行业动态'}

                            ]

                        }

                    },

                    template:`<div>

                                <h1><slot name='cn'></slot></h1>

                                <p><slot name='en'></slot></p>

                                <ul>

                                    <li v-for='item,i in cate'>

                                        <slot :row='item' :index='i'></slot>

                                    </li>

                                </ul>

                              </div>`

                }

            }

        }).$mount('#app');

    </script>

</body>

</html>

vue2.0插槽的使用的更多相关文章

  1. 初学VUE2.0

    初学VUE2.0 (个人笔记,写完后发现好乱....下期使用markdown书写.) 概述 webstorm添加对VUE的支持 http://www.jianshu.com/p/142dae4f8b5 ...

  2. vue2.0自学笔记

    前言: 一.优点: 轻量级.高效率.上手快.简单易学.文档全面而简洁 二.功能: 1.模板渲染 2.模块化 3.扩展功能:路由.Ajax 三.课程包含: 1.Vue实例 2.Vue组件 3.Vue指令 ...

  3. VUE2.0学习总结

    摘要: 年后公司项目开始上vue2.0,自己对学习进行了总结,希望对大家有帮助! VUE2.0学习 vue介绍 vue是什么? https://vuefe.cn/guide vue也是一个数据驱动框架 ...

  4. 【数据售卖平台】—— Vue2.0入门学习项目爬坑

    前言:这个项目是我从零学习Vue2.0时用于练习基础知识的入门项目,包含了Vue2.0几乎所有项目都会用到的基础功能,是新手用来练手的好项目,这里温故知新对功能点做一个总结.github地址:http ...

  5. Vue2.0 官方文档学习笔记

    VUE2.0官方文档 基础部分: 1.VUE简介 Vue是一个基于MVVM的框架,其中M代表数据处理层,V代表视图层即我们在Vue组件中的html部分,VM即M和V的结合层,处理M层相应的逻辑数据,在 ...

  6. Vue2.0组件的继承与扩展

    如果有需要源代码,请猛戳源代码 希望文章给大家些许帮助和启发,麻烦大家在GitHub上面点个赞!!!十分感谢 前言 本文将介绍vue2.0中的组件的继承与扩展,主要分享slot.mixins/exte ...

  7. Vue2.0 基础入门

    前言:" 今生遇汝,何其幸哉:于我蒙昧之时遇到你,于我大雾初透之时爱上你,于我大智初醒之时沉沦你. " 官网: 介绍 - Vue.js (vuejs.org) 指令与修饰符 创建实 ...

  8. vue2.0实践的一些细节

    最近用vue2.0做了个活动.做完了回头发现,好像并没有太多的技术难点,而自己好像又做了比较久...只能说效率有待提升啊...简单总结了一些比较细节的点. 1.对于一些已知肯定会有数据的模块,先用一个 ...

  9. vue2.0构建淘票票webapp

    项目描述 之前一直用vue1.x写项目,最近为了过渡到vue2.0,特易用vue2.0栈仿写了淘票票页面,而且加入了express作为后台服务. 前端技术栈:vue2.0 + vue-router + ...

  10. Vuex2.0+Vue2.0构建备忘录应用实践

    一.介绍Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,适合于构建中大型单页应用. ...

随机推荐

  1. SpringSecurity配置 1

    spring security整合步骤 过滤器链 SpringSecurity的本质就是一个过滤器链,内部包含了提供各种功能的过滤器,基本案例中的过滤器链如下图所示: UsernamePassword ...

  2. windows系统部署minio

    下载 在官网下载exe https://dl.min.io/server/minio/release/windows-amd64/ 创建文件夹 把minio.exe放到一个文件夹里,然后同目录里再新建 ...

  3. 基于nodejs的本地文件增删改查的工具代码

    一.代码封装 这是一个使用node.js实现的对本地文件进行增删改查的工具代码封装,其中代码结尾包含了使用方法示例,具体封装代码如下: // jsonTool.js const fs = requir ...

  4. linux系统自定义登录提示信息

    centos7配置说明 这里对于centos7.x系统,可以直接编辑/etc/motd文件,增加定制的提示信息,并可以通过不同颜色展示. vim /etc/motd ^[[32m 设备IP地址: 10 ...

  5. equals与==与hashCode的区别与联系

    equals与hashcode的区别与联系 1."=="与equals的区别与联系 (1)"=="对于基本数据类型,只要值相等,就返回true,否则返回fals ...

  6. Typoar的使用

    Typoar的使用 1.指定标题<h?>标签 ctrl+1~6 2.字体加粗:ctrl+b 3.有序序列:ctrl+shift+[ "无序是 ]" 4.插入图片:ctr ...

  7. Linux 常用指令及客户端工具

    特点 稳定 安全性高 免费 系统目录 / :系统根目录: ~:/root 管理员目录: etc:系统配置目录: home:系统为每一个除 root 以外的用户创建一个以用户名为名称的文件夹: root ...

  8. MobiSys'2022 CoDL论文详解

    算子切分 在了解算子切分前,先了解一下卷积的运算过程,作者将算子切分分为了两个维度的切分:OC维度和H维度,没有W维度可能与数据在内存中的存储方式有关. OC维度切分 卷积就是OC数量个kernel_ ...

  9. Java 开发者无痛迁移到 Cursor 开启AI编程新生涯

    习惯了IntelliJ IDEA的Java开发者,想尝试Cursor.Windsurf或Trae这类新兴的AI IDE,却担心迁移成本? 本文分享我的实战经验,帮助你高效切换开发环境,保留核心效率.效 ...

  10. K8s 1.29.3 on Docker

    初始化 # 关闭防火墙 selinux systemctl disable --now firewalld setenforce 0 sed -i '/SELINUX=/s@enforcing@dis ...