w3cschool Vue.js 2.0 教程:https://www.w3cschool.cn/vuejs2/

​vue 官网:https://cn.vuejs.org/
vue 官网手册:https://v3.cn.vuejs.org/guide/introduction.html
runoob vue3 教程:https://www.runoob.com/vue3/vue3-install.html

入门 vue 必知必会(1、2、3):https://blog.csdn.net/weixin_49343190/category_10728547.html
VUE 超级详细教程:https://blog.csdn.net/weixin_42371679/article/details/112408800
Vue快速入门(从入门到实战)(IDEA版)一篇文章即可快速入门(可直接开发前后端分离项目)
:https://code100.blog.csdn.net/article/details/118926442
Vue Element入门教程:https://blog.csdn.net/qq_40236722/article/details/88169539

在线编辑器(推荐):https://codesandbox.io/

学 vue,主要从以下几个方面学习:

  • 环境安装
  • 模板语法(怎么写)
  • 指令
  • 选项、生命周期(写在哪儿)
  • vuejs-devtools(怎么调试)

1、Vue.js 是什么

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

提示:官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识。如果你刚开始学习前端开发,将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来吧!之前有其它框架的使用经验会有帮助,但这不是必需的

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。
Vue 只关注视图层, 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

vue 作用就是把 Javascript 对象数据 绑定到 HTML 的 dom 节点上。

Vue 是一个前端框架,特点是

数据绑定:比如你改变一个输入框 Input 标签的值,会自动同步更新到页面上其他绑定该输入框的组件的值

组件化:页面上小到一个按钮都可以是一个单独的文件.vue,这些小组件直接可以像乐高积木一样通过互相引用而组装起来

推荐开发环境

简单示例

Vue 测试实例
{{ message }}
const HelloVueApp = {data() {return {message: 'Hello Vue!!'}}}Vue.createApp(HelloVueApp).mount('#hello-vue')

带 $ 的是 VUE 框架(或插件)定义的属性方法

从环境搭建到发布

:https://www.runoob.com/w3cnote/vue2-start-coding.html

2、安装

最新版本:https://github.com/vuejs/core/blob/main/CHANGELOG.md

Vue.js 设计的初衷就包括可以被渐进式地采用。这意味着它可以根据需求以多种方式集成到一个项目中。将 Vue.js 添加到项目中主要有四种方式:

  • ​在页面上以 CDN 包的形式导入。
  • 下载 JavaScript 文件并自行托管。
  • 使用 npm 安装它。

在使用 Vue 时,推荐在的浏览器上安装插件 Vue Devtools,它允许你在一个更友好的界面中审查和调试 Vue 应用。

方法 1:cdn 

对于制作原型或学习,可以通过 CDN script 引入。下面是使用最新版本:

对于生产环境,推荐链接到一个明确的版本号和构建文件,以避免新版本造成的不可预期的破坏。

方法 2:直接下载 vue.js

如果你想避免使用构建工具,但又无法在生产环境使用 CDN,那么你可以下载相关 .js 文件并自行托管在你的服务器上。然后你可以通过  标签引入,与使用 CDN 的方法类似。

这些文件可以在 unpkg 或者 jsDelivr 这些 CDN 上浏览和下载。各种不同文件将在以后解释,但你通常需要同时下载开发环境构建版本以及生产环境构建版本。

方法 3:通过 npm 安装

在用 Vue 构建大型应用时推荐使用 npm 安装。由于国内 npm 安装速度慢,可以使用淘宝的镜像及其命令 cnpm,安装使用介绍参照:使用淘宝 NPM 镜像。

npm 版本需要大于 3.0,如果低于此版本需要升级它:

npm -v                      # 查看版本
cnpm install npm -g        # 升级 npm
npm install cnpm -g        # 升级或安装 cnpm

npm、cnpm 能很好地和诸如 webpack 或 Rollup 模块打包器配合使用。

$ npm install vue@next        # 最新稳定版

3、构建 Vue 项目

大多数情况下,更倾向于使用 Vue CLI 来创建一个配置最小化的 webpack 构建版本。

方法 1:命令行工具 ( vue init )

Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。

更多详情可查阅 Vue CLI 的文档。

CLI 是全局安装。

# 全局安装 vue-cli
yarn global add @vue/cli
# 或
cnpm install -g @vue/cli

安装完后查看版本:

$ vue –version

然后在 Vue 项目中运行:

vue upgrade –next

