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. 8086汇编(16位汇编)学习笔记05.asm基础语法和串操作

    https://bpsend.net/thread-121-1-2.html asm基础语法 1. 环境配置 xp环境配置 1.拷贝masm615到指定目录 2.将masm615目录添加进环境变量 3 ...

  2. HashMap put方法源码解析|Java 17

      Put函数源码解析HashMap的put方法执行过程可以通过下图来理解(摘自某大厂的博客,推荐从参考文献的链接去查看原文),自己有兴趣可以去对比源码更清楚地研究学习.   欲了解更多HashMap ...

  3. 浅谈Spring、Spring MVC、Spring Boot和Spring Cloud的关系和区别

      Spring 框架就像一个家族,有众多衍生产品,例如 boot.security.jpa等等.但它们的基础都是Spring的IOC和AOP等.IOC提供了依赖注入的容器,AOP解决了面向横切面编程 ...

  4. 浅析区块链BaaS平台定位

    一.概述 区块链是一种聚合了分布式存储.密码学.链式结构.p2p通讯,使得链上数据具有防篡改.可追溯等特点的一种信任技术. 继数字藏品热潮之后,2023年以来,区块链的发展进入了Gartner成熟度曲 ...

  5. 浅谈commons-collections4链

    浅谈commons-collections4链 commons-collections4的背景: 由于commons-collections (3.x) 在架构设计和 API 上暴露出一些问题(例如接 ...

  6. WinForms中实现Adobe PDF Reader实现旋转PDF功能

    实现效果: 问题点:Adobe PDF Reader中并没有可以直接旋转的方法 LoadFile 加载文件,文件URL地址 GotoFirstPage 到第一页 GotoLastPage 到最后一页 ...

  7. 动手学深度学习v2——第六章predict_ch6

    在QA环节,有位同学问了第六章的predict函数在哪,书中没有给出,使用predict_ch3稍作更改可得. def predict_ch6(net, test_iter, device, n=6) ...

  8. SAP UI类标准导出XML格式Excel

    DATA: gt_fieldcatalog TYPE lvc_t_fcat, gs_fieldcatalog TYPE lvc_s_fcat, lr_data TYPE REF TO data, r_ ...

  9. C# 中 const 和 readonly 关键字的区别和用法

    前言 今天我们一起来讲讲 C# 中 const 和 readonly 关键字的区别和用法. const 和 readonly 关键字区别 基本介绍 const(常量): 在C#中用于声明编译时常量,其 ...

  10. VisualStudioCode 创建Vue 3.0 项目

    https://vitejs.cn/guide/#%E6%90%AD%E5%BB%BA%E7%AC%AC%E4%B8%80%E4%B8%AA-vite-%E9%A1%B9%E7%9B%AE第一步npm ...