nuxt入门教程（一）vue如何实现全站静态化？

Posted 2023-04-05

参考技术A

不知道你有没有发现，vue做的网站除了首页以外，其他页面根本就不能被百度收录。以至于有很多做seo的同事痛斥其种种不是，最后被强迫改为不分离开发。

至于vue的详情页为什么不能被百度收录，这就涉及到了spa的核心概念，因为数据都是异步获取来的，前端根本就没有所谓的纯静态一说。通俗点讲就是，页面都是js通过ajax获取到数据以后，动态生成的。既然它本来就没有一个文件放在服务器上，当然，爬虫也就不能获取到这个静态的url地址了。

但是url静态地址又是做seo必须的东西..

所以今天龙哥教你一套新的前端框架，基于vue的ssr前端框架—nuxt。本地开发的时候，使用vue语法，模块化你的项目，然后发布的时候生成静态，把ajax获取来的内容转化成静态html以利于seo。真正实现模块化和静态化两不误！

首先说明一下，龙哥本地的nuxt环境是2.8.1。如果你的版本号和我的不符，可能有部分语法你需要参考官方API开发手册。

使用命令：

小知识：啥是npx？
我们以前不是用的npm吗，但是这货每次安装东西的时候，你还得给全局装一个-g，相当于你电脑里老得有这个服务。
但其实你项目中已经包含了运行时候所需要得所有东西了。
如果你用了npx，他不会给你装这个东西，而是装得时候用一下，用完了就卸载，效率更高。
npx是nodejs在5.0版本以后新加入的，非常牛逼。

所以我们现在来cnpm -g 那一步都不需要了，我们直接npx创建项目即可！！！
直接输入

注意这里有可能报错，不用管他，过个几秒就安装好了。
还有一个需要注意的地方，你的git版本不能低于2.17否则后面有几个需要arrow选择得地方你可能选不了，请升级你的git版本。

然后就可以开始安装了。

等你看到这个界面，就是安装好了。

他会自动安装所需要得所有包，安装完了以后你进入localhost:3000

出现这个界面，就OK了

vue双向绑定数据改为静态数据

程序猿
vue中如何实现数据的双向绑定
  vue中如何实现数据的双向绑定
  vue中的指令
      v-cloak：
      v-model（表单元素设置了之后会忽略掉value，checked，selected）
      v-text：代替 渲染成文本（不会识别html标签）可以防止网速卡慢时出现在页面上
      v-html：把html字符渲染成html
      v-once：只绑定一次(不能写成v-once=”msg”)
      v-bind：动态地绑定一个或多个特性
      v-for：遍历数组、对象、字符串、数字
      条件渲染：v-if v-else-if v-else与v-show
      v-show
      v-on：监听 DOM 事件(v-on:click可缩写为@click)
      自定义指令
  vue中的修饰符
    表单修饰符
    事件修饰符
  表单元素双向数据绑定（双向同步）
    单选框
    复选框
    下拉框
  Vue中的Class样式与style样式动态绑定（动态的优先级高于原来的）
  根据hash实现单页面开发
