VUE学习笔记（Day1）

1.总览

vue3不仅易于上手，还便于与第三方库或既有项目整合。

安装

1.在页面上以CDN包的形式导入

2.下载JS文件并自行托管

3.使用npm安装

4.使用官方的CLI来构建一个项目。

CDN

<script scr="https://unpkg.com/vue@next"><script>

下载并托管

这些文件可以在unpkg或者jsDelivr这些CDN上浏览和下载。

访问https://unpkg.com/vue@next，复制粘贴到你的VsCode，命名为vue3.js，如下

注意：你复制的是什么东西呢？它其实是vue3的源码，感兴趣可自行研究。

接下来看一个简单的Vue案例

效果如下

下面介绍了一下数据的双向绑定

即在浏览器的console给num赋值，如下

2.Vite

Vite是一个web开发构建工具，由于其原生ES模块导入方式，可以实现闪电般的冷服务器启动。

通过在终端中运行以下命令，可以使用Vite快速构建Vue项目。

（需要使用npm，使用npm的前提是，电脑上需要先安装node）

祭上nodejs官网网址http://nodejs.cn/download/

这里呢，本蒟蒻在安装node.js和配置npm时均遇到了一点小问题，自己花了将近一个小时，完美解决，这里推荐一篇博客，有需要的同学自取，后续本人也会写一篇关于node的安装和配置的博客，敬请期待。(230条消息) Node.js安装及环境配置_艾鸭丫的博客-CSDN博客_nodejs配置

（推荐在管理员权限下运行，因为有些命令需要管理员权限）

=====================华丽分割线=============================

上面是安装nodejs，下面进入主题

终端输入npm init vite@latest 项目名称 -- --template vue来创建一个vue工程

再输入

npm install  

npm dev

点击

Local后面的网址，可以看一下成果，这里还可以看到左边的任务栏里面有了vue-begin01的文件夹

好了，这一节先到这里。

第二节vue声明式渲染

1.什么是声明式渲染，有什么作用

声明式渲染可以提高开发效率

第一个小栗子

使用效果

2.根组件

传递给createApp的选项用于配置根组件，当我们挂载应用时，该组件用作渲染的起点。一个应用需要被挂载到一个DOM元素中，例如，如果想把一个Vue应用挂载到<div id="app"></div>,应该传入#app

3.组件实例property

在前面的指南中，我们认识了data 这个property。在data中定义的property是通过组件实例暴露出来的：

如果不知道我在说什么，见下图

组件实例的所有property，无论如何定义，都可以在组件的模板中访问

第三节 模板语法一

1.插值

1.Mustache语法（双大括号语法）

由于已有案例，故这里不做讲解

2.v-once指令，可以执行一次性地插值，当数据改变时，插值处的内容不会更新，但是请留心这会影响到该节点上的其他数据绑定：

<span v-once>这个将不会改变：{{msg}}</span>

案例：

效果：

3.v-html指令

<span v-html="rawHTML"></span>

标签之间不需要内容

Tip：绝不要将用户提供的内容作为v-html的插值

第四节 模板语法二

1.Attribute

1.Mustache语法不能在HTML attribute中使用，然而，可以使用 v-bind指令

<div v-bind:id="dynamicId"></div>

2.使用JavaScript语句

比如说{{number + 1}}

{{ok?'Yes':'No'}}

{{message.split('').reverse().join('')}}

2.指令

指令是带有v-前缀的特殊attribute，指令attribute的值预期是单个Javascript表达式(v-for和v-on是例外情况，稍后讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。

1.v-on，它用于监听DOM事件

<a v-on:click="doSomething">...</a>

第五节—动态参数的讲解

1.也可以在指令参数中使用JavaScript表达式，方法是用方括号括起来

<a v-bind:[atttributeName]="url">...</a>

比如说

第六节—计算属性的使用以及和methods的区别

1.Data Property和方法

1.就是data(){}和methods:{}

2.Vue自动为methods绑定this，以便它始终指向组件实例，这将确保方法在用作事件监听或回调时保持正确的this指向，在定义methods时应避免使用箭头函数，因为这会阻止Vue绑定恰当的this指向。

2.计算属性和侦听器

1.概括计算属性的用途：简化双大括号之间的表达式，防止其难以维护

2.计算属性的特点：只要依赖值不变，那么就不会重新计算，依赖值在我们的例子里面就是this.message,换种说法，也就是计算属性将基于它们的响应依赖关系缓存，较methods大大提高了性能

第七节—计算属性的getter和setter

1.get方法

1.首先声明一下，上图的reverseMsg是该方法的简写，而完整版应该是这样的

也就是说getter是默认的方法，简写和这样写的效果是等同的

2.setter

1.首先声明，开发中一般不会用到setter

第八节—侦听器

1.虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器，这就是为什么Vue通过watch选项提供了一个更通用的方法来响应数据的变化，当需要在数据变化时执行异步或开销较大的操作时，这个方式也是有用的。

2.侦听器的作用，一个数据的变化可以影响多个数据

第九节—侦听器案例

1.介绍一个新的指令 v-model这个指令可以使数据双向绑定。

第十节—深度监听

1.对属性进行深度监听，直接这样即可

第十一节—class类名的对象使用方式

第十二节—class类名的数组使用方式

1.数组语法

<div :class="{activeClass,errorClass}"></div>