Vue入门1

Vue是什么

Vue是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS、JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue都可以胜任。

渐进式框架

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

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

单文件组件

在大多数启用了构建工具的 Vue 项目中，我们可以使用一种类似 HTML 格式的文件来书写 Vue 组件，它被称为单文件组件 (也被称为 *.vue 文件，英文 Single-File Components，缩写为 SFC)。顾名思义，Vue 的单文件组件会将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里。

API风格

Vue的组件可以按两种不同的风格书写：选项式 API 和组合式 API。

选项式 API (Options API)

使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。

组合式 API (Composition API)

通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与<script setup> 搭配使用。这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。比如，<script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。

两种 API 风格都能够覆盖大部分的应用场景。它们只是同一个底层系统所提供的两套不同的接口。实际上，选项式 API 是在组合式 API 的基础上实现的！关于 Vue 的基础概念和知识在它们之间都是通用的。

 通过CDN使用Vue

使用如下两个文本使用到Vue：

具体使用样例如下：（这里我们使用vue.esm-browser.js）

 

基本语法操作

编辑操作（v-on）

如上为编辑操作的语法函数，但是在setup函数中写完之后，记得在return中返回edit

具体实现效果如下：

（这里@为v-on的简写形式）

按下修改键则修改当前网址至最新网址

add函数

同上edit的操作过程，具体举例展示如下：

注：这里keyup意为按下该键并松开的过程会触发该add函数，keydown意为按下就触发该函数。

为什么Tab就要keydown？因为Tab键按下会导致所选光标焦点消失并跳入下一行，松开后就不会触发add函数，所以需要按下就立马触发该函数。

隐藏显示操作（v-show/v-if）

当前值为true，则显示标签；若为false则隐藏标签

实现动态属性绑定（v-bind可简写为：）

以上几步实现属性值value以及src的动态绑定

以上也是一个class的动态绑定

可通过web的fontStatus来判断是否要渲染b标签的字样，若为true则渲染；反之则不渲染

V-for（循环操作）

首先给定如下的初始值，

html写法如下，添加v-for属性可以循环打印{{}}里的信息

若要添加其他属性如添加v-if，可用标签template，使代码逻辑简洁清晰；

如上只打印index为1的值

添加 :title动态属性绑定可实现鼠标悬停显现功能。

v-model（双向绑定）

在这我给出如下的例子，方便讲解

在先前的例子（动态属性绑定v-bind）中，当数据发生改变时，页面上的视图会自动更新，但用户手动更改input的值，数据则不会更新，此时我们可以用到v-model，不论是数据发生改变还是input值发生改变，两边都会自动更新。

1.type为text的情况

v-model绑定的是input元素的value值

2.type为radio，checkbox，select的情况

v-model绑定的是input或者seclect元素的选中状态

这里为各选项加上value值，方便大家看清其选中状态

v-model常见的修饰符

a.v-model.lazy；当input内部失去焦点或者按下enter键时，实现数据的更改。

b.v-model.number;提取input中的数字，当输入为100人时，自动提取数字100（注：若先输入文字，如“有100人”，程序先检测到文字，故不仅仅会提取前面的数字，数字之前的文字也会被提取）

c.v-model-trim;能够清除首尾的空格（字符之间的空格并不清除）

v-text与v-html

v-text 将数据解析为纯文本格式；v-html 将数据解析为 html 格式

computed计算属性

使用computed计算属性的，在控制台只出现了一次，因为第二次有了第一次的缓存

watch监听属性

给定如下响应式数据：

1.监听某个单一数字或字符

可以从页面控制台知道该数值前后的变化

2.监听复杂的对象数据

只有最新的数据，因为JS中对象和数组是通过引用传递的, 而不是通过值传递当修改对象或数组的值时, 实际上修改的是对象或数组的引用, 而不是创建一个新的对象或数组所以，如果修改了对象或数组的值，那么打印出来的结果则是修改后的值。

3.监听复杂对象数据的某个属性

也可以监听到数据前后的变化。

注：在这种情况下，watch的语法为，watch(()=>x,(a,b)=>{})

自动监听watcheffect

当进行选择时，控制台会自动打印满足if条件的数据

以上教程均跟着b站up主邓瑞编程一步一步学的，大家可以去看，非常宝藏的up主！！也可以关注关注他的编程网站，dengruicode.com

这里仅仅作为一个我的学习笔记的记录。