vue中如何实现数据的双向绑定
实现视图变化数据跟着变：分两步，上面get中的为第二步（即再次读取的时候会调用get方法得到之前设置的值，以此来实现动态改变）
由于直接写obj.name = this.value;会导致循环调用set方法，所以要借助中间对象的形式把值赋给中间对象，获取obj.name的时候我们获取中间对象的最新值即可
复制代码
let obj = name:'zhufeng',age:9;//数据
let temp = name:"lily";//借助中间对象
let input1 = document.getElementById("box2");//视图
//对某一个对象使用了Object.defineProperty方法之后就要写对应的get和set方法了，不然无法像操作普通对象一样访问或者设置它的属性
//此方法不兼容IE8及以下
Object.defineProperty(obj,"name",
configurable:true,//属性是否可删除
writable:false,//属性是否可修改
enumerable:false,//属性是否可枚举
get()//获取obj的属性名对应的属性值时会调用该方法
/*2*/ return temp['name'];
,
set(val)//设置obj的属性名对应的属性值时会调用此方法

//实现视图变化数据跟着变：分两步，上面get中的为第二步（即再次读取的时候会调用get方法得到之前设置的值，以此来实现动态改变）
//由于直接写obj.name = this.value;会导致循环调用set方法，所以要借助中间对象的形式把值赋给中间对象，获取obj.name的时候我们获取中间对象的最新值即可
/*1、*/ temp.name=val;

//实现数据变化视图改变
input1.value=val;

);
//为了初始化的时候让视图中（文本框中）有值：出现obj.name说明要访问这个属性就会用到defineProperty中的get方法
input1.value=obj.name;
//实现视图改变数据跟着改变
input1.addEventListener("input",function()
obj.name = this.value;//当值变化时会调用set方法
,false);
复制代码
vue中的指令
dom元素的行间属性，vue提供了内置的指令，必须以v-开头，后面的值均为变量

v-cloak：
消除页面刚加载时会看到闪一下的效果，可加给最外层的根元素；

//需要添加对应的css样式
[v-cloak]
display: none;

v-model（表单元素设置了之后会忽略掉value，checked，selected）
让表单元素和数据实现双向绑定（映射关系）

<input type="text" v-model="msg">
v-text：代替 渲染成文本（不会识别html标签）可以防止网速卡慢时出现在页面上
中的值都会解析成文本内容；

msg等价于<div v-text="msg"><!--此处不能再写内容,防止出现闪的效果--></div>
v-html：把html字符渲染成html
<div v-html="msg"></div>
v-once：只绑定一次(不能写成v-once=”msg”)
<div v-once>msg</div>
v-bind：动态地绑定一个或多个特性
// 绑定一个属性
<img v-bind:src="imageSrc">
//可缩写为如下形式，此时:src后面的值就可以是变量、表达式、赋值运算、计算、三元运算符（尽量少写逻辑运算）
<img :src="imageSrc">//此时imageSrc就代表一个变量
v-for：遍历数组、对象、字符串、数字
解决了循环问题，更高效，会在原有的基础上进行修改，会复用原有的结构，不会修改所有DOM

复制代码
要循环创建哪一个标签就在那一个标签上加v-for，后面的循环最好用in，用of有时会报错循环数组或对象使用v-for指令
<div v-for="(val,index) in msg">
val,index//msg为数组时，val为数组中的每一项，index为索引
</div>
<div v-for="(value,key,index) in msg">
key=valueindex;//msg为对象时，key为对象中的每个属性名,value为属性值,index为索引
</div>
复制代码
条件渲染：v-if v-else-if v-else与v-show
v-if v-else-if v-else：条件满足才渲染v-if所在标签以及标签内的内容；（操作的是DOM结构）

设置条件判断的DOM元素必须是连续的
操作的是DOM元素
key 管理复用的元素 若不想复用DOM元素,只需要给相应的DOM元素增加不同的key值
支持 template 标签
频繁的显示和隐藏用v-if会很浪费性能(操作的是DOM结构)，此时要用v-show(操作的是CSS样式)
<div id="app">
<button @click="flag=!flag">请点击</button>
//template标签是vue提供给我们的没有任何实际意义，用来包裹元素用的（v-show不支持template标签）
<template v-if="flag">
<label>登录</label>
<input type="text" key="1">//key 管理复用的元素 若不想复用DOM元素,只需要给相应的DOM元素增加不同的key值
</template>
<template v-else>
<label>注册</label>
<input type="text" key="2">
</template>
</div>
let vm=new Vue(
el:'#app',
data:
flag:true

);
v-show
条件满足才让v-show所在标签以及标签内的内容显示（操作的是元素的css样式），不支持 template 标签

<input type="text" v-show="flag">//flag为true时，input框才显示
v-on：监听 DOM 事件(v-on:click可缩写为@click)
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码（在 methods 对象中定义的方法，而且methods中的方法名不能和data中的变量名一样）

