（6）Vue与Ajax基础-CSDN博客

本文链接：https://blog.csdn.net/weixin_65698803/article/details/148117978

什么是Vue？

Vue是一款用于构建用户界面的渐进式的JavaScript框架

快速入门

<body>
  <!-- 准备视图元素 -->
   <div id="app">
    <!-- 通过插值表达式进行数据渲染 -->
      <h1>{{message}}</h1>
   </div>

  <script type="module">
    //引入Vue模块
    import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    //创建Vue实例,并绑定视图
    createApp({
      //定义数据类型
      data (){
        return {
          message: 'Hello Vue'
        }
      }

    }).mount('#app')
  </script>
</body>

1.Vue常用指令

v-for

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

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

<body>
  <div id="app">
    <p v-for="name in names">{{name}}</p>
  </div>
  
  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
      data(){
        return {
          names: ['张无忌', '张三丰', '韦一笑', '殷天正']
        }
      }
    }).mount('#app')
  </script>
</body>

v-bind

动态为HTML标签绑定属性值，如设置href，src，style

语法：v-bind:属性名="属性值"，简化 :属性名=“属性值”

<body>
  <div id="app">
    <a :href= url>链接1</a>
    <br><br>
    <a href="https://www.baidu.com">链接2</a>
  </div>
  
  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
      data(){
        return {
          url : "https://www.baidu.com",

        }
      }
    }).mount('#app')
  </script>
</body>

v-if & v-show

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

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

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

基于CSS样式display来控制隐藏与显示

v-model

在表单元素上使用，双向数据绑定，获取或设置表单项数据

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

<body>
  
  <div id="app">
    <input type="text" v-model="name">{{name}}
  </div>
  
  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
      data(){
        return {
          name: 'Tom'
        }
      }
    }).mount('#app')
  </script>
</body>

v-on

绑定事件

语法：

v-on:事件名="内联语句"
v-on:事件名="函数名"
简写 @事件名="..."

<body>
  
  <div id="app">
    <input type="button" value="点我一下试试" v-on:click="console.log('shishi1')">
    <input type="button" value="再点我一下试试" v-on:click="handle">
  </div>
  
  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
      data(){
        return {
          name: 'Vue'
        }
      },

      methods: {
        handle(){
          console.log('shishi2')
        }
      },
    }).mount('#app')
  </script>
</body>

2.Ajax

Asynchronous JavaScript And Xml，异步的JavaScript和XML

作用：

数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据
异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术

axios

axios对原生的Ajax进行了封装，简化书写，快速开发

<body>
    <input type="button" value="获取数据GET" id="btnGet">

    <input type="button" value="删除数据POST" id="btnPost">

    <!-- 引入JS文件 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        document.querySelector("#btnGet").addEventListener('click',
       ()=>{
         //axios GET请求
        axios({
            method: "GET",
            url: 'https://mock.apifox.cn/m1/3128855-0-default/emp/list'
        }).then((result)=>{     //成功回调
            console.log(result.data);
        }).catch((err)=>{
            alert(err)
        })
       })
    </script>
</body>

3.Vue生命周期

Vue.js 的生命周期是指 Vue 实例从创建到销毁的整个过程中，会在特定阶段自动调用的一系列钩子函数（Lifecycle Hooks）。

Vue 生命周期阶段与钩子函数

1. 创建阶段（Initialization）

beforeCreate
- 实例刚被创建，数据观测（data）和事件配置（events）尚未初始化。
- 用途：极少使用，适合插件注入全局逻辑。
created
- 实例已完成数据观测（data 已响应式）、计算属性、方法等配置，但 DOM 未挂载。
- 用途：发起异步请求、初始化非 DOM 相关数据。

2. 挂载阶段（DOM Mounting）

beforeMount
- 模板编译完成，但尚未将虚拟 DOM 渲染为真实 DOM。
- 用途：极少使用，可在渲染前访问或修改虚拟 DOM。
mounted
- 实例已挂载到 DOM，可操作真实 DOM 或访问 $refs。
- 用途：操作 DOM、集成第三方库（如图表库）、发起依赖 DOM 的请求。

3. 更新阶段（Reactivity Updates）

beforeUpdate
- 数据变化后，虚拟 DOM 重新渲染之前触发。
- 用途：获取更新前的 DOM 状态（如滚动位置）。
updated
- 虚拟 DOM 重新渲染并应用真实 DOM 更新后触发。
- 用途：操作更新后的 DOM，注意避免无限循环更新。

4. 销毁阶段（Teardown）

beforeDestroy（Vue 2）/ beforeUnmount（Vue 3）
- 实例销毁前触发，此时实例仍完全可用。
- 用途：清除定时器、取消事件监听、解绑全局事件。
destroyed（Vue 2）/ unmounted（Vue 3）
- 实例销毁后触发，所有子组件和事件监听器已被移除。
- 用途：清理残留引用或日志记录。