jade中mixin的使用

  h2 mixin
        mixin lesson
            p jade study
        +lesson
        mixin study(name,courses)
            p #{name}
            ul.courses
                each course in courses
                    li= course
        +study("wangjie",["jade", "node"])

        mixin testEmbedded(stu)
            p #{stu.name}
            +study(stu.name,stu.courses)
        +testEmbedded({name:"wangjie",courses:["jade", "node"]})

        //block
        mixin team(value01)
            p #{value01}
            if block
                block
            else
                p has no block
        +team("wangj")
            h2 test block

        //attr
        mixin attr(name)
            h2(class!=attributes.class) #{name}
        +attr(‘attr‘)(class=‘testAttr‘)     //多个属性嵌入
        mixin attrs(name)
            p&attributes(attributes) #{name}
        +attrs("attrs")(class=‘pclass‘,id=‘pid‘)

        mixin magic(name ,items)
            ul(class=‘#{name}‘)
                each item in items
                    li= item
        +magic(‘magic‘,[‘node‘,‘jade‘,‘...‘])
时间: 2024-10-12 20:34:50

jade中mixin的使用的相关文章

sass中mixin常用的CSS3

圆角border-radius 1 @mixin rounded($radius){ 2 -webkit-border-radius: $radius; 3 -moz-border-radius: $radius; 4 border-radius: $radius; 5 } 盒模型阴影box-shadow 下面是一个使用多参数的例子:用CSS3创建一个阴影的mixin,需要传递水平和垂的偏移量,模糊的范围,还有颜色,4个参数: 1 @mixin shadow($x, $y, $blur, $co

----Vue 中mixin 的用法详解----

说下我对vue中mixin的一点理解 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立. 而mixins则是在引入组件之后,则是将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并.相当于在引入后,父

vue中mixin 感觉很牛逼(父子组件融合成一个新组件)

vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立. 而mixins则是在引入组件之后,则是将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并.相当于在引入后,父组件的各种属性方法都被扩充了.    

Vue中mixin的用法

在项目中我们经常会遇到多个组件调用同一个方法的问题,为了避免每次都在.vue文件中定义并调用,我们可采用vue的mixin的用法: 具体使用如下: 我们需要在main.js中引入mixins文件夹下的index.js文件, 这样,我们准备工作就做好了,那么在.vue文件中,我们就可以调用啦: 大功告成,其实很好理解的! 原文地址:https://www.cnblogs.com/yuwenjing0727/p/9304103.html

vue中mixin的一点理解

vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立. 而mixins则是在引入组件之后,则是将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并.相当于在引入后,父组件的各种属性方法都被扩充了. 单纯组

nodejs学习(二) ---- express中使用模板引擎jade

系列教程,上一节教程  express+nodejs快速创建一个项目 在创建一个项目后,views目录下的文件后缀为 .jade . 打开 index.jade,具体内容如下图(忽略 header.jade 和 footer.jade,下面教程会一步步创建) 页面解析出的样子如下图.完全是html标签 一.jade 模板引擎 介绍 模板引擎是一个库,或者一个使用一定的规则或者语言来解释数据并渲染视图的框架.模板引擎处理过的最终结果是一个视图页面,也就是html页面或者用户图形界面GUI.在MVC

jade模板

jade 模板使用 npm install jade -g      安装到全局 jade index.jade         导出一个 index.html 压缩后的 jade -P index.jade       导出一个 index.html 没有压缩的 jade -P -w index.jade     -w  对文件实时编译 特殊的div .container p 巧巧 a(href='http://baidu.com', title='巧莉', data-uid='100') i

jade模板引擎

jade是使用JavaScript实现,可供nodejs使用的高性能模板引擎(性能高不高,有些争议.姑且称之为高性能吧!).模板引擎有很多,主要使用比较广泛的是jade和ejs,modejs项目默认使用jade作为模板引擎,我也就不多说了至于如何选择,还是得就事论事综合各种因素来考虑.在此不对优缺点进行分析.插一句嘴,ejs的语法更像jsp.asp这样的技术而jade更像python的语法风格,缩进来缩进去,有点绕.不过这并不影响代码的可读性(我是这么认为的).不管是jade还是ejs语法都比较

Jade 模板引擎使用

在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模板引用 (Extends) 在 Express 中调用 jade 模板引擎 var express = require('express'); var http = require('http'); var app = express(); app.set('view engine', 'jade'