Vue快速入门（从入门到实战）（IDEA版）一篇文章即可快速入门（可直接开发前后端分离项目

前端资料汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。

然后install安装即可

安装完成

控制台测试

输入node-v然后回车

2、NPM

npm版本输入npm -v然后回车

npm默认的仓库地址是在国外网站，速度较慢，建议大家设置到淘宝镜像。

但是切换镜像是比较麻烦的正-推荐切换镜像的工具：nrm

我们首先安装nrm，这里-g代表全局安装

npm install nrm -g

输入：nrm ls报错

找到该文件C:\Users\ZHENG\AppData\Roaming\npm\node_modules\nrm

//const NRMRC = path.join(process.env.HOME, ‘.nrmrc’); (删除)

const NRMRC = path.join(process.env[(process.platform == ‘win32’) ? ‘USERPROFILE’ : ‘HOME’], ‘.nrmrc’);

继续输入nrm ls

切换淘宝镜像nrm use taobao

测试一下nrm test taobao

二、工程案例

---

1、创建工程

2、安装Vue

在IDEA的终端当中

在终端上输入：npm init -y报错

（1）初始化项目

npm init -y

（2）安装Vue

只再当前项目安装Vue：npm install vue --save

打开下面内容证明安装完成

3、创建HTML文件

（1）编写基本的HTML页面

xxx非常美丽！

运行查看一下

（2）使用Vue

a、定义属性

首先通过new Vue()来创建Vue实例

然后构造函数接收一个对象，对象中有一些属性:

• el:是element的缩写，通过id选中要渲染的页面元素，本例中是一个div

• data:数据，数据是一个对象，里面有很多属性，都可以渲染到视图中

• name:这里我们指定了一个name属性

页面中的h2元素中，我们通过{{name)}的方式，来渲染刚刚定义的name属性。

{{name}} xxx非常美丽！

运行测试

在谷歌浏览器控制台

{{name}} xxx非常美丽！

{{num}} 位其着迷！

{{name}} xxx非常美丽！

{{num}} 位其着迷！

<button @click=“num++”>+

{{name}} xxx非常美丽！

{{num}} 位其着迷！

b、定义属性

<button @click=“handleClick”>点我

<button @click=“num++”>+

{{name}} xxx非常美丽！

{{num}} 位其着迷！

三、Vue生命周期（钩子）

---

每个Vue实例在被创建时都要经过一系列的初始化过程︰

创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数)。

每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。

1、生命周期:

2、渲染数据：钩子函数

例如: created代表在vue实例创建后;

我们可以在Vue中定义一个created函数，代表这个时期的构造函数;

<button @click=“handleClick”>点我

<button @click=“num++”>+

{{name}} xxx非常美丽！

{{num}} 位其着迷！

3、模拟实际渲染数据：this 我们可以看下在vue内部的this变量是谁，我们在created的时候，打印this

<button @click=“handleClick”>点我

<button @click=“num++”>+

{{name}} xxx非常美丽！

{{num}} 位其着迷！

延时一秒

总结: this就是当前的Vue实例，在Vue对象内部，必须使用this才能访问到Vue中定义的data内属性、方法等。

四、指令

---

什么是指令?

指令(Directives)是带有 v-前缀的特殊属性。

例如我们在入门案例中的v-model，代表双向绑定。

1、插值表达式

（1）花括号

格式：

{{表达式}}

说明;

• 该表达式支持JS语法，可以调用js内置函数（必须有返回值)

• 表达式必须有返回结果。例如1+1，没有结果的表达式不允许使用，如: var a = 1+1;

• 可以直接获取Vue实例中定义的数据或函数

示例

HTML：

i{name ) )

JS:

var app =new vue({

el:“#app”,

data:{

name:“Jack”"

}

})

2、差值闪烁

使用0方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的

{{}}

加载完毕后才显示正确数据，我们称为插值闪烁。

我们将网速调慢一些，然后试试看刚才的案例:

刷新页面有延迟

3、使用v-text和v-html

使用v-text和v-html指令来替代{{}}说明:

v-text∶将数据输出到元素内部，如果输出的数据有

代码，会作为普通文本输出

