Vue + Ajax

最新推荐文章于 2024-07-14 11:16:56 发布

沐之湫

最新推荐文章于 2024-07-14 11:16:56 发布

阅读量232

点赞数 10

文章标签： vue.js ajax 前端

本文链接：https://blog.csdn.net/Moyvze/article/details/134640370

版权

Vue

一、什么是Vue ?

Vue 是一款用于构建用户界面的渐进式的JavaScript框架。（官方网址：Vue.js - 渐进式 JavaScript 框架 | Vue.js）

框架：就是一套完整的项目解决方案，用于快速构建项目。优点：大大提升前端项目的开发效率。缺点：需要理解记忆框架的使用规则。（参照官网）

二、Vue的快速入门

准备环节： 1、引入Vue模块（官方提供）

2、创建Vue程序的应用实例，控制视图的元素

3、准备元素(div)，被Vue控制

数据驱动视图：

1、准备数据

2、通过插值表达式渲染页面

代码案例：

<!-- 3、准备元素(div)，被Vue控制 -->
<div id="app">
    <!--通过插值表达式渲染页面 -->
    <h1>{{message}}</h1>
  </div>
  <!-- 1、引入Vue模块（官方提供） -->
  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
      // 2、创建Vue程序的应用实例，控制视图的元素
    createApp({
        //准备数据
      data() {
        return {
          message:'Hello Vue'
        }
      },
    }).mount('#app')//使用id选择器控制div
  </script>

三、常用指令

指令：HTML标签上带有 v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能。

指令1：

v-for：列表渲染，遍历容器的元素或者对象的属性

作用：列表渲染，遍历容器的元素或者对象的属性语法： v-for = "(item,index) in items" 参数说明： items 为遍历的数组 item 为遍历出来的元素 index 为索引/下标，从0开始；可以省略，省略index语法： v-for = "item in items"

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

指令2：

v-bind：为HTML标签绑定属性值，如设置 href , css样式等

作用：动态为HTML标签绑定属性值，如设置href，src，style样式等。语法：v-bind:属性名="属性值" 简化：:属性名="属性值"

<div id="app">
    <a :href="url">链接1</a>
    <br><br>
    <a :href="url">链接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.itcast.cn'
        }
      }
    }).mount('#app')
  </script>

指令3：

v-if/v-else-if/v-else：条件性的渲染某元素，判定为true时渲染,否则不渲染

语法：v-if="表达式"，表达式值为 true，显示；false，隐藏原理：基于条件判断，来控制创建或移除元素节点（条件渲染）场景：要么显示，要么不显示，不频繁切换的场景其它：可以配合 v-else-if / v-else 进行链式调用条件判断

        <span v-if="user.gender == 1">男</span>
        <span v-else-if ="user.gender == 2">女</span>
        <span v-else>其他</span>

指令4：

v-show：根据条件展示某元素，区别在于切换的是display属性的值

语法：v-show="表达式"，表达式值为 true，显示；false，隐藏原理：基于CSS样式display来控制显示与隐藏场景：频繁切换显示隐藏的场景

        <samp v-show="user.job == 1">班主任</samp>
        <samp v-show="user.job == 2">教师</samp>
        <samp v-show="user.job != 1 && user.job !=2">其他</samp>

指令5：

v-model：在表单元素上创建双向数据绑定

作用：在表单元素上使用，双向数据绑定。可以方便的获取或设置表单项数据语法：v-model="变量名"

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

指令6：

v-on为html标签绑定事件（添加时间监听）语法： v-on:事件名="内联语句" v-on:事件名="函数名“ 简写为 @事件名="…"

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

Ajax

一、什么是Ajax?

介绍：Asynchronous JavaScript And XML，的JavaScript和XML①。作用：数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。

二、原生Ajax：

创建XMLHttpRequest对象：用于和服务器交换数据向服务器发送请求获取服务器响应数据

三、Axios

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

引入Axios的js文件（参照官网）使用Axios发送请求，并获取相应结果

method：请求方式，GET/POST url：请求路径 data：请求数据

为了方便起见，Axios已经为所有支持的请求方法提供了别名格式：axios.请求方式(url [, data [, config]])

Vue生命周期

生命周期：指一个对象从创建到销毁的整个过程。生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)。

沐之湫

关注

10
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue + Ajax

Vue 是一款用于构建用户界面的渐进式的JavaScript框架。Vue.js - 渐进式 JavaScript 框架 | Vue.js框架：就是一套完整的项目解决方案，用于快速构建项目。优点：大大提升前端项目的开发效率。缺点：需要理解记忆框架的使用规则。（参照官网）介绍：Asynchronous JavaScript And XML，的JavaScript和XML①。作用：数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
复制链接

扫一扫