提示:CLI 工具假定用户对 Node.js 和相关构建工具有一定程度的了解。如果你是新手,我们强烈建议先在不用构建工具的情况下通读指南,在熟悉 Vue 本身之后再使用 CLI。

示例:创建 vue 项目

使用 vue init 命令来创建一个项目:

$ vue init webpack runoob-vue3-test# 这里需要进行一些配置,默认回车即可" /> 

进入项目,安装并运行:

$ cd runoob-vue3-test
$ cnpm run dev
  DONE  Compiled successfully in 2558ms          

 I  Your application is running here: http://localhost:8080

成功执行以上命令后访问 http://localhost:8080/,输出结果如下所示:

方法 2:命令行工具 ( vue create )

vue create 命令创建项目语法格式如下:vue create [options]

创建一个由 vue-cli-service 提供支持的新项目:

options 选项可以是:

  • -p, --preset : 忽略提示符并使用已保存的或远程的预设选项
  • -d, --default: 忽略提示符并使用默认预设选项
  • -i, --inlinePreset : 忽略提示符并使用内联的 JSON 字符串预设选项
  • -m, --packageManager : 在安装依赖时使用指定的 npm 客户端
  • -r, --registry : 在安装依赖时使用指定的 npm registry
  • -g, --git [message]: 强制 / 跳过 git 初始化,并可选的指定初始化提交信息
  • -n, --no-git: 跳过 git 初始化
  • -f, --force: 覆写目标目录可能存在的配置
  • -c, --clone: 使用 git clone 获取远程预设选项
  • -x, --proxy: 使用指定的代理创建项目
  • -b, --bare: 创建项目时省略默认组件中的新手指导信息
  • -h, --help: 输出使用帮助信息

示例:创建 vue 项目

接下来我们创建 runoob-vue3-app 项目:vue create runoob-vue3-app

执行以上命令会出现安装选项界面:

默认选择

选择 默认vue3, 按下回车键后就会进入安装,等候片刻即可完成安装。

安装完成后,我们进入项目目录:cd runoob-vue3-app
启动应用:npm run serve
然后打开 http://localhost:8080/,就可以看到应用界面了:

手动选择

当不想使用默认选项时,可以选择第三项:Manually select features

安装完成后,我们进入项目目录:cd runoob-vue3-app
启动应用:npm run serve
然后打开 http://localhost:8080/,就可以看到应用界面了:

方法 3:可视化创建 ( vue ui 命令 )

还可以使用可视化创建工具来创建项目。

运行命令:vue ui

执行以上命令,会在浏览器弹出一个项目管理的界面:

我们可以点击"创建"选项来创建一个项目,选择底部"在此创建项目",页面上方也可以选择路径:

然后输入我们的项目名称,选择包管理工具为 npm,然后点击下一步:

配置选择默认即可:

接下来就等待完成安装,安装完成管理界面如下:

方法 4:使用 Vite ( 推荐 )

Vite 是一个 web 开发构建工具,由于其原生 ES 模块导入方式,可以实现闪电般的冷服务器启动。通过在终端中运行以下命令,可以使用 Vite 快速构建 Vue 项目,语法格式如下:

老方法:npm init @vitejs/app     ( 注意:@vitejs/create-app 已经废弃, 使用 npm init vite 代替 )

新方法:npm init vite 

示例:创建 vue 项目

创建项目 runoob-vue3-test2:

命令:npm init vite runoob-vue3-test2

选择 vue,然后 按 enter,

再次 选择 vue,然后 按 enter,

运行项目:

cd runoob-vue3-test2
cnpm install
cnpm run dev

打开上面显示的地址 http://localhost:5173/,显示如下:

4、不同方式 构建 vue 项目的说明

在 npm 包的 dist/ 目录你将会找到很多不同的 Vue.js 构建版本。下面是一个概述,根据不同的使用情况,应该使用哪个 dist 文件:

使用 CDN 或 没有构建工具

vue(.runtime).global(.prod).js

  • 若要通过浏览器中的  直接使用,则暴露 Vue 全局。
  • 浏览器内模板编译:
    • vue.global.js 是包含编译器和运行时的“完整”构建版本,因此它支持动态编译模板。
    • vue.runtime.global.js 只包含运行时,并且需要在构建步骤期间预编译模板。
  • 内联所有 Vue 核心内部包——即:它是一个单独的文件,不依赖于其他文件。这意味着你必须导入此文件和此文件中的所有内容,以确保获得相同的代码实例。
  • 包含硬编码的 prod/dev 分支,并且 prod 构建版本是预先压缩过的。将 *.prod.js 文件用于生产环境。