<button @click=“handleClick”>点我

<button @click=“num++”>+

xxx非常美丽！

{{num}} 位其着迷！

运行测试

v-html:将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染

从上述结果当中似乎没有什么区别

以下继续修改代码

<button @click=“handleClick”>点我

<button @click=“num++”>+

xxx非常美丽！

{{num}} 位其着迷！

v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出

v-html:将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染

4、v-model

刚才的v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。

接下来学习的v-model是双向绑定，视图(view)和模型(Model)之间会互相影响。

既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。

目前v-model的可使用元素有:

• input

• select

• textarea

• checkbox

• radio

• components（Vue中的自定义组件）

<button @click=“handleClick”>点我

<button @click=“num++”>+

xxx非常美丽！

{{num}} 位其着迷！

---

编程语言分类

Java

JavaScript

Python

您已购买下列课程：{{lessons.join(“,”)}}

运行查看

5、v-on

（1）基本用法

v-on指令用于给页面元素绑定事件。

语法:

v-on:事件名=“js片段或函数名”

简写语法:

真

@事件名="js片段或函数名“

例如v-on:click='add'可以简写为@click='add'

示例：

<button @click=“handleClick”>点我

<button @click=“num++”>+

<button @click=“decrement”>-

xxx非常美丽！

{{num}} 位其着迷！

---

编程语言分类

Java

JavaScript

Python

您已购买下列课程：{{lessons.join(“,”)}}

（2）点击事件（包含关系（冒泡））

<button @click=“handleClick”>点我

<button @click=“num++”>+

<button @click=“decrement”>-

xxx非常美丽！

{{num}} 位其着迷！

---

编程语言分类

Java

JavaScript

Python

您已购买下列课程：{{lessons.join(“,”)}}

---

div

<button @click=“print(‘button’)”>点我试试

点击内部同时触发两个

点击外面触发一个事件

（3）点击事件（设置不自动包含关系（停止冒泡））

<button @click=“handleClick”>点我

<button @click=“num++”>+

<button @click=“decrement”>-

xxx非常美丽！

{{num}} 位其着迷！

---

编程语言分类

Java

JavaScript

Python

您已购买下列课程：{{lessons.join(“,”)}}

---

div

<button @click.stop=“print(‘button’)”>点我试试

现在这种情况只需要添加一个即可

（4）事件修饰符

在事件处理程序中调用event.preventDefault()或event.stopPropagation()）是非常常见的需求。

尽管我们可以在方法中轻松实现这点，但更好的方式是:方法只有纯粹的数据逻辑，而不是去处理DOM事件细节。

为了解决这个问题，Vue.js 为v-on提供了事件修饰符。

之前提过，修饰符是由点开头的指令后缀来表示的

• stop ︰阻止事件冒泡

• prevent :阻止默认事件发生

• capture :使用事件捕获模式

• self∶只有元素自身触发事件才执行。(冒泡或捕获的都不执行)

• once:只执行一次

（5）阻止默认事件发生

阻止a标签跳转

<a href=“http://www.baidu.com” @click.prevent=“print(‘百度’)”>百度一下，你就疯了！

7、v-for

遍历数据渲染页面是非常常用的需求,Vue中通过v-for指令来实现。

（1）遍历数组

语法：

v-for="item in items “”

• items:要遍历的数组，需要在vue的data中定义好。

• item:迭代得到的数组元素的别名

示例：

<button @click=“handleClick”>点我

<button @click=“num++”>+

<button @click=“decrement”>-

xxx非常美丽！

{{num}} 位其着迷！

---

编程语言分类

Java

JavaScript

Python

您已购买下列课程：{{lessons.join(“,”)}}

---

div

<button @click.stop=“print(‘button’)”>点我试试

<a href=“http://www.baidu.com” @click.prevent=“print(‘百度’)”>百度一下，你就疯了！

---

