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
<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if IE 9]><html class="ie9"><![endif]-->
<!--[if IE]><html class="ie"><![endif]-->
headmeta(charset='utf-8')title jade study
bodyh2 注释//div 单行注释//section.title.title2#sectionIDh2 非缓冲注释 //-//- #dkkdkh2 块注释//-divstrong ebspan dkdivstrong ebspan dkh2 div是比较特别的标签 可以直接用#action.logo，可以不加div#action.logoa(href="#",id="logo",class="font") baiduinput(type="text",name="jade",value="jade")input(type="checkbox",name="jade",checked)brp.1 kd1 kd1 kd1 kd1 kdbrp| 1 dkkspan dd| 1 dkkstrong dkdkd| 1 dkk| 1 dkk
</html>//编译以后<!DOCTYPE html>
<html><!--ie6,7,8-->
</html><!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if IE 9]><html class="ie9"><![endif]-->
<!--[if IE]><html class="ie"><![endif]-->
<head><meta charset="utf-8"><title>jade study</title>
</head>
<body><h2>注释</h2><!--div 单行注释//--><section id="sectionID" class="title title2"></section><h2>非缓冲注释 //-</h2><h2>块注释</h2><div><strong>eb</strong><span>dk</span></div><h2>div是比较特别的标签 可以直接用#action.logo，可以不加div</h2><div id="action" class="logo"><a href="#" id="logo" class="font">baidu</a><input type="text" name="jade" value="jade"><input type="checkbox" name="jade" checked><br><p>1 kd1 kd1 kd1 kd1 kd</p><br><p>1 dkk<span>dd</span>1 dkk<strong>dkdkd</strong>1 dkk1 dkk</p></div>
</body></html>

jade的变量声明和数据传递

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

例如

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

解析以后

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>JADE变量声明</title></head><body><div id="test">demo<p>= tests</p><p>= demo</p></div></body>
</html>

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

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

json数据传输

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

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

doctype  html
htmlheadmeta(charset='utf-8')- var test = 'jade'title #{test.toUpperCase()}变量声明body- var tests = 'demo'- let htmlData= '<script>alert(1)</script><span>script</span>'div#test #{tests}p #{htmlData}p !{htmlData}p = htmlDatap != htmlData//如果要输出#{htmlData}或者!{htmlData}格式p \#{htmlData}p \!{htmlData}//不出现undefindinput(value=newData)

转义以后

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>JADE变量声明</title></head><body><div id="test">demo<p>&lt;script&gt;alert(1)&lt;/script&gt;&lt;span&gt;script&lt;/span&gt;</p><p><script>alert(1)</script><span>script</span></p><p>= htmlData</p><p>!= htmlData</p><!--如果要输出#{htmlData}或者!{htmlData}格式--><p>#{htmlData}</p><p>!{htmlData}</p><!--不出现undefind--><input></div></body>
</html>

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 arrp= val+"val"p= key+"key"- each val,key in objNamep= val+"val"p= val+"key"//嵌套循环

嵌套循环

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

while循环

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

例如：

doctype
htmlheadmeta(charset='utf-8')- let title = 'jade循环'title= titlebody//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 arrp= val+"val"p= key+"key"- each val,key in objNamep= val+"val"p= val+"key"//嵌套循环- let sections = [{title:'test',items:[1,2,3]},{title:'demo',items:[4,5,6]}]dl- each self in sectionsdt= self.title- each item,key in self.itemsdd= item

解析后

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>jade循环</title></head><body><!--for 循环--><!--注意标签一定要和for对齐不要和 - 对齐--><p>apple</p><!--注意标签一定要和for对齐不要和 - 对齐--><p>blue</p><br><!--each循环--><p>2val</p><p>0key</p><p>3val</p><p>1key</p><p>4val</p><p>2key</p><p>testval</p><p>testkey</p><p>demoval</p><p>demokey</p><!--嵌套循环--><dl><dt>test</dt><dd>1</dd><dd>2</dd><dd>3</dd><dt>demo</dt><dd>4</dd><dd>5</dd><dd>6</dd></dl><!--while循环--><ul><li>0</li><li>1</li><li>2</li><li>3</li></ul></body>
</html>

jade的条件语句
if else 语句

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

unless 语句取反

 unless !arrp=arr.length

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

        //switch case语句 变成 case when 语句- let name = 'jade'case namewhen 'jade'p hi jadewhen 'jave'p hi javawhen 'koa'p hi koadefaultp no

例如：

doctype
htmlheadmeta(charset='utf-8')- let title ='jade的条件语句'title= titlebody//条件语句 if/else- let isBoolen = true- let arr = ["jade","express"]if arrif arr.length >2p #{arr.join(",")}else if arr.length >1p= arr.join(",")elsep not foundelsep not found//unless 取反unless !arrp=arr.length//switch case语句 变成 case when 语句- let name = 'jade'case namewhen 'jade'p hi jadewhen 'jave'p hi javawhen 'koa'p hi koadefaultp no

