当前位置： 首页 > article >正文

Vue3快速入门+axios的异步请求（基础使用）

article 2024/11/14 4:37:31

学习Vue之前先要学习html+css+js的基础使用

Vue其实是js的框架

常用到的Vue指令包括vue-on,vue-for,vue-blind,vue-if&vue-show,v-modul

vue的基础模板：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
    </div>
    <script type="module">
        import{createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
        createApp({
            data(){
                return{
                    msg:'hello vue3'
                }
            }
        }).mount("#app");
    </script>
</body>
</html>

常用到的Vue指令：

  1. v-for
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <table border="1 solid" colspa="0" cellspacing="0">
            <tr>
                <th>文章标题</th>
                <th>分类</th>
                <th>发表时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>

            <tr v-for="(article,index) in articleList">
                <td>{{article.title}}</td>
                <td>{{article.category}}</td>
                <td>{{article.time}}</td>
                <td>{{article.state}}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
<!--             <tr>
                <td>标题2</td>
                <td>分类2</td>
                <td>2000-01-01</td>
                <td>已发布</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
            <tr>
                <td>标题3</td>
                <td>分类3</td>
                <td>2000-01-01</td>
                <td>已发布</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr> -->
        </table>
    </div>

    <script type="module">
        //导入vue模块
        import { createApp} from 
                'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        //创建应用实例
        createApp({
            data() {
                return {
                    articleList:[
                        {
                            title:"医疗反腐绝非砍医护收入",
                            category:"时事",
                            time:"2023-09-5",
                            state:"已发布"
                        },
                        {
                            title:"中国男篮缘何一败涂地？",
                            category:"篮球",
                            time:"2023-09-5",
                            state:"草稿"
                        },
                        {
                            title:"华山景区已受大风影响阵风达7-8级，未来24小时将持续",
                            category:"旅游",
                            time:"2023-09-5",
                            state:"已发布"
                        }
                    ]
                }
            }
        }).mount("#app")//控制页面元素
    </script>
</body>
</html>
  2. v-blind
     
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- <a href="https://www.itheima.com">黑马官网</a> -->
         <a v-bind:href="url">黑马</a>
    </div>
    <script type="module">
        //引入vue模块
        import { createApp} from 
                'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        //创建vue应用实例
        createApp({
            data() {
                return {
                    url:'https://www.itheima.com'
                }
            }
        }).mount("#app")//控制html元素
    </script>
</body>
</html>
  3. v-if&&v-show
     
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">

        <!-- 手链价格为:  <span>9.9</span>  <span>19.9</span> <span>29.9</span> -->

        <span v-if="customer.level>=0 && customer.level<=1">9.9</span>
        <span v-else-if="customer.level>=2 && customer.level<=4">19.9</span>
        <span v-else>29.9</span>

        <br>
        <span v-show="customer.level>=0 && customer.level<=1">9.9</span>
        <span v-show="customer.level>=2 && customer.level<=4">19.9</span>
        <span v-show>29.9</span>
    </div>

    <script type="module">
        //导入vue模块
        import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        //创建vue应用实例
        createApp({
            data() {
                return {
                    customer:{
                        name:'张三',
                        level:3
                    }
                }
            }
        }).mount("#app")//控制html元素
    </script>
</body>

</html>
  4. v-on
     
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button v-on:click="money">点我有惊喜</button> &nbsp;
        <button v-on:click="love">再点更惊喜</button>
    </div>

    <script type="module">
        //导入vue模块
        import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        //创建vue应用实例
        createApp({
            data() {
                return {
                    //定义数据
                }
            },
            methods:{
                money: function(){
                    alert('123')
                },
                love: function(){
                    alert('456')
                }
            }
        }).mount("#app");//控制html元素

    </script>
</body>
</html>
  5. v-module
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">

        文章分类: <input type="text" v-modul="searchConditions.category"/><span>{{searchConditions.category}}</span>

        发布状态: <input type="text" v-modul="searchConditions.state"/><span>{{searchConditions.state}}</span>

        <button>搜索</button>
        <button v-on-click="clear">重置</button>

        <br />
        <br />
        <table border="1 solid" colspa="0" cellspacing="0">
            <tr>
                <th>文章标题</th>
                <th>分类</th>
                <th>发表时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <tr v-for="(article,index) in articleList">
                <td>{{article.title}}</td>
                <td>{{article.category}}</td>
                <td>{{article.time}}</td>
                <td>{{article.state}}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
        </table>
    </div>
    <script type="module">
        //导入vue模块
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        //创建vue应用实例
        createApp({
            data() {
                return {
                    //定义数据
                    methods:{
                        clear:function(){
                            //清空category里的数据
                        }
                    },
                    searchConditions:{
                        category:'',
                        state:''
                    },
                    articleList: [{
                        title: "医疗反腐绝非砍医护收入",
                        category: "时事",
                        time: "2023-09-5",
                        state: "已发布"
                    },
                    {
                        title: "中国男篮缘何一败涂地？",
                        category: "篮球",
                        time: "2023-09-5",
                        state: "草稿"
                    },
                    {
                        title: "华山景区已受大风影响阵风达7-8级，未来24小时将持续",
                        category: "旅游",
                        time: "2023-09-5",
                        state: "已发布"
                    }]
                }
            },
            mounted: function() {
                console.log('vue挂载完毕，发送请求获取数据')
            }
        }).mount("#app")//控制html元素
    </script>
</body>

</html>

    axios使用：
     

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 引入axios的js文件 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        /* 发送请求 */
        axios({
            method:'get',
            url:'http//localhost:8080/article/getAll'
        }).then(result=>{
            //成功的回调
            //result代表服务器响应的所有数据，包含了响应头，响应体，result.data 代表的是接口响应的核心数据
            console.log(result.data)
        }).catch(err=>{
            //失败的回调
            console.log(err)
        });

/*         // 使用别名的方式发送请求
        axios.get('http//localhost:8080/article/getAll').then(result=>{
            //成功的回调
            //result代表服务器响应的所有数据，包含了响应头，响应体，result.data 代表的是接口响应的核心数据
            console.log(result.data)
        }).catch(err=>{
            //失败的回调
            console.log(err)
        }); */
    </script>
</body>
</html>


http://www.kler.cn/a/316588.html

相关文章：

  • 鸿蒙进阶篇-属性动画-animateTo转场动画
  • LLMs之Code：Github Spark的简介、安装和使用方法、案例应用之详细攻略
  • 回归分析学习
  • 微服务架构面试内容整理-SpringCloud Netflix‌与Spring Cloud Alibaba比较
  • 运行springBlade项目历程
  • 动态规划---解决多段图问题
  • 基于SpringBoot的旅游网站系统
  • 硬盘数据能否自己在家恢复？探索数据恢复的可行性与方法
  • 信息技术引领的智能化未来
  • 滚雪球学SpringCloud[5.3讲]： 配置管理中的高可用与容错
  • How can I stream a response from LangChain‘s OpenAI using Flask API?
  • 认识知识产权——商标
  • postgresql gcc编译选项解释
  • JAVA执行引擎详细介绍
  • Qt Creator 集成开发环境 常见问题
  • 【代码随想录Day25】回溯算法Part04
  • CPU使用率较高排查和解决思路
  • vue + leaflet + 天地图实现搜索省份后高亮
  • Linux bash脚本本地开发环境(Git Bash)配置
  • 干货满满：嵌入式电阻的重要作用全知晓
  • 实验——完全使用Ansible部署多台服务器的服务
  • CTF 技能树 LOG -GIT泄露 笔记
  • 【磨皮美白】基于Matlab的人像磨皮美白处理算法，Matlab处理
  • react hooks--useContext
  • 【Nginx】在 Docker 上安装 Nginx 的详细指南
  • CVE-2024-46103