<div v-on:click ="fn1('zhaosi,$event')">msg</div>
<div @click ="fn1('zhaosi,$event')">msg</div>//上面的简写
方法后面可加（）可不加。不加的话默认会传入事件对象e，
加（）代表要传参数，如果要用事件对象，则需要传$event
自定义指令
可通过在vue实例的directives：属性中赋予自定义指令意义

复制代码
<div id="app">
<button v-color="flag">变色</button>
</div>
let vm=new Vue(
el:'#app',
data:
flag:true
,
directives://在这里赋予对应自定义指令意义
//可直接写对应的指令不用写v-
color(el,val)
//el和val都是默认给的：el指的是指令所绑定的DOM元素，val是一个对象，里面存储的是有关指令的信息，可用val.value获取到指令绑定的变量（或者表达式）所代表的值，这里就是flag所代表的值 'red'
el.style.background=val.value;


);
复制代码
vue中的修饰符
表单修饰符
v-model.number：将用户的输入值转为数值类型
v-model.lazy：在表单触发change事件时更新数据，而非触发input事件时更新数据
v-model.trim：自动过滤用户输入的首尾空白字符
事件修饰符
@click.stop：阻止点击事件的传播（往上传播和往下传播都会被阻止）
@submit.prevent：阻止点击提交按钮时的默认行为（阻止事件的默认行为）
@click.capture：点击的时候让事件在捕获阶段执行；
@click.once：只在第一次点击的时候让绑定的事件执行；
@click.self：只有点击的事件源是自己的时候触发事件；（判断事件源）
表单元素双向数据绑定（双向同步）
使用v-model属性可让input中的内容和数据实现双向同步，但是使用了v-model属性之后，input的value、checked、select属性都会失效

复制代码
<div id="app">
<input type="text" v-model="msg">
</div>
<script src="vue.js"></script>
<script>
let vm=new Vue(
el:'#app',//vue的属性和方法对哪个DOM根元素起作用（对它的后代元素也起作用）
//数据
如果data中属性的值是一个数组，如果想改变数组中内容，只能使用原生的会修改原数组的方法进行修改，普通的 数组[索引]=值 不行；
data://写在data中的属性都会挂载到当前实例上
msg:'zhufeng'

);
console.log(vm.msg);//'zhufeng'
</script>
复制代码
单选框
对于单选框和复选框来说，加了v-mdel属性后，初始设置的value属性不会失效；

复制代码
<div id="app">
<input type="radio" v-model="msg" value="男">男
<input type="radio" v-model="msg" value="女">女
msg
</div>
let app3=new Vue(
el:'#app',
data:
msg:'男'//默认选中的项，值与value的值对应，点击女的时候msg就会动态改为女

);
复制代码
复选框
单个复选框：

复制代码
<div id="app">
//复选框中加了v-model后value依然可用
<input type="checkbox" v-model="msg">
</div>
let app3=new Vue(
el:'#app',
data:
//如果是复选框且只有一个的时候，会把msg的值转化为布尔值，如果为true，代表选中
msg:false//为false时代表默认不选中

);
复制代码
多个复选框，需要绑定到同一个数组，而且要给input设置初始value值，为了在后面选中的时候获取到对应的选中框的值

复制代码
<div id="app">
//复选框中加了v-model后value依然可用
<input type="checkbox" v-model="msg" value="吃饭">吃饭
<input type="checkbox" v-model="msg" value="睡觉">睡觉
<input type="checkbox" v-model="msg" value="敲代码">敲代码
msg
</div>
new Vue(
el: '#app',
data:
msg: [] //此处的msg需要是一个数组

)
复制代码
下拉框
复制代码
<div id="app">
//加了multiple后就变为多选框，用ctrl+左键点击多选，msg也要换为一个数组
<select v-model="msg" multiple>
//加了disabled时候用户就不能选中此项了
//option中的value是给写代码的人看的
<option value="0" disabled>请选择地区</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">浙江</option>
</select>
msg//如果option的value属性不写，则取的是option中的内容
</div>
let app3=new Vue(
el:'#app',
data:
msg:'0'//默认选中的某一项，值与每一个option的value值对应

);
复制代码
Vue中的Class样式与style样式动态绑定（动态的优先级高于原来的）
：class=””或者：class=”[]：
通过：class=””或者：class=”[]来动态的绑定class样式，与原来的class样式不冲突。
有两种方式：
1、对象的方式绑定
2、数组的方式绑定

