vue基础

 一、 Vue.js是什么

 Vue.js (vue读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式 JavaScript 框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue.js 是一个提供了 MVVM 风格双向数据绑定的 Javascript 库（无依赖别的js库，直接引入一个js文件就可以使用，跟jquery差不多），专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。

二、 Vue.js优点 

体积小： 压缩后33K；
更高的运行效率：基于虚拟dom,一种可以预先通过JavaScript进行各种计算，把最终的DOM                                       操作计算出来并优化的技术，由于这个DOM操作属于预处理操作，并没有真实                               的操作DOM，所以叫做虚拟DOM。
双向数据绑定：让开发者不用再去操作dom对象，把更多的精力投入到业务逻辑上；生态丰富、                             学习成本低：市场上拥有大量成熟、稳定的基于vue.js的ui框架、常用组件！拿来                           即用实现快速开发！

1.Vue的渐进式框架

Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景，你可以用不同的方式使用 Vue：

无需构建步骤，渐进式增强静态的 HTML
在任何页面中作为 Web Components 嵌入
单页应用 (SPA)
全栈 / 服务端渲染 (SSR)
Jamstack / 静态站点生成 (SSG)
开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

1、下载安装node

下载链接：下载 | Node.js 中文网 (nodejs.cn)

 

PS：检查node是否安装成功，并查看版本号:按住电脑的win+R键盘，调出终端控制台，输入命令行：node -v或node --version,如果能出现以下界面，即代码node安装成功。

【照片】

2、下载安装VScode代码编辑工具

下载链接：Visual Studio Code - Code Editing. Redefined

【照片】

安装步骤：

检查node是否安装成功，并查看版本号:按住电脑的win+R键盘，调出终端控制台，输入命令行：node -v或node --version,如果能出现以下界面，即代码node安装成功。

2、vue create 命令创建项目

// helloworld 是项目名，可自行定义          

vue create helloworld

执行 vue create 命令之后，可看到如下所示界面

在这个步骤中，可以使用键盘的↑和↓方向键选择创建项目的方式，default是默认选择项，表示使用默认的方式创建项目；Manually select features选项表示使用手动配置方式创建项目，在这里，我们选择手动的方式创建，手动配置界面如下图所示：

在这个步骤中，可以使用键盘的↑和↓方向键选择创建项目的方式，default是默认选择项，表示使用默认的方式创建项目；Manually select features选项表示使用手动配置方式创建项目，在这里，我们选择手动的方式创建，手动配置界面如下图所示：

四、vue 的指令

指令的本质：语法糖，标志位。在编译阶段 render 函数里，会把指令编译成 JavaScript 代码。

vue 的指令：

• v-text
• v-html（不建议使用）
• v-show
• v-if / v-else-if / v-else
• v-bind
• v-on

1、v-text
v-text 指令，会把该元素下面的所有内容替换掉。

<div v-text="hello vue">hello world</div>

现实结果是：hello vue

2、v-html
v-html 指令，会用一个HTML标签字符串，替换该元素下面的所有内容。

但是，不建议使用v-html指令，因为它会导致被恶意者进行XSS攻击的潜在风险。

<div v-html="'<span style=&quot;color:red&quot;>hello vue</span>'">
 
  hello world
 
</div>

现实结果是：字体颜色为红色的 hello vue

3、v-show
v-show 指令，控制元素的显示隐藏，元素存在并占据空间。

元素隐藏时，相当于给该元素添加了 CSS 样式：display:none;

<div v-show="show">hello vue</div>
 
<button @click="show = !show">changeShow</button>

4、v-if/v-esle-if/v-else
（1）、v-if
v-if指令，控制元素是否加载。

v-esle-if/v-else指令不能单独使用，必须配合v-if一起使用。

<div v-if="number===1">hello vue {{number}}</div>
 
<div v-else-if="number===2">hello world {{number}}</div>
 
<div v-else>hello someone {{number}}</div>

（2）、v-if 与 v-show
v-if：有更高的切换开销；
v-show：有更高的初始化开销。
若需要频繁的切换则使用 v-show 比较好，否则使用 v-if 比较好。

5、v-for
v-for 指令，for循环，基于源数据多次渲染元素或模板块。

v-for 既可以渲染一个数组，也可以渲染一个对象。

（1）、v-for 渲染一个数组

<div v-for="(item, idx) in [1, 2, 3]" :key="idx">
 
    {{item}}
 
</div>

// 渲染的结果：
// 1
// 2
// 3
（2）、 v-for 渲染一个对象

<div v-for="(val, key) in {one: 1, two: 2}" :key="key">
 
    {{key}}: {{val}}
 
</div>

// 渲染的结果：
// one: 1
// two: 2
（3）、v-if 与 v-for
同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。请查看风格指南获得更多信息。

当 v-if 与 v-for 一起使用时：

在 vue2 中 v-for 比 v-if 有更高的优先级。这意味着 v-if 将分别重复运行于每个 v-for 循环中。
在 vue3 中 v-if 比 v-for 有更高的优先级。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名。
vue3 官网之 v-for 与 v-if

（4）、v-for 之 key
①、为什么需要给 v-for 设置 key？

这牵扯到 vue 的 vnode 的 Diff 算法的特点，请参见此文。

②、在 v-for 中直接用 index 作为 key 的值有什么不好？

例如：

<template>
    <div v-for="(item, index) in list" :key="index" >{{item.name}}</div>
</template>
<script>
export default {
  data() {
    return {
        list: [
        {
            id: 1,
            name: "Person1"
        },
        {
            id: 2,
            name: "Person2"
        },
        {
            id: 3,
            name: "Person3"
        },
        {
            id:4,
            name:"Person4"
        }]
    }
  },
}
</script>

此时，删除 “Person4” 是正常的，但是如果我删除 “Person2” 就会出现问题。

（5）、显示过滤/排序后的结果

显示过滤/排序后的结果

6、v-on
v-on指令，可简写为“@”，绑定事件监听器。

<button v-on:click="number = number + 1">number++</button>

（1）、v-on 指令的修饰符
v-on指令有一系列的修饰符：

.stop - 调用 event.stopPropagation()，禁止事件冒泡：

<a @click.stop="doThis"></a>

.prevent - 调用 event.preventDefault()，禁止事件的默认行为：

<form @submit.prevent="onSubmit"></form>

.passive - (2.3.0) 以 { passive: true } 模式添加侦听器，立即执行事件的默认行为，会导致 `event.preventDefault()` 无效：

<div @scroll.passive="onScroll">...</div> 
// 滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 `onScroll` 完成。

.capture - 添加事件侦听器时使用 capture 模式，内部元素触发的事件先在此处理，然后才交由内部元素进行处理：

<div @click.capture="doThis">...</div>

.self - 只当事件是从侦听器绑定的元素本身（event.target）触发时才触发回调：

<div @click.self="doThat">...</div>

.native - 监听组件根元素的原生事件：

<base-input v-on:focus.native="onFocus"></base-input>

.once - 只触发一次回调：

<a @click.once="doThis"></a>

.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。  
.{keyCode | keyAlias} ——键盘事件——只当事件是从特定键触发时才触发回调。比如：
.enter - 只有在 `key` 是 `Enter` 时才触发回调。

<input v-on:keyup.enter="submit">

（2）、在内联事件处理器中访问事件参数
有时我们需要在内联事件处理器中访问原生 DOM 事件。你可以向该处理器方法传入一个特殊的 $event 变量，或者使用内联箭头函数：

<template>
<!-- 使用特殊的 $event 变量 -->
<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>
 
<!-- 使用内联箭头函数 -->
<button @click="(event) => warn('Form cannot be submitted yet.', event)">
  Submit
</button>
</template>
 
<script setup lang="ts">
function warn(message, event) {
  // 这里可以访问原生事件
  if (event) {
    event.preventDefault()
  }
  alert(message)
}
</script>
（3）、vue 中的特殊事件
vue 监听页面滚动事件 

export default {
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    // 监听页面滚动
    handleScroll (e) {
      // ...
    }
  }
}