2019独角兽企业重金招聘Python工程师标准>>>

Nuxt.js 官网 nuxt.js官网

个基于 Vue.js 的服务端渲染应用框架

项目搭建

安装全局vue-cli

npm install -g vue-cli

利用vue-cli搭建nuxt项目

选用的是Koa框架  fire 是项目名称 
vue init nuxt/koa fire

启动项目

cd fire 
npm install 
npm run dev

jade的学习

安装全局的jade模板

npm install -g jade

jade 的实时编译(会实时编译)

jade -P -w index.jade

jade 的基础语法

doctype html
html
    //ie6,7,8



head
    meta(charset='utf-8')
    title jade study
body
    h2 注释
    //div 单行注释//
    section.title.title2#sectionID
    h2 非缓冲注释 //-
    //- #dkkdk
    h2 块注释
    //-
        div
            strong eb
            span dk
    div
        strong eb
        span dk
    h2 div是比较特别的标签 可以直接用#action.logo，可以不加div
    #action.logo
        a(href="#",id="logo",class="font") baidu
        input(type="text",name="jade",value="jade")
        input(type="checkbox",name="jade",checked)
        br
        p.
            1 kd
            1 kd
            1 kd
            1 kd
            1 kd
        br
        p
            | 1 dkk
            span dd
            | 1 dkk
            strong dkdkd
            | 1 dkk
            | 1 dkk

//编译以后








jade study


注释


非缓冲注释 //-
块注释
ebdk
div是比较特别的标签 可以直接用#action.logo，可以不加div
baidu




1 kd
1 kd
1 kd
1 kd
1 kd


1 dkkdd1 dkkdkdkd1 dkk
1 dkk

jade的变量声明和数据传递

- var test = 'jade'
- let test = 'jade'
- const test = 'jade'
二种接收变理的方式
p #{test}
p = test

例如

doctype  html
html
    head
        meta(charset='utf-8')
        - var test = 'jade'
        title #{test.toUpperCase()}变量声明
    body
        - var tests = 'demo'
        - const demo = 'test'
        div#test #{tests}
            p = tests
            p = demo

解析以后



  
    
    JADE变量声明
  
  
    demo
      = tests
      = demo

jade 数据传送（命令行和json格式和后端传输）
命令行传递数据

jade index1.jade -P -w -obj '{"demo":"jade03"}'

json数据传输

cd 指定目录下
jade index1.jade -P -w -O demo.json

数据传输的优先级（页面的变更> 传递过来的变量）
jade转义

doctype  html
html
    head
        meta(charset='utf-8')
        - var test = 'jade'
        title #{test.toUpperCase()}变量声明
    body
        - var tests = 'demo'
        - let htmlData= 'script'
        div#test #{tests}
            p #{htmlData}
            p !{htmlData}
            p = htmlData
            p != htmlData
            //如果要输出#{htmlData}或者!{htmlData}格式
            p \#{htmlData}
            p \!{htmlData}
            //不出现undefind
            input(value=newData)

转义以后



  
    
    JADE变量声明
  
  
    demo
      <script>alert(1)</script><span>script</span>
      script
      = htmlData
      != htmlData
      
      #{htmlData}
      !{htmlData}

jade的循环
for循环

//for 循环
        - let obj = {a:"apple",b:"blue"}
        - for ( k in obj)
          //注意标签一定要和for对齐不要和 - 对齐
          p= obj[k]

each循环

//each循环
        - let arr = ["2","3","4"]
        - let objName ={"1":"test","2":"demo"}
        - each val,key in arr
          p= val+"val"
          p= key+"key"
        - each val,key in objName
          p= val+"val"
          p= val+"key"
        //嵌套循环

嵌套循环

   - let sections = [{title:'test',items:[1,2,3]},{title:'demo',items:[4,5,6]}]
        dl
            - each self in sections
                dt= self.title
                - each item,key in self.items
                   dd= item

while循环

    //while循环
        - n = 0
        ul
          - while (n<4)
                li= n++

例如：

doctype
html
    head
        meta(charset='utf-8')
        - let title = 'jade循环'
        title= title
    body
        //for 循环
        - let obj = {a:"apple",b:"blue"}
        - for ( k in obj)
          //注意标签一定要和for对齐不要和 - 对齐
          p= obj[k]
        br
        //each循环
        - let arr = ["2","3","4"]
        - let objName ={"1":"test","2":"demo"}
        - each val,key in arr
          p= val+"val"
          p= key+"key"
        - each val,key in objName
          p= val+"val"
          p= val+"key"
        //嵌套循环
        - let sections = [{title:'test',items:[1,2,3]},{title:'demo',items:[4,5,6]}]
        dl
            - each self in sections
                dt= self.title
                - each item,key in self.items
                   dd= item

