vue 学习

vue 学习
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
vue 前端基础教程 - 4个小时带你快速入门vue：https://www.bilibili.com/video/BV12J411m7MG
- Vue 基础
- 本地应用 --- 记事本
- 网络应用 --- 查询天气(网络请求库axios + vue) ( axios介绍和使用：https://blog.csdn.net/qq_40837310/article/details/123028044 )
- 综合应用 --- 播放器
在线编辑器（推荐）：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 实现响应的数据绑定和组合的视图组件。
" 早期 web 开发 " 和 " 基于 VUE 的 web 开发 "：
- 早期基于 DOM 的 web 开发：通过 JavaScript 获取获取网页 DOM 元素，然后操作 DOM 元素
- 基于 VUE 的 web 开发：vue 本身是使用 JavaScript 编写，只是封装了一些以 v- 开头的一系列指令，可以通过这些指令直接操作 DOM 元素，不用再通过
vue 作用就是把 Javascript 对象数据绑定到 HTML 的 dom 节点上。

vue 开发特点：页面由数据生成 ( 根据数据生成页面 )，数据改变时，页面会同步改变。
Vue 是一个前端框架，特点是

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

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

推荐开发环境

简单示例
```
html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例title>
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js">script>
head>
<body>
<div id="hello-vue" class="demo">
  {{ message }}
div>
 
<script>
const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}
 
Vue.createApp(HelloVueApp).mount('#hello-vue')
script>
body>
html>
```
带 $ 的是 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 文件并自行托管在你的服务器上。然后你可以通过 ...
我们把 js、css 文件路径修改为相对路径： ... 这样直接双击 dist/index.html 文件就可以在浏览器中看到效果了。 6、vue 快速开始刚开始学习 Vue，不推荐使用 vue-cli 命令行工具来创建项目，更简单的方式是直接在页面引入 vue.global.js 文件来测试学习。 vue2、vue3 Vue.js 的核心是使用简洁的模板语法来声明式的将数据渲染进 DOM 的系统 vue2 的声明式渲染通过如下方式引入 Vue: 或者 vue2 示例： Vue 的 hello world 示例 {{ message }} 已经生成了一个 Vue 应用！看起来这跟单单渲染一个字符串模板非常类似，但是 Vue.js 在背后做了大量工作。现在数据和 DOM 已经被绑定在一起，所有的元素都是响应式的。我们如何知道？打开你的浏览器的控制台，并修改 app.message，你将看到上例相应地更新。除了绑定插入的文本内容，我们还可以采用这样的方式绑定 DOM 元素属性：鼠标悬停几秒钟查看此处动态绑定的提示信息！ var app2 = new Vue({ el: '#app-2', data: { message: '页面加载于 ' + new Date().toLocaleString() } }) 鼠标悬停几秒钟查看此处动态绑定的提示信息！这里 v-bind 属性被称为指令。指令带有前缀 v-，以表示它们是 Vue.js 提供的特殊属性。它们会在渲染过的 DOM 上应用特殊的响应式行为。这个指令的简单含义是说：将这个元素节点的 title 属性和 Vue 实例的 message 属性绑定到一起。打开浏览器的控制台输入 app2.message = 'some new message'，你就会再一次看到这个绑定了title 属性的HTML已经进行了更新。条件与循环控制切换一个元素的显示也相当简单：现在你看到我了 var app3 = new Vue({ el: '#app-3', data:{ seen: true } }) 现在你看到我了，继续在控制台设置 app3.seen = false，你会发现 “现在你看到我了” 消失了。 Vue.js 2.0 实例构造器。每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例启动的： var vm = new Vue({ // 选项 }) 虽然没有完全遵循 MVVM 模式， Vue 的设计无疑受到了它的启发。因此在文档中经常会使用 vm 这个变量名表示 Vue 实例。在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。全部的选项可以在 API 文档中查看。可以扩展 Vue 构造器，从而用预定义选项创建可复用的组件构造器： var MyComponent = Vue.extend({ // 扩展选项 }) // 所有的 `MyComponent` 实例都将以预定义的扩展选项被创建 var myComponentInstance = new MyComponent() 尽管可以命令式地创建扩展实例，不过在多数情况下建议将组件构造器注册为一个自定义元素，然后声明式地用在模板中。我们将在后面的“组件系统”中详细说明。现在你只需知道所有的 Vue.js 组件其实都是被扩展的 Vue 实例。属性与方法每个 Vue 实例都会代理其 data 对象里所有的属性： var data = { a: 1 } var vm = new Vue({ data: data }) vm.a === data.a // -> true // 设置属性也会影响到原始数据 vm.a = 2 data.a // -> 2 // ... 反之亦然 data.a = 3 vm.a // -> 3 注意只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。我们将在后面详细讨论响应系统。除了 data 属性， Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的 data 属性区分。例如： var data = { a: 1 } var vm = new Vue({ el: '#example', data: data }) vm.$data === data // -> true vm.$el === document.getElementById('example') // -> true // $watch 是一个实例方法 vm.$watch('a', function (newVal, oldVal) { // 这个回调将在 `vm.a` 改变后调用 }) 注意，不要在实例属性或者回调函数中（如 vm.$watch('a', newVal => this.myMethod())）使用箭头函数。因为箭头函数绑定父上下文，所以 this 不会像预想的一样是 Vue 实例，而是 this.myMethod 未被定义。实例属性和方法的完整列表中查阅 API 参考。实例生命周期每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些生命周期钩子，这就给我们提供了执行自定义逻辑的机会。例如，created 这个钩子在实例被创建之后被调用： var vm = new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 console.log('a is: ' + this.a) } }) // -> "a is: 1" 也有一些其它的钩子，在实例生命周期的不同阶段调用，如 mounted、 updated、destroyed 。钩子的 this 指向调用它的 Vue 实例。一些用户可能会问 Vue.js 是否有“控制器”的概念？答案是，没有。组件的自定义逻辑可以分布在这些钩子中。生命周期图示下图说明了实例的生命周期。你不需要立马弄明白所有的东西，不过以后它会有帮助。 Vue.js 基础教程 Vue.js 2.0 安装 Vue.js 2.0 介绍 Vue.js 2.0 实例 Vue.js 2.0 模板语法 Vue.js 2.0 计算属性 Vue.js 2.0 Class 与 Style 绑定 Vue.js 2.0 条件渲染 Vue.js 2.0 列表渲染 Vue.js 2.0 事件处理器 Vue.js 2.0 表单控件绑定 Vue.js 2.0 组件 Vue.js 2.0 进阶教程 Vue.js 2.0 深入响应式原理 Vue.js 2.0 过渡效果 Vue.js 2.0 过渡状态 Vue.js 2.0 Render 函数 Vue.js 2.0 自定义指令 Vue.js 2.0 混合 Vue.js 2.0 插件 Vue.js 2.0 单文件组件 Vue.js 2.0 生产环境部署 Vue.js 2.0 路由 Vue.js 2.0 状态管理 Vue.js 2.0 单元测试 Vue.js 2.0 服务端渲染 Vue.js 2.0 对比其他框架 vue3 的声明式渲染 Vue3 中的应用是通过使用 createApp 函数来创建的，语法格式：const app = Vue.createApp({ /* 选项 */ }) 传递给 createApp 的选项用于配置根组件。在使用 mount() 挂载应用时，该组件被用作渲染的起点。一个简单的实例：Vue.createApp(HelloVueApp).mount('#hello-vue') 说明：createApp 的参数是根组件（HelloVueApp），在挂载应用时，该组件是渲染的起点。一个应用需要被挂载到一个 DOM 元素中，以上代码使用 mount('#hello-vue') 将 Vue 应用 HelloVueApp 挂载到中。接下来我们从 Hello Vue!! 的代码开始学起。 html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)title> <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js">script> head> <body> <div id="hello-vue" class="demo"> {{ message }} div> <script> const HelloVueApp = { data() { return { message: 'Hello Vue!!' } } } Vue.createApp(HelloVueApp).mount('#hello-vue') script> body> html> 以上实例中，我们先在 HTML 页面中引入 Vue 的 JS 文件： HTML 页面中有一个 div 元素: {{ message }} mount('#hello-vue') 将 Vue 应用 HelloVueApp 挂载到中。 {{ }} 用于输出对象属性和函数返回值。 {{ message }} 对应应用中 message 的值。 data 选项 data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。 html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)title> <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js">script> head> <body> <div id="app" class="demo">div> <script> const app = Vue.createApp({ data() { return { count: 4 } } }) const vm = app.mount('#app') document.write(vm.$data.count) // => 4 document.write(" ") document.write(vm.count) // => 4 document.write(" ") // 修改 vm.count 的值也会更新 $data.count vm.count = 5 document.write(vm.$data.count) // => 5 document.write(" ") // 反之亦然 vm.$data.count = 6 document.write(vm.count) // => 6 script> body> html> 以上实例属性仅在实例首次创建时被添加，所以你需要确保它们都在 data 函数返回的对象中。 VUE中的 $ 指的是什么? 挂载在this上的vue内部属性一个特殊标记。增强区分的，来说明这是内置的实例方法属性内部 api 的命名空间带 $ 的是 VUE 框架（或插件）定义的属性方法方法我们可以在组件中添加方法，使用 methods 选项，该选项包含了所需方法的对象。以下实例我们添加了 methods 选项，选项中包含了 increment() 方法： html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)title> <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js">script> head> <body> <div id="app" class="demo">div> <script> const app = Vue.createApp({ data() { return { count: 4 } }, methods: { increment() { // `this` 指向该组件实例 this.count++ } } }) const vm = app.mount('#app') document.write(vm.count) // => 4 document.write(" ") vm.increment() document.write(vm.count) // => 5 script> body> html> 基本指令声明式渲染 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。 Mustache {{}} vue在渲染界面时，页面先以{{xxXXX}}的形式加载到页面，然后再用数据替换{{}}. Mastach表达式调用三种数据格式类型：调用单值数据 <template> <div class="home"> {{msg}} <br/> div> template> <script> export default { name: 'Home', data() { return { msg: 'hello world' } } } script> 调用数组数据 <template> <div class="home"> {{fav[0]}}--{{fav[1]}}<br/> div> template> <script> export default { name: 'Home', data() { return { fav: ['java','vue'] } } } script> 调用对象数据 <template> <div class="home"> {{student.name}} -- {{student.age}} div> template> <script> export default { name: 'Home', data() { return { student:{'name':'xm','age':234} } } } script> 指令 (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 指令将根据表达式的值真假来插入/移除元素 <template> <div class="home"> <p v-if="seen">现在你看到我了p> div> template> <script> export default { name: 'Home', data() { return { // 次数seen为false,那么v-if 则成为 vi-if="false" seen: false | true // false true只选择一个 } } } script> 注意：v-if 和 v-show 区别 V-if: 对dom节点进行删除和增加 V-show: 通过css控制节点的隐藏和显示如果隐藏/显示位置切换不是特别频繁的话，建议还是使用v-if，反之如果切换频繁则使用v-show v-bind 能够接收一个“参数”，在指令名称之后以冒号表示。v-bind 指令可以用于响应式地更新 <template> <div class="home"> <a v-bind:href="url">{{website}}a> div> template> <script> export default { name: 'Home', data() { return { website: '新浪', url: 'http://www.sina.com' } } } script> 在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定动态参数绑定，[attributeName]可根据需要动态设置 ... 如下列代码： <template> <div class="home"> <a v-bind:[attri]="attriVal"> clike mea> div> template> <script> export default { name: 'Home', data(){ return{ attri:'href', attriVal:'http://www.sina.com' } } } script> 缩写 v-bind 可一律缩写为 " : " ，如： clike me v-on 用于监听 DOM 事件 <template> <div class="home"> <a v-on:click="showHello"> clike mea> div> template> <script> export default { name: 'Home', methods:{ // 出发点击事件后，执行showHello函数 showHello(){ alert("hello world") } } } script> 缩写 v-on 可一律缩写为 @ 如上例： clike me v-for 用于对一个数组来渲染一个列表，因此被称为"列表渲染" , 需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名遍历数组： <template> <div class="home"> <ul > <li v-for="(item,index) in students" :key="index"> {{item}} li> ul> div> template> <script> export default { name: 'Home', data(){ return{ students:['xm','lm','aa'] } } } script> 遍历集合 <template> <div class="home"> <ul > <li v-for="(item,index) in stus" :key="index"> {{item.name}}--{{item.age}} li> ul> div> template> <script> export default { name: 'Home', data(){ return{ names:['xm','lm','aa'], stus:[{'name':'xm',age:23},{'name':'lm',age:33}] } } } script> 遍历对象的属性和值 <template> <div class="home"> <ul > <li v-for="(value,name,index) in stus" :key="index"> {{name}}--{{value}} li> ul> div> template> <script> export default { name: 'Home', data(){ return{ names:['xm','lm','aa'], stus:{'name':'xm',age:23} } } } script> 建议：v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。所以，我们应尽可能在使用 v-for 时提供 key attribute ，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。 v-model 在表单、及 `` 元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素， v-model 本质上是语法糖，它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理。 <template> <div class="home"> <input v-model="message" placeholder="edit me" /> <p>Message is: {{ message }}p> div> template> <script> export default { name: 'Home', data(){ return{ message:'hello' } } } script> 6.Vue事件 • V-on：监听事件 • 自定义事件组件内抛出：this.$emit('myEvent') 外部监听： • 将原生事件绑定到组件事件修饰符：即只有触发事件设置的条件，事件才会发生。修饰符是由点开头的指令后缀来表示的。( https://v3.cn.vuejs.org/guide/events.html ) .stop .prevent .capture .self .once .passive 示例：事件修饰符。下面示例是只有按下 enter ，才会触发事件 sayHi 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 操作上。插值文本数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值： html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)title> <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js">script> head> <body> <div id="hello-vue" class="demo"> {{ message }} div> <script> const HelloVueApp = { data() { return { message: 'Hello Vue!!' } } } Vue.createApp(HelloVueApp).mount('#hello-vue') script> body> html> {{...}} 标签的内容将会被替代为对应组件实例中 message 属性的值，如果 message 属性的值发生了改变，{{...}} 标签内容也会更新。如果不想改变标签的内容，可以通过使用 v-once 指令执行一次性地插值，当数据改变时，插值处的内容不会更新。这个将不会改变: {{ message }} Html 使用 v-html 指令用于输出 html 代码： html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)title> <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js">script> head> <body> <div id="example1" class="demo"> <p>使用双大括号的文本插值: {{ rawHtml }}p> <p>使用 v-html 指令: <span v-html="rawHtml">span>p> div> <script> const RenderHtmlApp = { data() { return { rawHtml: '这里会显示红色！' } } } Vue.createApp(RenderHtmlApp).mount('#example1') script> body> html> 分析：属性 HTML 属性中的值应使用 v-bind 指令。对于布尔属性，常规值为 true 或 false，如果属性值为 null 或 undefined，则该属性不会显示出来。以上代码中如果 isButtonDisabled 的值是 null 或 undefined，则 disabled 属性甚至不会被包含在渲染出来的

1、Vue.js 是什么

简单示例

从环境搭建到发布

2、安装

方法 1：cdn

方法 2：直接下载 vue.js

6、vue 快速开始

vue2、vue3

vue2 的 声明式渲染

vue3 的 声明式渲染

data 选项

方法

基本指令

声明式渲染

调用单值数据

调用数组数据

调用对象数据

Hello!

v-if 和 v-show

v-bind

v-on

v-for

v-model

6.Vue事件

7.特殊特性

8.选项 / 数据

9.生命周期

10.混入

11.组件

12.调试

7、Vue3 模板语法

插值

文本

Html

属性

表达式

指令

参数

修饰符

用户输入

缩写

v-bind 缩写

v-on 缩写

8、Vue3 条件语句 ( 条件判断 )

v-if

v-else

v-else-if

v-show

Vue.js 循环语句

Vue3 循环语句

Vue3 组件

Vue3 计算属性

Vue3 监听属性

Vue3 样式绑定

Vue3 事件处理

Vue3 表单

Vue3 自定义指令

Vue3 路由

Vue3 混入

Vue3 Ajax(axios)

Vue3 组合式 API

vue2 的声明式渲染

vue3 的声明式渲染