vue进阶2020总结版

Vue

Vue是一个轻量级，比较容易上手的一个框架。与普通的Jquery库，以及其他的ui框架不同，Vue是更加完整的。

vue特点：

1. 类似于后端的MVC的理念，这里的理念是MVVM。Model-View-ViewModel的简写【模型】指的是数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM
   事件监听。这两个方向都实现的，我们称之为数据的双向绑定。总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View
   和 ViewModel可以互相通信。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d2KhnMcG-1589117099588)(media/97b01f8ed8942207f012ed4d35088ee0.png)]

MVVM是借鉴了后端的MVC理念，并在其基础上衍生。MVVM

就诞生了。这个理念也是Vue的一个非常鲜明的特点。

1. 渐进式

不管是单页面还是多页面。首先都是通过声明式渲染声明每个字段，这是基本的要求。
基本要求不管什么页面，什么功能，都会使用声明式渲染，去渲染我们的字段，因为我们需要展现一些功能一些信息，那么就要通过渲染才可以。通常我们会把公共的头部和尾部抽出来，做成组件。这时候就需要使用组件系统。
单页面应用程序时往往是需要路由，这时候需要把vue的插件（vue-router）拉进来做路由，如果我们的项目足够复杂，大量的使用组件而且难以去管理组件的状态，这个时候我们使用vue-resource,vue-resource是集中来管理我们的状态的。项目完成后需要构建工具来build我们的系统，来提高我们的效果，最后形成完成的项目。

1. 组件化

组件化就像Js里面的函数一样，又或者像后端语言中的类一样。如果一个项目中有一个模块需要多次使用就可以把这个模块写成一个组件然后哪里用到就引入调用即可。比如轮播，一个项目中可能会多次用到就可已封装成一个vue组件。哪里需要用就可以用import进行引入调用。

1. 指令

Vue提供了很多的指令。如@click点击事件指令

<div @click=”active”></div>

V-for

<div v-for="(item,index) in items"></div>

V-for是一个非常好用的指令。在项目中往往很多地方是需要在Js里动态创造标签进行编写。在Js里面动态创造标签不仅语法麻烦，而且需要用字符串编写，一不小心写错了需要找半天。V-for指令就非常好的解决了这个问题。

https://cn.vuejs.org/v2/guide/syntax.html#指令

1. 生命周期

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7K8GdAqh-1589117099591)(media/b3251a15e5779fcfec925b78a149f5c8.png)]

安装vue cli3

1. 安装node.js

首先检查电脑上有没有nodejs

命令：node-v

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kb4Urjqw-1589117099593)(media/389655aa2e7ed47caf46a6c2f8364fde.png)]

安装网址：http://nodejs.cn/

1. 安装vue cli

Npm命令：npm install -g @vue/cli

1. 创建一个项目

// 创建命令 名字

// ↓ ↓ ↓↓

Npm命令：vue create hello-world

错误：vue : 无法加载文件 C:\Users\lihongjie\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 htt ps:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。 所在位置 行:1 字符: 1 + vue init webpack vue_p

解决：以管理员方式打开powershell

npm：set-ExecutionPolicy RemoteSigned

执行策略更改
执行策略可帮助你防止执行不信任的脚本。更改执行策略可能会产生安全风险，如
https:/go.microsoft.com/fwlink/?LinkID=135170
中的 about_Execution_Policies 帮助主题所述。是否要更改执行策略?
[Y] 是(Y) [A] 全是(A) [N] 否(N) [L] 全否(L) [S] 暂停(S) [?] 帮助 (默认值为“N”):
Y

即可

安装步骤：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IEcOr479-1589117099596)(media/98e4b1bb82d326bb4eb8dc84e84b58c3.png)]

打开：cd hello-world

npm run serve

创建成功进入会显示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8yhvoZDE-1589117099598)(media/e3710baeb464f1572d189d2442337cae.png)]

1. 指令

1. v-bind:

什么是: 专门绑定元素的属性值

为什么: {{}}只能绑定元素内容，不能绑定元素属性值

何时: 只要元素的属性值需要根据变量自动变化时，都用v-bind。

如何: <元素 v-bind:属性=“js表达式”

其实可简写为 “:属性”

强调: 1. 加了:的属性，值中不用再加{{}}

加了:的属性，"“就是{{}}的作用，”"中不但可以写值/变量，而且也可以写js表达式

2. 根据条件控制元素的显示和隐藏:

1. 控制一个元素的显示隐藏:

<元素 v-show=“条件表达式”

结果:

1. 如果条件表达式执行结果为true，则当前元素显示——会去掉display:none

如果条件表达式执行结果为false，则当前元素隐藏——会自动将v-show替换为display:none

2. 控制两个元素二选一显示隐藏

问题:
v-show如果控制多个元素多选一显示隐藏，必须把判断条件在每个元素上都重复写一遍，代码繁琐！

解决: v-if v-else

如何:

<元素1 v-if=“判断条件”>

<元素2 v-else-if=”判断条件”>

结果:

如果判断条件返回true，就显示第一个元素，删除第二个元素

如果判断条件返回false，就显示第二个元素，删除第一个元素

