小白技术栈 Vue-Ajax

WlkYCode

已于 2024-05-31 19:00:58 修改

阅读量285

点赞数 5

文章标签： vue.js 前端 javascript

于 2024-05-29 19:01:54 首次发布

本文链接：https://blog.csdn.net/EverythingDone/article/details/139299869

版权

什么是Vue

Vue.js（或简称 Vue）是一个构建用户界面的渐进式 JavaScript 框架。它旨在通过简洁的 API 实现响应式的数据绑定和组合的视图组件。Vue 的核心库专注于视图层，使得它易于与其他库或已有项目整合。

MVVM（Model-View-ViewModel）模型图

在这里插入图片描述
Model是数据模型里面包含业务处理逻辑，View是视图层负责数据展示，ViewModel在其中实现数据双向绑定核心（Model层更新View会自动同步到View同样View更新也会同步Model）

Vue快速入门

一、下载vue.js flie && Inttroduce offcial address

1.1 download vue.js flie

https://v2.vuejs.org/v2/guide/installation.html 在这里插入图片描述

1.2. Inttroduce offcial address

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

二、Introdure vue.js flie

//new HTML Page , Inttroduce Vue.js Flie
<script src="js/vue.js"></script>

//JS Code, new Vue core object ,define date model
<script>
    new vue({
       el: "app",
       data: {
       message: "Hello Vue"
       }
       })
</script>

//compile view
<div id="app">
   <input type="text" v-model="message">
   {{ message }}
</div>

三、Output result （输出结果）

在这里插入图片描述

Vue 常用Intruct

一、Vue 指令是什么

Vue.js是一个流行的JavaScript框架，它提供了一组强大的指令（通常称为“Directives”）来扩展和控制应用程序的行为和外观。

一、Vue 常用Intruct case

1.1 v-bind

function：动态地绑定一个或多个属性，或一个组件prop到表达式。

<body>
    <div id="app">
        <a v-bind:href="url">link one</a> <br>
        <a :href="url">link two</a>
    </div>
</body>

<script>
    //define Vue object
    new Vue({
        el: "#app",
        data: {
            url: "https://www.baidu.com"
        }
    })
</script>

1.2 v-model

fountion：在表单元素和Vue实例之间创建双向数据绑定。

<body>
    <div id="app">
        
        <input type="text" v-model="url">
    </div>
</body>

<script>
    //define Vue object
    new Vue({
        el: "#app",
        data: {
            url: "https://www.baidu.com"
        }
    })
</script>

1.3 v-on

function：监听DOM事件，并在触发时运行一些JavaScript代码。

<body>
    <div id="app">
        <input type="button" value="点我一下" v-on:click="handle()">
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {

        },
        methods: {
            handle: function () {
                alert("别点我");
            }
        }
    })
</script>

1.4 v-if

function：根据表达式的值动态地控制元素的渲染

<body>
    <div id="app">
        age<input type="text" v-model="age">经判断，为：
        <span v-if="age <= 35">年轻人（35及以下）</span>
        <span v-if="age > 35">中年人（35以上）</span>
        <span v-if="age  >= 60">老人60</span>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            age: 20
        },
        methods: {

        }
    })
</script>

1.4 v-show

functtion：基于表达式值的真假性来动态改变元素的可见性

<body>
    <div id="app">
        age<input type="text" v-model="age">经判断，为：
        <span v-show="age <= 35">年轻人（35及以下）</span>
        <span v-show="age > 35">中年人（35以上）</span>
        <span v-show="age  >= 60">老人60</span>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            age: 20
        },
        methods: {

        }
    })

1.4 v-for

function：它用于基于源数据多次渲染一个元素或一组元素。

<body>
    <div id="app">
<div v-for="(addr,index) in address">{{addr}}</div>
    </div>

</body>
<script>
    new Vue({
        el: "#app",
        data: {
            address: ["北京", "新乡", "上海"]
        },
        methods:{

        }
    })
</script>

1.5案例

在这里插入图片描述

<body>

    <div id="app">
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>number</th>
                <th>name</th>
                <th>age</th>
                <th>geder</th>
                <th>score</th>
                <th>geder</th>
            </tr>
            <tr align="content" v-for="(user,index) in users">
                <td>{{index + 1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>
                    <span v-if="user.gender == 1">Male</span>
                    <span v-if="user.gender == 2">Famle</span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score >= 85">Excellent</span>
                    <span v-else-if="user.score >= 60">Pass</span>
                    <span v-else style="color: brown;">fail</span>
                </td>
            </tr>
        </table>
    </div>

</body>

<script>
    new Vue({
        el: "#app",
        data:{
            users: [{
                name: "WQY",
                age: 20,
                gender: "1",
                score: "78",
            },{
                name: "One",
                age: 2,
                gender: "2",
                score: "99",
            },{
                name: "two",
                age: 24,
                gender: "2",
                score: "70",
            },{
                name: "s",
                age: 24,
                gender: "2",
                score: "50",
            }]
        },
        methods: {


        }

    })
</script>

Vue life cycle （生命周期）

Vue.js 的生命周期是一系列从 Vue 实例被创建到销毁的过程中，自动执行的钩子函数。这些钩子函数允许你在 Vue 实例的不同阶段执行特定的代码，从而控制和管理你的组件。
在这里插入图片描述

<body>
    <div id="app">

    </div>

</body>
<script>
    //定义Vue  object
    new Vue({
        el: "#app",  //vue接管区域
        date: {

        },
        methods: {

        },
        mounted(){
            alert("vue挂载完成，发送请求到服务器")
        }
    })
</script>

Ajax Introduce（介绍）

全称Asynchronous JavaScript and XML（异步JavaScript和XML），是一种用于创建更好、更快以及交互性更强的Web应用程序的技术。

Axios

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。它是前端开发中用于发送 HTTP 请求的一个库，可以运行在浏览器端和 Node.js 中。

Axios引入地址

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

环境准备

Vue-cli 是 Vue.js 的一个官方脚手架工具。它可以帮助开发者快速生成 Vue.js 项目的基础模板，从而大大简化项目的初始化过程。V使得开发者能够根据自己的需求快速构建出高效、健壮的 Vue.js 应用程序。

WlkYCode

关注

5
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
小白技术栈 Vue-Ajax

Vue.js（或简称 Vue）是一个构建用户界面的渐进式 JavaScript 框架。它旨在通过简洁的 API 实现响应式的数据绑定和组合的视图组件。Vue 的核心库专注于视图层，使得它易于与其他库或已有项目整合。
复制链接

扫一扫