复制代码
<div id="app">
<!--以对象的方式动态绑定class样式：当flag为true时，z样式生效。y样式不生效-->
<div class="x" :class="z:flag,y:false">我的世界</div>
<!--以数组的方式动态绑定class样式：y，z两个样式都会生效-->
<div class="x" :class="[y,z]">我的世界</div>
</div>
let vm=new Vue(
el:'#app',
data:
flag:true

);
复制代码
：style=””或者：style=”[]”：绑定行内的样式
通过上述的方式来动态绑定行内的样式

复制代码
<div id="app">
//第一种是对象的方式
<div :style="backgroundColor:'red',color:'pink'">我是谁</div>
//第二种是数组的方式
<div :style="[str1,str2]">我的世界</div>
</div>
let vm=new Vue(
el:'#app',
data:
str1:backgroundColor:'blue',
str2:color:'yellow'

);
复制代码
根据hash实现单页面开发
通过hash记录跳转的路径（可以产生历史管理）
浏览器自带的历史管理方法history（history.pushState(),push到哪里就跳转到哪里），可能会导致404错误（因为用户可能会随意输入路径）
开发时使用hash的方式，上线的时候使用history的方式
[使用hash存储]

//存储：存储的时候要把存储的对象转换成字符串
localStorage.setItem('todo',JSON.stringify(obj));
//获取：获取的时候要把字符串转换成对象
JSON.parse(localStorage.getItem('todo'));
原文地址：https://www.cnblogs.com/Zz-maker/p/10711506.html
推荐文章
ASP.NET Core 使用 Hangfire 定时任务
在.NET Core 中实现健康检查
c# aspose操作word文档
图片字节流和字符串互转，读存图片。
Go项目开源规范
flex布局实例demo全解
mathcurve.com
unity模型切割
【基础】为何odd negative scaling会导致Unity动态合批失败？
MySQL 有关用户密码
【Redis】info 命令详解
frida hook so文件
python 常见算法面试题
助教工作总结
第十六周助教总结
1015 Reversible Primes (20 分)
1014 Waiting in Line (30 分)
GitLab: Author ‘xxx‘ is not a member of team
关于python的算法程序，如何做成分布式处理，并解决环境的冲突等问题的记录
鲲鹏arm架构编译mysql
用java的眼光看js的oop
SpringBoot YAML文件特殊类型配置
【框架】一种通知到多线程框架
【网络基础】数据包生命
【网络编程】TCPIP-小笔记集合
【网络编程】TCPIP-8-套接字的多种选项
【网络编程】TCPIP-7-域名与网络地址
【网络编程】TCPIP-6-TCP的半关闭
Web应用安全防护-WAF
漫画 | 这样的程序员男友，让我分分钟想剖腹自尽！
Copyright 2008-2020 ©晋ICP备16003840号-1 参考技术A 你好，是可以改变的，vue中有2种数据绑定的方式：

单向数据绑定（v-bind）：数据只能从data流向页面；
双向数据绑定（v-model)：数据不仅能从data流向页面，还可以从页面流向data；
备注：

双向数据绑定一般都应用在表单类（输入类）元素上 （如：input、select等）； 参考技术B vue双向绑定数据改为静态数据实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.na... 参考技术C 只是input改变改变model也就是data中的数据，实现了 单向的绑定， 如何通过model,data的数据改变来改变。