强调:

1. 两个元素之间不能插入其他元素

2. v-else不需要属性值

3. 控制多个元素多选一显示隐藏

用v-else-if

<元素1 v-if=“条件1”>

<元素2 v-else-if=“条件2”>

…

<元素n v-else>

原理：

从上向下一次判断每个v-if或v-else-if后的条件。

只要条件不满足就删除该元素

只有满足条件的元素才会保留下来用于显示。

如果判断走到了下一个元素上，隐含着上一个元素的条件肯定不满足

强调:

1. 多个元素之间不能插入其他元素

2. v-else不需要属性值

总结: v-show vs v-if

v-show采用display:none 隐藏元素

v-if 采用直接删除元素隐藏元素

4. 反复生成多个相同结构的元素

5. 前提: 一定有一个数组或一个数值，让你可参照着反复生成元素内容

6. 如何:

<要反复生成的元素 v-for="(item,i) of 数组或数值">

在<子元素>中可以将item和i用于绑定值

…

</要反复生成的元素>

3. 原理:

数组中有几个元素，vue在扫描时，就会重复创建几个相同结果的元素。

每遍历数组中一个元素，就可以获得两个值:
第一个变量item获得数组中当前元素的值，第二个变量i获得当前正在遍历的数组元素的下标位置。

每创建一个元素，就会将重复结构中的绑定语法，替换为本次遍历获得的item或index值

4. 强调:

1. 想重复生成哪个元素，v-for就放在哪个元素的开始标签中！

2. v-for=" of "原理和js中的for of完全一样，只不过js中的for
   of只能获得元素的内容，无法获得元素的下标。而vue中的v-for
   of即可获得元素内容，又可获得下标。

5. :key :
   每个v-for的元素中，都强烈绑定一个key属性，值为当前元素的下标位置index。

<要反复生成的元素 v-for="(item,i) of 数组或数值" :key=“i”>

在<子元素>中可以将item和i用于绑定值

…

</要反复生成的元素>

不加:key，每个<li>最终除了内容，在属性上是毫无差别的，当数组中某个位置的元素发生更改时，vue只能用最笨的方法，遍历所有li，把所有li的内容重新更新一遍。

加:key， 每个<li>就变成: <li key=“0”><li
key=“1”>…，就都有了一个唯一的标识。当数组中某个元素发生改变时，vue就可根据修改元素的下标位置，对应找到相同key值的元素，只更新这个位置相同的元素，别的元素保持不变。

5. 绑定事件:

<元素 v-on:事件名=“处理函数”

可简写为@事件名=“处理函数”

四种情况:

1. 如果处理函数不需要参数，可省略()

2. 如果处理函数需要参数，也可加(实参值, …)

3. 如果处理函数需要获得事件对象

4. 不需要在绑定时传参

5. 只在methods中定义函数时添加第一个形参e即可。

6. e获得的对象和DOM中事件对象e，完全一样。

7. 绑定HTML片段内容:

问题:
{{}}不能用于绑定html片段。如果{{}}绑定的是HTML片段，不会解析其中的内嵌标签和特殊符号，而是尽量保持原样显示

解决: 今后，凡是绑定HTML片段，都用v-html

强调: v-html是指令，应该放在开始标签内！

2. axios:

什么是: 专门发送ajax请求的js函数库

Vue官方推荐使用第三方函数库: axios

何时: 今后只要在vue中发送ajax请求，都可用axios

说明: axios其实是第三方独立的函数库，并不仅仅局限于vue中！

如何:

1. 发get请求:

axios.get(

“服务端接口地址”,

{

params:{

参数:值,

… : …

}

}

).then(result=>{

result.data 才是服务器端返回的结果！

})

2. 发post请求:

补: 如果服务端给出的接口是post类型，可用postman软件先测试一下。

axios.post(

“服务端接口地址”,

//本来需要"查询字符串"

//比如:“uname=dingding&upwd=123456”

//不推荐

//推荐: 对象语法

//但是必须借助一个工具叫qs.min.js

//<script src=“js/qs.min.js”>

//Qs的stringify函数可将对象转为查询字符串格式

Qs.stringify({

变量1:值1,

变量2:值2

})

//转换之后: “变量1=值1&变量2=值2”

).then(result=>{

result.data 才是服务器端返回的结果！

})

页面跳转传递参数：

跳转的页面：

Bun(){//跳转方法

This.$router.push({

path:”/index”,//跳转路由

name:”index”//跳转名字

query:{ name:”name”},

params:{usersitelist:”传递的参数”}

})

}

跳转到的页面接受值：

//接受数据的值

↓↓

this.chuan=this.$route.param. usersitelist
=值2"

).then(result=>{

result.data 才是服务器端返回的结果！

})

页面跳转传递参数：

跳转的页面：

Bun(){//跳转方法

This.$router.push({

path:”/index”,//跳转路由

name:”index”//跳转名字

query:{ name:”name”},

params:{usersitelist:”传递的参数”}

})

}

跳转到的页面接受值：

//接受数据的值

↓↓

this.chuan=this.$route.param. usersitelist