• Vue快速入门

    目录

    一、概述

    环境准备

    前置知识

    JavaScript-导入导出

    默认导入导出

    二、局部使用Vue

    1、使用步骤

    准备工作

    构建用户界面

    2、常用指令

    v-for

    v-bind

    v-if & v-show

    v-on

    v-model

    3、生命周期

    三、Axios

    使用案例1

    测试

    使用案例2

    测试

    请求方式别名

    举例

    四、综合案例

    分析

    代码编写

    测试

    一、概述

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

    环境准备

    • 开发平台：VsCode
    • 环境配置：node.js

    安装node.js看这里 使用NVM实现多版本Node.js的版本共存和无缝切换_nodejs多版本共存_An1ong的博客-CSDN博客

    前置知识

    JavaScript-导入导出

    JS提供的导入导出机制，可以实现按需导入。

            假设现在有一个外部js文件，里面存放了两个函数，用来打印信息。

            要是使用它就要在html里面引入它，然后调用。此时在这个html案例中它只用了其中一个函数，那么如果此时js文件有100个函数，也就是说此时导入了100个函数而其他99个函数压根就没有使用，这无疑使造成了很大的性能损失。

            为此js提供了按需导入的功能，你使用什么就导入什么。改良后的代码案例如下

     在方法前面加上export关键字，标识可以导出。或者在方法最底部export{ 方法1，方法2 }

    在使用的地方加入import关键字导入

    注意：import关键字一定要写在

    • v-bind

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

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

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

    传统的html超链接

    1.     <div id="app">
    2.         <a href="https://blog.csdn.net/m0_56308072?spm=1000.2115.3001.5343">超链接An1onga>
    3.     div>

    在vue中使用v-bind达到同样的效果

    2.     
      "app">
    3.         "url">超链接An1ong
    4.

    • v-if & v-show

    同样都是达到条件才会生效，只不过其中元素v-show全部都渲染了，只是将不符合条件的元素隐藏了起来；而不符合条件的，v-if压根就没有渲染出来

    v-on

    作用：为标签绑定事件

    语法：v-on：事件名="函数名"

            可简写为@事件名="函数名" 

     像数据一样，方法也需要统一的放在methods里，固定格式

    1. createApp({
    2.             data () {
    3.                 return {
    4.                     //定义数据
    5.                 }
    6.             },
    7.             methods: {
    8.                 //定义方法
    9.             }
    10.  
    11.         }).mount("#app")

     为两个按钮绑定事件

    1. <body>
    2.     <div id="app">
    3.         <button v-on:click="money">给你钱button>
    4.         <button @click="love">给你爱button>
    5.     div>
    6.  
    7.     <script type="module">
    8.         import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
    9.  
    10.  
    11.         createApp({
    12.             data () {
    13.                 return {
    14.                     //定义数据
    15.                 }
    16.             },
    17.             methods: {
    18.                 //定义方法
    19.                 money:function(){
    20.                     alert("vx转账300块")
    21.                 },
    22.                 love:function(){
    23.                     alert("我爱你❤")
    24.                 }
    25.             }
    26.  
    27.         }).mount("#app")
    28.  
    29.     script>
    30.  
    31. body>

    v-model

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

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

    注：v-model中绑定的变量，必须在data中定义

    案例：

            我们在搜索框中会输入数据，这个数据前端可以接收到并存在变量中，之后又可以使用这个变量进行操作。当内部这个变量发生变化时，又会反过来影响到视图层，这就叫双向绑定。

    1. <body>
    2.     <div id="app">
    3.  
    4.         <label for="category">文章分类：label>
    5.         <input type="text" id="category" v-model="searchConditions.category" />
    6.         <span>{{ searchConditions.category }}span>
    7.         <br/>
    8.  
    9.         <label for="status">发布状态：label>
    10.         <input type="text" id="status" v-model="searchConditions.state" />
    11.         <span>{{ searchConditions.state }}span>
    12.         <br/>
    13.         
    14.         <button>搜索button>
    15.  
    16.         <br/>
    17.  
    18.  
    19.  
    20.     div>
    21.  
    22.     <script type="module">
    23.       import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
    24.  
    25.       createApp({
    26.         //准备数据
    27.         data() {
    28.           return {
    29.  
    30.             searchConditions:{
    31.                 category:'',
    32.                 state:''
    33.             }
    34.         }).mount("#app");
    35.     script>
    36.   body>

    3、生命周期

    生命周期有八个阶段，每个阶段会自动执行一个生命周期方法（钩子），让开发者有机会在特定的阶段执行自己的代码

    其中，我们只需要记住mounted方法即可，一般用于在页面加载完毕时，发起异步请求，加载数据，渲染页面

    注：mounted方法不在methods中也不在data中，它与他们是同级的，需要单独声明

    三、Axios

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

     

    注：method不要写成methods，vscode在编写代码的时候不会报错，在网页上看可就是一片红了

    使用案例1

    现在已经起了一个后端服务器（自己随便写一个有接口的springboot程序即可）

    测试的接口为 获取文章列表

    1. <body>
    2.     
    3.     <script src="https://unpkg.com/axios/dist/axios.min.js">script>
    4.  
    5.     <script>
    6.         // 发送请求
    7.         axios({
    8.             method:'get',
    9.             url:'http://localhost:8888/article/getAll'
    10.         }).then(result => {
    11.             //成功的回调,result代表服务器响应的所有的数据，包含了响应header、body。
    12.             //result.data 代表的是接口响应的核心数据
    13.             console.log(result.data);
    14.  
    15.         }).catch(err => {
    16.             //失败的回调
    17.             console.log(err);
    18.         })
    19.     script>
    20. body>


     

    测试

     F12打开网页控制台，就能看到我们在前端发起的请求得到了后端的响应并获取了数据

    如果出现这个说明出现了跨域问题，需要在Controller上加上注解@CrossOrigin即可

    详情解决看这篇icon-default.png?t=N7T8https://blog.csdn.net/m0_56308072/article/details/130813590?spm=1001.2014.3001.5501

    使用案例2

    现在测试一个post请求，测试的接口为 新增文章

    1.    <script src="https://unpkg.com/axios/dist/axios.min.js">script>
    2.  
    3.     <script>
    4.         let article = {
    5.             title:'明天会更好',
    6.             category:'生活',
    7.             time:'2000-01-01',
    8.             state:'草稿'
    9.          }
    10.  
    11.         axios({
    12.             method:'post',
    13.             url:'http://localhost:8888/article/add',
    14.             data:article
    15.         }).then(result => {
    16.  
    17.             console.log(result.data)
    18.  
    19.         }).catch(err => {
    20.  
    21.  
    22.         })
    23.  
    24.     script>

    测试

    请求方式别名

    为了方便起见。Axios已经为所有支持的请求方法提供了别名（推荐使用这种方式）

    格式：axios.请求参数（url，[，data[，config]]）

            url是必带的参数，data与config是可选参数

    举例

    将上面两个改成别名方式请求

    1.       axios.get('http://localhost:8888/article/getAll')..then(result => {
    2.           //成功的回调,result代表服务器响应的所有的数据，包含了响应header、body。
    3.           //result.data 代表的是接口响应的核心数据
    4.           console.log(result.data);
    5.  
    6.       }).catch(err => {
    7.           //失败的回调
    8.           console.log(err);
    9.       });

    1.         axios.post('http://localhost:8888/article/add',article).then(result => {
    2.             console.log(result.data);
    3.         }).catch({})

    可以发现，使用这种方式来编写axios异步请求会更简便好用，也更推荐使用这种方式

    四、综合案例

    将本篇博客所学的全部内容综合起来，做一个综合案例作为本篇博客的结尾，案例如下

     

    分析

            首先进入页面，就要在mounted钩子函数里写axios请求以获取所有的文章数据。之后得到数据之后，用v-for将数据以此渲染在表格上。至于上面的搜索栏中要使用v-model双向绑定数据，搜索要用v-on绑定一个点击事件发起条件搜索请求，最终让页面只显示搜索的数据。

            其中有几个注意点：由于我们上面是将axios和vue分开来讲的，在将他们综合到一起的时候必然会出现一些不同的事项。

            html中引入了vue，那么就要将axios放入要执行方法里面，不能像之前一样单独放在外面，其次我们所要使用到一切数据都要先在data里面声明一下，createApp里面使用这些数据的时候要在前面加上this. 因为Vue的数据绑定是基于响应式系统的，通过this关键字，才能够访问组件实例中的数据，确保对数据的修改能够触发视图的更新。

    代码编写

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.     <title>Documenttitle>
    7.   head>
    8.   <body>
    9.     <script src="https://unpkg.com/axios/dist/axios.min.js">script>
    10.  
    11.     <div id="app">
    12.         文章分类：<input type="text" v-model="searchList.category">
    13.         发布状态：<input type="text" v-model="searchList.state">
    14.         <button @click="search">搜索button>
    15.       <table>
    16.         <tr>
    17.           <td>标题td>
    18.           <td>分类td>
    19.           <td>时间td>
    20.           <td>状态td>
    21.           <td>操作td>
    22.         tr>
    23.  
    24.         <tr v-for="item in arrayList " :key="item.id">
    25.           <td>{{ item.title }}td>
    26.           <td>{{ item.category }}td>
    27.           <td>{{ item.time }}td>
    28.           <td>{{ item.state }}td>
    29.           <td>
    30.             <button>编辑button>
    31.             <button>删除button>
    32.           td>
    33.         tr>
    34.       table>
    35.     div>
    36.  
    37.     <script type="module">
    38.       import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
    39.  
    40.       createApp({
    41.         data() {
    42.           return {
    43.             arrayList : [],
    44.             searchList:{
    45.               category:'',
    46.               state:''
    47.             }
    48.           };
    49.         },
    50.         methods: {
    51.             search:function(){
    52.               axios
    53.               .get("http://localhost:8888/article/search",{
    54.                 params: {
    55.                   category: this.searchList.category,
    56.                   state: this.searchList.state
    57.                 }
    58.               })
    59.               .then(result =>{
    60.  
    61.                 console.log(result.data);
    62.                 this.arrayList = result.data
    63.                 
    64.               }).catch(err => {
    65.  
    66.               })
    67.             }
    68.         },
    69.         mounted() {
    70.           axios
    71.             .get("http://localhost:8888/article/getAll")
    72.             .then((result) => {
    73.               console.log(result.data);
    74.               this.arrayList = result.data;
    75.             })
    76.             .catch((err) => {});
    77.         },
    78.       }).mount("#app");
    79.     script>
    80.   body>
    81. html>

          

    测试

  • 相关阅读:
    文档理解的新时代：LayOutLM模型的全方位解读
    CI/CD
    解决mac系统终端无法使用vpn
    计算机毕业设计（附源码）python在线宠物救助平台
    基于python爬虫与数据分析系统设计
    React Native for Arcgis 地图开发 聚合图Cluster （十一）
    【Java】System
    Apollo学习笔记（28）贝叶斯滤波
    AI原生技术分享活动：引领智能科技新浪潮
    Python--测试代码
  • 原文地址：https://blog.csdn.net/m0_56308072/article/details/134398098