小白学Vue2

1. Vue概述

Vue（读音 /vjuː/, 类似于 view），是一款用于构建用户界面的渐进式的JavaScript框架（官方网站：https://cn.vuejs.org）。

2). 渐进式

渐进式中的渐进呢，字面意思就是 "循序渐进"。Vue生态中的语法呢是非常多的，比如声明式渲染、组件系统、客户端路由（VueRouter）、状态管理（Vuex、Pinia）、构建工具（Webpack、Vite）等等。

所谓渐进，指的是我们使用Vue框架呢，我们不需要把所有的组件、语法全部学习完毕才可以使用Vue。

3). 试一试

首先我们可以先创建一个HTML的文件（实用工具VsCode）

然后输入！+Tab先创建出一个名为1.html的文件（注意！是英文的）

Tab完成之后我们就可以看到一个html的基础代码，然后我们可以在里面添加一个script标签

再导入  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
vue的网页链接，并且写一段基础的Vue实现代码：

    createApp({

        data() {

            // const message = ref('Hello Vue!')

            return {

                message: "Hello Vue;"

            }

        }

    }).mount('#app')

写完之后我们再到body标签里去实现Hello Vue

注意花括号（大括号）为英文版，2个打括号里面和你的return 里的那个字段一致。
然后 按  alt+B组合键可以在VsCode里快捷打开网页。

之后我们就可以看到实现了用h1标签输出了一个 Hello Vue的文字。

4). 常用的vue指令

在完成以上的内容后，我们可以尝试一下v-for（常用于遍历数据）

作用：列表渲染，遍历容器的元素或者对象的属性

语法：v-for = "(item,index) in items"

参数：

• items 为遍历的数组

• item 为遍历出来的元素

• index 为索引/下标，从0开始 ；可以省略，省略index语法： v-for = "item in items"

按照之前的代码改吧改吧

接着我们使用快捷键alt+B
打开网页后展示以下界面：

那么我们就完成了一个简单的v-for循环

作用：给元素添加的唯一标识，便于vue进行列表项的正确排序复用

语法： `v-for="(item,index) in items" :key="唯一值"`

注意点:

- key的值只能是字符串 或 数字类型

- key的值必须具有唯一性

- 推荐使用id作为key（唯一），不推荐使用index作为key（会变化，不对应）

写法：

提示：官方推荐在使用 v-for 时提供一个key属性，以遍可以追踪每个节点，提升渲染性能。

2.v-bind指令
 

作用：动态为HTML标签绑定属性值，如设置href，src，style样式等。

语法：`v-bind:属性名="属性值"`

简化：`:属性名="属性值"`

注意：v-bind 所绑定的数据，必须在data中定义。

通过上述代码，已经为a标签的href属性绑定上了url变量，如果数据 url 发生变化，v-bind绑定的属性也会自动发生变化。 我们可以F12打开浏览器的开发者工具，通过Vue插件，来修改Vue的数据url，我们会看到超链接的链接的地址会自动发生变化 。

3.v-if  和 v-show指令

作用：这两类指令，都是用来控制元素的显示与隐藏的

v-if：

• 语法：v-if="表达式"，表达式值为 true，显示；false，隐藏

• 原理：基于条件判断，来控制创建或移除元素节点（条件渲染）

• 场景：要么显示，要么不显示，不频繁切换的场景

• 其它：可以配合 v-else-if / v-else 进行链式调用条件判断

v-show：

• 语法：v-show="表达式"，表达式值为 true，显示；false，隐藏

• 原理：基于CSS样式display来控制显示与隐藏

• 场景：频繁切换显示隐藏的场景
  注意：v-else-if必须出现在v-if之后，可以出现多个； v-else 必须出现在v-if/v-else-if之后 。
  
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
  完成以上内容后打开网页
  
  
  用v-if可以发现
  不符合规则的直接消失了
  
  再让我们试试v-show
  
  可以发现v-show只是把内容隐藏了
  4.v-model（双向数据绑定）
   

  作用：在表单元素上使用，双向数据绑定。可以方便的 获取 或 设置 表单项数据

  语法：v-model="变量名"

  这里的双向数据绑定，是指 Vue中的数据变化，会影响视图中的数据展示。 视图中的输入的数据变化，也会影响Vue的数据模型 。

  
  注意：v-model 中绑定的变量，必须在data中定义。
  
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
• 
  5.v-on（双向数据绑定）

  介绍

  作用：为html标签绑定事件（添加时间监听）

  语法：

  - `v-on:事件名="内联语句"`

  <input type="button" value="点我一下试试" v-on:click="console.log('试试就试试');">
  v-on:事件名="函数名"
  <input type="button" value="点我一下试试" v-on:click="handle">
  这里的handle函数，就需要在Vue应用实例创建的时候创建出来，在methods定义。
  简写为 @事件名="…"
  
  打开后可以看到一个这样的效果。（控制台按F12）
  5). 生命周期

  vue的生命周期：指的是vue对象从创建到销毁的过程。

  vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示：
  
  下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数：