提示:全局打包不是 UMD 构建的,它们被打包成 IIFEs,并且仅用于通过  直接使用。

vue(.runtime).esm-browser(.prod).js

  • 用于通过原生 ES 模块导入使用 (在浏览器中通过  来使用)。
  • 与全局构建版本共享相同的运行时编译、依赖内联和硬编码的 prod/dev 行为。

使用构建工具

vue(.runtime).esm-bundler.js

  • 用于 webpackrollup 和 parcel 等构建工具。
  • 留下 prod/dev 分支的 process.env.NODE_ENV 守卫语句 (必须由构建工具替换)。
  • 不提供压缩版本 (打包后与其余代码一起压缩)。
  • import 依赖 (例如:@vue/runtime-core@vue/runtime-compiler)
    • 导入的依赖项也是 esm bundler 构建版本,并将依次导入其依赖项 (例如:@vue/runtime-core imports @vue/reactivity)。
    • 这意味着你可以单独安装/导入这些依赖,而不会导致这些依赖项的不同实例,但你必须确保它们都为同一版本。
  • 浏览器内模板编译:
    • vue.runtime.esm-bundler.js (默认) 仅运行时,并要求所有模板都要预先编译。这是构建工具的默认入口 (通过 package.json 中的 module 字段),因为在使用构建工具时,模板通常是预先编译的 (例如:在 *.vue 文件中)。
    • vue.esm-bundler.js 包含运行时编译器。如果你使用了一个构建工具,但仍然想要运行时的模板编译 (例如,DOM 内 模板或通过内联 JavaScript 字符串的模板),请使用这个文件。你需要配置你的构建工具,将 vue 设置为这个文件。

命令行工具 vue-cli

项目:runoob-vue3-test

Vite 构建 vue 项目

runoob-vue3-test2

目录解析

目录/文件说明
build项目构建(webpack)相关代码
config配置目录,包括端口号等。我们初学可以使用默认的。
node_modulesnpm 加载的项目依赖模块
src

这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:

  • assets: 放置一些图片,如logo等。
  • components: 目录里面放了一个组件文件,可以不用。
  • App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。
  • main.js: 项目的核心文件。
  • index.css: 样式文件。
static静态资源目录,如图片、字体等。
public公共资源目录。
test初始测试目录,可删除
.xxxx文件这些是一些配置文件,包括语法配置,git配置等。
index.html首页入口文件,你可以添加一些 meta 信息或统计代码啥的。
package.json项目配置文件。
README.md项目的说明文档,markdown 格式
dist使用 npm run build 命令打包后会生成该目录。

示例:修改项目中 src/APP.vue 修改为以下代码:

import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',components: {HelloWorld}}

打开页面 http://localhost:3000/,一般修改后会自动刷新,显示效果如下所示:

对于服务端渲染

vue.cjs(.prod).js

  • 通过 require() 在 Node.js 服务器端渲染使用。
  • 如果你将应用程序与带有 target: 'node' 的 webpack 打包在一起,并正确地将 vue 外部化,则将加载此文件。
  • dev/prod 文件是预构建的,但是会根据 process.env.NODE_ENV 自动加载相应的文件。

运行时 + 编译器 vs. 仅运行时

如果需要在客户端上编译模板 (即:将字符串传递给 template 选项,或者使用元素的 DOM 内 HTML 作为模板挂载到元素),你将需要编译器,因此需要完整的构建版本:

// 需要编译器
Vue.createApp({
  template: '

{{ hi }}

'
})

// 不需要
Vue.createApp({
  render() {
    return Vue.h('div', {}, this.hi)
  }
})

当使用 vue-loader 时,*.vue 文件中的模板会在构建时预编译为 JavaScript,在最终的捆绑包中并不需要编译器,因此可以只使用运行时构建版本。

5、Vue3 项目打包

打包 Vue 项目使用以下命令:cnpm run build

执行以上命令,输出结果如下:

执行完成后,会在 Vue 项目下会生成一个 dist 目录,该目录一般包含 index.html 文件及 static 目录,static 目录包含了静态文件 js、css 以及图片目录 images(如果有图片的话)。

如果直接双击打开 index.html,在浏览器中页面可能是空白了,要正常显示则需要修改下 index.html 文件中 js、css 文件路径。

例如我们打开 dist/index.html 文件看到 css 和 js 文件路径是绝对路径:

...

我们把 js、css 文件路径修改为相对路径:

...

这样直接双击 dist/index.html 文件就可以在浏览器中看到效果了。