解析后



  
    
    jade循环
  
  
    
    
    apple
    
    blue


    
    2val
    0key
    3val
    1key
    4val
    2key
    testval
    testkey
    demoval
    demokey
    
    
      test
      1
      2
      3
      demo
      4
      5
      6
    
 
    
      0
      1
      2
      3

jade的条件语句
if else 语句

 //条件语句 if/else
        - let isBoolen = true
        - let arr = ["jade","express"]
        if arr
            if arr.length >2
                p #{arr.join(",")}
            else if arr.length >1
                p= arr.join(",")
            else
                p not found
        else
            p not found

unless 语句取反

 unless !arr
        p=arr.length

正常的switch case 语句变成 case when 语句

        //switch case语句 变成 case when 语句
        - let name = 'jade'
        case name
            when 'jade'
                p hi jade
            when 'jave'
                p hi java
            when 'koa'
                p hi koa
            default
                p no

例如：

doctype
html
    head
        meta(charset='utf-8')
        - let title ='jade的条件语句'
        title= title
    body
        //条件语句 if/else
        - let isBoolen = true
        - let arr = ["jade","express"]
        if arr
            if arr.length >2
                p #{arr.join(",")}
            else if arr.length >1
                p= arr.join(",")
            else
                p not found
        else
            p not found
        //unless 取反
        unless !arr
        p=arr.length
        //switch case语句 变成 case when 语句
        - let name = 'jade'
        case name
            when 'jade'
                p hi jade
            when 'jave'
                p hi java
            when 'koa'
                p hi koa
            default
                p no

解析后：



  
    
    jade的条件语句
  
  
    
    jade,express
    
    2
    
    hi jade

jade 重复代码块的使用mixin函数
mixin不带参数

mixin test
            p jade study
        //调用mixin函数
        +test
        +test

带参数传递

 //mixin带参数
        mixin fn(testName,arr)
            p=testName
            ul.test
                each item in arr
                    li=item
        //调用mixin函数
        +fn("jade",["one","two","tree"])

嵌套mixin函数

 //嵌套的mixin函数
        mixin group(obj)
            p=obj.name
            +fn(obj.name,obj.arr)
        +group({name:"jade",arr:[1,2,3,4]})

mixin代码块传递

//mixin代码块的传递
        mixin tblock(names)
            p= names
                if blcok
                    block
                else
                    p not found
        +tblock('jade')

mixin属性的传递

//mixin属性的传递
        mixin attr(name)
            p(class != attributes.class)= name
        +attr('attr')(class="demo")

常用 mixin属性的传递

mixin attrs(name)
            p&attributes(attributes)= name
        +attrs('jade')(class="test",id="demo")

mixin不确定参数的传递

mixin testDemo(name, ...items)
            ul(class="#{name}")
                each item in items
                 li= item
        +testDemo('jade','node','java','python')

例如：

doctype
html
    head
        meta(charset='utf-8')
        - let title = 'jade mixin 属性'
        title= title
    body
        //重复的代码块可以用mixin,mixin是一个函数可以传多个参数
        //mixin不带参数
        mixin test
            p jade study
        //调用mixin函数
        +test
        +test

        //mixin带参数
        mixin fn(testName,arr)
            p=testName
            ul.test
                each item in arr
                    li=item
        //调用mixin函数
        +fn("jade",["one","two","tree"])

        //嵌套的mixin函数
        mixin group(obj)
            p=obj.name
            +fn(obj.name,obj.arr)
        +group({name:"jade",arr:[1,2,3,4]})

        //mixin代码块的传递
        mixin tblock(names)
            p= names
                if blcok
                    block
                else
                    p not found
        +tblock('jade')

        //mixin属性的传递
        mixin attr(name)
            p(class != attributes.class)= name
        +attr('attr')(class="demo")

        //常用的传递方式
        mixin attrs(name)
            p&attributes(attributes)= name
        +attrs('jade')(class="test",id="demo")

        //mixin传递不确定参数
        mixin testDemo(name, ...items)
            ul(class="#{name}")
                each item in items
                 li= item
        +testDemo('jade','node','java','python')

解析以后：



  
    
    jade mixin 属性
  
  
    
    
    
        jade study
        jade study
    
    
        jade
        
          one
          two
          tree
        
    
        jade
            jade
            
              1
              2
              3
              4
            
    
        jade
          
not found

    
        attr
    
        jade
    
        
          node
          java
          python

前端那些事之Nuxt.js

Nuxt.js 官网 nuxt.js官网

项目搭建

jade的学习

注释

非缓冲注释 //-

块注释

div是比较特别的标签可以直接用#action.logo，可以不加div

你可能感兴趣的:(前端那些事之Nuxt.js)

前端那些事之Nuxt.js

Nuxt.js 官网 nuxt.js官网

项目搭建

jade的学习

注释

非缓冲注释 //-

块注释

div是比较特别的标签 可以直接用#action.logo，可以不加div

你可能感兴趣的:(前端那些事之Nuxt.js)

div是比较特别的标签可以直接用#action.logo，可以不加div