解析后：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>jade的条件语句</title></head><body><!--条件语句 if/else--><p>jade,express</p><!--unless 取反--><p>2</p><!--switch case语句 变成 case when 语句--><p>hi jade</p></body>
</html>

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

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

带参数传递

 //mixin带参数mixin fn(testName,arr)p=testNameul.testeach item in arrli=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= namesif blcokblockelsep 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 itemsli= item+testDemo('jade','node','java','python')

例如：

doctype
htmlheadmeta(charset='utf-8')- let title = 'jade mixin 属性'title= titlebody//重复的代码块可以用mixin,mixin是一个函数可以传多个参数//mixin不带参数mixin testp jade study//调用mixin函数+test+test//mixin带参数mixin fn(testName,arr)p=testNameul.testeach item in arrli=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= namesif blcokblockelsep 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 itemsli= item+testDemo('jade','node','java','python')

解析以后：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>jade mixin 属性</title></head><body><!--重复的代码块可以用mixin,mixin是一个函数可以传多个参数--><!--mixin不带参数--><!--调用mixin函数--><p>jade study</p><p>jade study</p><!--mixin带参数--><!--调用mixin函数--><p>jade</p><ul class="test"><li>one</li><li>two</li><li>tree</li></ul><!--嵌套的mixin函数--><p>jade</p><p>jade</p><ul class="test"><li>1</li><li>2</li><li>3</li><li>4</li></ul><!--mixin代码块的传递--><p>jade<p>not found</p></p><!--mixin属性的传递--><p class="demo">attr</p><!--常用的传递方式--><p id="demo" class="test">jade</p><!--mixin传递不确定参数--><ul class="jade"><li>node</li><li>java</li><li>python</li></ul></body>
</html>

转载于:https://my.oschina.net/yongxinke/blog/1590764

前端那些事之Nuxt.js相关推荐

前端那些事之原生js实现jquery常用方法
2019独角兽企业重金招聘Python工程师标准>>> 原生js封装,实现jquery中常用方法 //定义一个对象 - 名字是$ var $$ = function() {this ...
前端那些事之原生 js实现贪吃蛇篇
2019独角兽企业重金招聘Python工程师标准>>> 原生js实现贪吃蛇 <!DOCTYPE html> <html lang="en"> ...
合格前端系列第十一弹-初探 Nuxt.js 秘密花园
前言笔者最近业余时间想着学点新东西,于是开始接触服务器端渲染(SSR),花了一周的时间学习和实战,然后在周末高仿掘金撸了一个 SSR 的 Demo 项目. 技术栈选的是平滑开箱的 Nuxt,整个项目 ...
基于 Vue JS、Element UI、Nuxt JS的项目PC端前端手册
基于 Vue JS.Element UI.Nuxt JS的项目PC端前端手册前言:笔记写于2020年5月左右,刚开始做前端时整理的笔记 1.环境搭建 1.安装nodeJs 官网下载地址:http ...
NUXT.js 前端SSR框架使用
一.NUXT.js简介随着工程量的不断增加,业务处理复杂度提高,传统前后端分离页面的整体加载速度有可能成为瓶颈,另一方面对SEO也非常不友好,而现在很多应用也开始使用SSR解决这一问题,但采用SSR ...
前端技术之：使用npx创建一个Nuxt.js项目
$ npx create-nuxt-app my-first-nuxtjs npx: 401 安装成功,用时 43.891 秒 > Generating Nuxt.js project in / ...
服务端渲染(SSR)和Nuxt.js
服务端渲染(SSR) 客户端渲染和传统服务端渲染的问题 SPA应用有两个非常明显的问题: 首屏渲染慢不利于 SEO 传统的服务端渲染又存在: 应用的前后端部分完全耦合在一起,在前后端协同开发方面会有 ...
【好文翻译】Difference Between Next.js vs. Nuxt.js vs. Nest.js
Difference Between Next.js vs. Nuxt.js vs. Nest.js 编程可以被认为是创造一些令人惊奇和信息事物的过程.如果你是一个程序员,你必须同每项新兴前沿技术保持 ...
nuxt.js实战之移动端rem
nuxt.js的项目由于是服务端渲染,通过js动态调整不同尺寸设备的根字体这种rem方案存在一种缺陷.由于设置字体的代码不能做服务端渲染,导致服务端返回的代码一开始没有相应的跟字体,直到与前端代码进行 ...

前端那些事之Nuxt.js

Nuxt.js 官网 nuxt.js官网

项目搭建

jade的学习

前端那些事之Nuxt.js相关推荐

最新文章

热门文章