6、vue 快速开始

刚开始学习 Vue,不推荐使用 vue-cli 命令行工具来创建项目,更简单的方式是直接在页面引入 vue.global.js 文件来测试学习。

Vue3 中的应用是通过使用 createApp 函数来创建的,

语法格式:const app = Vue.createApp({ /* 选项 */ })

传递给 createApp 的选项用于配置根组件。在使用 mount() 挂载应用时,该组件被用作渲染的起点。

一个简单的实例:Vue.createApp(HelloVueApp).mount('#hello-vue')

说明:createApp 的参数是根组件(HelloVueApp),在挂载应用时,该组件是渲染的起点。

一个应用需要被挂载到一个 DOM 元素中,以上代码使用 mount('#hello-vue') 将 Vue 应用 HelloVueApp 挂载到 

 中。

接下来我们从 Hello Vue!! 的代码开始学起。

Vue 测试实例 - 菜鸟教程(runoob.com)
{{ message }}
const HelloVueApp = {data() {return {message: 'Hello Vue!!'}}}Vue.createApp(HelloVueApp).mount('#hello-vue')

以上实例中,我们先在 HTML 页面中引入 Vue 的 JS 文件:

HTML 页面中有一个 div 元素:

  {{ message }}

mount('#hello-vue') 将 Vue 应用 HelloVueApp 挂载到 

 中。

{{ }} 用于输出对象属性和函数返回值。

{{ message }} 对应 应用 中 message 的值。

data 选项

data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一个对象,然后 Vue 会通过响应性系统将其包裹起来,并以 $data 的形式存储在组件实例中。

Vue 测试实例 - 菜鸟教程(runoob.com)
const app = Vue.createApp({data() {return { count: 4 }}})const vm = app.mount('#app')document.write(vm.$data.count) // => 4document.write("
")document.write(vm.count) // => 4document.write("
")// 修改 vm.count 的值也会更新 $data.countvm.count = 5document.write(vm.$data.count) // => 5document.write("
")// 反之亦然vm.$data.count = 6document.write(vm.count) // => 6

以上实例属性仅在实例首次创建时被添加,所以你需要确保它们都在 data 函数返回的对象中。

VUE中的 $ 指的是什么" />Vue 测试实例 - 菜鸟教程(runoob.com)