• {{u.name + “,” + u.gender + “,”+ u.age }}

  运行结果

  

  （2）遍历数组：多个参数（数组角标）

  在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：

  语法

  v-for=" (item, index) in items "

  • items:要迭代的数组

  • item:迭代得到的数组元素别名

  • index:迭代到的当前元素索引，从0开始。

  

  <button @click=“handleClick”>点我
  

  <button @click=“num++”>+

  <button @click=“decrement”>-

  xxx非常美丽！
  

  {{num}} 位其着迷！

  
  

  ---

  编程语言分类

  Java
  

  JavaScript
  

  Python
  

  您已购买下列课程：{{lessons.join(“,”)}}

  ---

  div

  <button @click.stop=“print(‘button’)”>点我试试

  <a href=“http://www.baidu.com” @click.prevent=“print(‘百度’)”>百度一下，你就疯了！

  ---

• {{i}} {{u.name + “,” + u.gender + “,”+ u.age }}

  

  （3）遍历对象

  

• {{u}}

  

  （4）遍历对象:多个参数

  

• {{u + “,” + i }}

  

  

• {{i +“_”+ v + “,” + k }}

  

  （5）遍历数字

  

• {{i}}

  

  8、key

  当Vue.js用v-for 正在更新已渲染过的元素列表时，它默认用"就地复用"策略。

  如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

  这个功能可以有效的提高渲染的效率。

  但是要实现这个功能，你需要给Vue一些提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素

  你

  需要为每项提供一个唯一 key属性。理想的key值是每项都有的且唯一的id。

  提升加载数据的速度

  

• {{i}} {{u.name + “,” + u.gender + “,”+ u.age }}

  

  绑定数组的角标

  

• {{i}} {{u.name + “,” + u.gender + “,”+ u.age }}

  

  9、v-if和v-show

  v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。

  语法：

  v-if”布尔表达式”

  实例：

  

  <button @click=“handleClick”>点我
  

  <button @click=“num++”>+

  <button @click=“decrement”>-

  xxx非常美丽！
  

  {{num}} 位其着迷！

  
  

  ---

  编程语言分类

  Java
  

  JavaScript
  

  Python
  

  您已购买下列课程：{{lessons.join(“,”)}}

  ---

  div

  <button @click.stop=“print(‘button’)”>点我试试

  <a href=“http://www.baidu.com” @click.prevent=“print(‘百度’)”>百度一下，你就疯了！

  ---

• {{i}} {{u.name + “,” + u.gender + “,”+ u.age }}

• {{i +“_”+ v + “,” + k }}

• {{i}}

  ---

  <button @click=“show != show”>点击切换
  

  你好

  在页面上

  

  点击以后你好消失（点击后触发事件将show改为false）

  

  10、v-if与v-for结合以及v-else

  （1）v-if

  当v-if和v-for出现在一起时，v-for优先级更高。

  也就是说，会先遍历，再判断条件。

  示例:

  

• {{i}}

  

  （2）v-else

  

• 偶数： {{i}}

  奇数： {{i}}
  

  

  11、v-show

  对比v-if和v-show

  

  你好

  你很好，我记住了！

  运行效果

  

  消失

  

  上述从外表看起来没有什么区别

  但是打开检查我们发现

  点击之前

  

  点击之后，发现v-if是直接删除结点而v-show是设置style属性display:none隐藏属性

  

  12、v-bind

  （1）创建新的HTML页面

  

  （2）编写CSS样式和HTML

  

  红色

  蓝色

  我是盒子

  我是盒子

  ❤️ 谢谢支持

  喜欢的话别忘了 关注、点赞哦~。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

  片描述](https://i-blog.csdnimg.cn/blog_migrate/f62c24bae3053c8268f9db34816547e0.png)

  11、v-show

  对比v-if和v-show

  

  你好

  你很好，我记住了！

  运行效果

  

  消失

  

  上述从外表看起来没有什么区别

  但是打开检查我们发现

  点击之前

  

  点击之后，发现v-if是直接删除结点而v-show是设置style属性display:none隐藏属性

  

  12、v-bind

  （1）创建新的HTML页面

  

  （2）编写CSS样式和HTML

  

  红色

  蓝色

  我是盒子

  我是盒子

  ❤️ 谢谢支持

  喜欢的话别忘了 关注、点赞哦~。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  [外链图片转存中…(img-YuUgvzji-1715838081278)]