【Vue基础知识总结 6，字节跳动内部学习资料泄露

最新推荐文章于 2024-08-02 16:29:16 发布

程序员李菲

最新推荐文章于 2024-08-02 16:29:16 发布

阅读量298

点赞数

分类专栏： Java 文章标签： node.js javascript vue.js 后端

本文链接：https://blog.csdn.net/m0_46608024/article/details/120066789

版权

本文是关于Vue基础知识的总结，涵盖了如何模拟后台JSON数据，HTML页面创建，以及Node.js的基本概念和应用，包括创建服务器端应用。此外，还介绍了NPM工具的安装和项目初始化，帮助读者快速上手Vue和Node.js开发。

摘要由CSDN通过智能技术生成


<script src="vue.min.js"></script>

<script src="axios.min.js"></script>

注意：测试时需要开启后端服务器，并且后端开启跨域访问权限

2、模拟后台json数据


{

    "sucess":true,

    "code":20000,

    "message":"成功",

    "data":{

        "items":[

            {"name":"素小暖","age":20},

            {"name":"小耗子","age":30},

            {"name":"凯美瑞","age":40}

        ]

    }

}

3、html


<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>



<body>

    <div id="app">

        <!--把userList数组里面数据显示 使用v-for指令 -->

        <div v-for="user in userList">

            {
  {user.name}} -- {
  {user.age}}

        </div>

    </div>

    <script src="vue.min.js"></script>

    <script src="axios.min.js"></script>

    <script>

        new Vue({

            el: '#app',

            //固定的结构

            data: { //在data定义变量和初始值

                //定义变量，值空数组

                userList:[]

            },

            created() { //页面渲染之前执行

                //调用定义的方法

                this.getUserList()

            },

            methods:{//编写具体的方法

                //创建方法 查询所有用户数据

                getUserList() {

                    //使用axios发送ajax请求

                    //axios.提交方式("请求接口路径").then(箭头函数).catch(箭头函数)

                    axios.get("data.json")

                        .then(response =>{//请求成功执行then方法

                            //response就是请求之后返回数据

                            //co