const app = Vue.createApp({data() {return { count: 4 }},methods: {increment() {// `this` 指向该组件实例this.count++}}})const vm = app.mount('#app')document.write(vm.count) // => 4document.write("
")vm.increment()document.write(vm.count) // => 5

基本指令

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统 。

Mustache {{}}

vue在渲染界面时,页面先以{{xxXXX}}的形式加载到页面,然后再用数据替换{{}}.

Mastach表达式调用三种数据格式类型:

调用单值数据

{{msg}}
export default {name: 'Home',data() {return {msg: 'hello world'}}}

调用数组数据

{{fav[0]}}--{{fav[1]}}
export default {name: 'Home',data() {return {fav: ['java','vue']}}}

调用对象数据

{{student.name}} -- {{student.age}}
export default {name: 'Home',data() {return {student:{'name':'xm','age':234}}}}

指令 (Directives) 是带有 v- 前缀的特殊 attribute , 指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM 。

v-text == {{message}}
v-html

v-show:

Hello!

v-if:

v-else:

v-else-if:

v-for:

v-on==@:
v-bind==: 缩写
v-model:

Message is: {{ message }}

v-if 和 v-show

v-if 指令将根据表达式 的值真假来插入/移除 元素

现在你看到我了

export default {name: 'Home',data() {return { // 次数seen为false,那么v-if 则成为 vi-if="false"seen: false | true // false true只选择一个}}}

注意:v-if 和 v-show 区别

  • V-if: 对dom节点进行删除和增加
  • V-show: 通过css控制节点的隐藏和显示

如果隐藏/显示位置切换不是特别频繁的话,建议还是使用v-if,反之如果切换频繁则使用v-show

v-bind

能够接收一个“参数”,在指令名称之后以冒号表示。v-bind 指令可以用于响应式地更新

{{website}}
export default {name: 'Home',data() {return {website: '新浪',url: 'http://www.sina.com'}}}

在这里 href 是参数,告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定

动态参数绑定,[attributeName]可根据需要动态设置

如下列代码:

clike me
export default {name: 'Home',data(){return{attri:'href',attriVal:'http://www.sina.com'}}}

缩写 v-bind 可一律缩写为 ” : ” ,如: clike me

v-on

用于监听 DOM 事件

clike me
export default {name: 'Home',methods:{ // 出发点击事件后,执行showHello函数showHello(){alert("hello world")}}}

缩写 v-on 可一律缩写为 @
如上例: clike me

v-for

用于对一个数组来渲染一个列表 ,因此被称为”列表渲染” , 需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名

遍历数组:

  • {{item}}
export default {name: 'Home',data(){return{students:['xm','lm','aa']}}}

遍历集合

  • {{item.name}}--{{item.age}}
export default {name: 'Home',data(){return{names:['xm','lm','aa'],stus:[{'name':'xm',age:23},{'name':'lm',age:33}]}}}

遍历对象的属性和值

  • {{name}}--{{value}}
export default {name: 'Home',data(){return{names:['xm','lm','aa'],stus:{'name':'xm',age:23}}}}

建议:v-for 渲染的元素列表时,它默认使用“就地更新”的策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序,而是就地更新每个元素,并且确保它们在每个索引位置正确渲染。 所以,我们应尽可能在使用 v-for 时提供 key attribute , 以便它能跟踪每个节点的身份,从而重用和重新排序现有元素

不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。

v-model

在表单  及 “ 元素上创建双向数据绑定 , 它会根据控件类型自动选取正确的方法来更新元素 , v-model 本质上是语法糖 , 它负责监听用户的输入事件来更新数据,并在某种极端场景下进行一些特殊处理。

Message is: {{ message }}

export default {name: 'Home',data(){return{ message:'hello'}}}

6.Vue事件

•V-on:监听事件

•自定义事件

组件内抛出:this.$emit(‘myEvent’)

外部监听:

•将原生事件绑定到组件

事件修饰符:在此只列举常用的4中事件修饰符:分别是 stop阻止冒泡;prevent 阻止标签默认行为;self 只监听自身标签的事件;once 只执行一次

stop 阻止冒泡

B-DIV是A-DIV的子组件,当对B执行事件时,事件会向上冒泡,导致ADIV区域相关事件元素同样被你执行

7.特殊特性

•Key:有相同父元素的子元素必须有独特的 key,主要用在v-for

•Ref:被用来给元素或子组件注册引用信息

•Slot:用于标记往哪个具名插槽中插入子组件内容

8.选项 数据

•Data: Vue 实例的数据对象

•Props: props 可以是数组或对象,用于接收来自父组件的数据

•Computed:计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算

•Watch:一个对象,键是需要观察的表达式,值是对应回调函数

•Methods:放置普通函数的地方

9.生命周期

beforeCreate此时data、method和$el均没有初始化
created此时data和method初始化完成,但是DOM节点并没有挂载

beforeMount编译模板,并且将此时在el上挂载一个虚拟的DOM节点

mounted编译模板,且将真实的DOM节点挂载在el上,可做数据请求

beforeUpdate在数据有更新时,进入此钩子函数,虚拟DOM被重新创建

updated数据更新完成时,进入此钩子函数

beforeDestory组件销毁前调用,移除watchers、子组件和事件等 
destoryed:组件销毁后调用

10.混入

11.组件

12.调试

7、Vue3 模板语法

Vue 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

Vue 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

插值

文本

数据绑定最常见的形式就是使用 {{…}}(双大括号)的文本插值:

Vue 测试实例 - 菜鸟教程(runoob.com)
{{ message }}
const HelloVueApp = {data() {return {message: 'Hello Vue!!'}}}Vue.createApp(HelloVueApp).mount('#hello-vue')

{{…}} 标签的内容将会被替代为对应组件实例中 message 属性的值,如果 message 属性的值发生了改变,{{…}} 标签内容也会更新。

如果不想改变标签的内容,可以通过使用 v-once 指令执行一次性地插值,当数据改变时,插值处的内容不会更新。

这个将不会改变: {{ message }}

Html

使用 v-html 指令用于输出 html 代码:

Vue 测试实例 - 菜鸟教程(runoob.com)

使用双大括号的文本插值: {{ rawHtml }}

使用 v-html 指令:

const RenderHtmlApp = {data() {return {rawHtml: '这里会显示红色!'}}}Vue.createApp(RenderHtmlApp).mount('#example1')

分析:

属性

HTML 属性中的值应使用 v-bind 指令。

对于布尔属性,常规值为 true 或 false,如果属性值为 null 或 undefined,则该属性不会显示出来。

以上代码中如果 isButtonDisabled 的值是 null 或 undefined,则 disabled 属性甚至不会被包含在渲染出来的