Vue与Axios的快速入门

最新推荐文章于 2025-02-07 22:14:20 发布

啥也不会啊~

最新推荐文章于 2025-02-07 22:14:20 发布

阅读量50

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/2301_77064980/article/details/133488943

版权

一、vue

Vue是前端框架 => (半成品的软件) => 简化原生JavaScript对于DOM的操作。

MVVM:Model-View-ViewModel 双向绑定! Vue将页面中的元素与Vue对象中的数据绑定在一起! Vue是一个大管家,实时监听页面与对象中数据的变化,一个发生了改变另外一个也会跟随一起改变!

Vue的快速入门:

1.导入vue.js 一定要导入vue.js页面才可以使用Vue!

2.在<body>标签声明一个<div>标签并且给一个id叫做app Vue要基于Id进行数据的管理

3.在<script>标签中声明Vue对象

最基础在页面中获取Vue中定义的数据的方式 {{插值表达式}}

new Vue({
   el : "#app",
   data : {
       属性名 : 属性值,
       属性名 : 属性值,
       属性名 : 属性值,
   }
});

Vue的常用指令

v-bind : 声明在标签中,用于将Vue对象中定义的属性值作为标签的指定属性值!

v-bind是单向绑定！只可以通过Vue对象中的内容实时影响绑定的标签属性值，反之不可以！

v-bind:属性名="Vue中的属性名"

<a v-bind:href="url">跳转</a>

v-model : 声明在表单元素中,用于将Vue对象中定义的属性值与输入框/单选框/多选项的收集内容绑定在一起

v-model是双向绑定！输入框的内容改变会影响Vue对象中的内容，相反同理！

<form action="#" method="get">
<!-- 基于v-model指令完成数据的双向绑定(互相影响) -->
用户名:&emsp;<input type="text" name="username" v-model="user.username">
<br/>
<br/>
密码:&emsp;<input type="password" name="password" v-model="user.password">
<br/>
<br/>
性别:&emsp;男<input type="radio" name="gender" v-model="user.gender" value="1"> 
女<input type="radio" name="gender" v-model="user.gender" value="2">
</form>

<script>
    //创建Vue对象管理指定区域
    new Vue({
        el: "#app",
        data: {
            user: {
                username: "张二狗",
                password: "ergou666",
                gender: ''
            }
        }
    });
</script>

v-on:用于给表单中的元素绑定事件

v-on:事件名(没有on)="Vue中的函数名称()"

<input type="button" value="触发Hello函数" v-on:click="hello()"/>

@事件名="Vue中的函数名称()"
<input type="button" value="触发Hello函数" @click="hello()"/>

Vue对象中除了可以声明data(数据模型)也可以声明函数

new Vue({
   el : "#app",
   data : {
       属性名 : 属性值,
       属性名 : 属性值,
       属性名 : 属性值
   },
   methods : {
   	  方法名 : function(){},
   	  方法名 : function(){}
   }
});

v-if : 判断条件用于指定标签是否展示

v-if="判断条件" 条件:可以直接获取Vue中的Data的内容,不需要加{{}} / 条件要返回boolean值<span v-if="user.age <= 0">不是人</span><span v-else-if="user.age >= 1 && user.age <= 30">年轻人</span><span v-else-if="user.age >= 31 && user.age <= 60">中年人</span><span v-else>老年人</span>

v-show : 判断条件用于指定标签是否展示

v-show="判断条件" 条件:可以直接获取Vue中的Data的内容,不需要加{{}} / 条件要返回boolean值

<span v-show="user.gender == 1 && user.age >= 1 && user.age <= 30">你是一个年轻男人</span>
<span v-show="user.gender == 2 && user.age >= 1 && user.age <= 30">你是一个年轻女人</span>

区别:v-if如果条件不满足,标签是否渲染不渲染!

v-show如果条件不满足,标签是否渲染渲染(通过控制标签的dispaly的css样式不显示)

v-for : 遍历Vue对象中data的数据在页面循环渲染展示

(1)在Vue对象中准备一个用于遍历的数组(对象不能遍历)

(2)声明每次遍历完成后用什么HTML元素进行遍历内容的展示

v-for="临时变量名 in Vue中属性名" => 在用于渲染的元素的标签体中可以通过插值表达式{{临时变量名}}

<div v-for="username in usernameArray">{{username}}</div>

<span v-for="(username,index) in usernameArray">{{index}}:{{username}}</span>

Vue的生命周期

学习Vue生命周期的目的只有一个,不是明确Vue的每一个生命周期都干什么,明确的是基于Vue的某一个生命周期节点,我们可以做点什么!

例:Vue处于beforeCreate周期(提供方法beforeCreate)可以编写方法的逻辑,就在这个生命周期节点执行一些指定的代码!

记住mounted生命周期的触发节点当Vue对象管理了区域将内容挂载好之后,自动执行!

new Vue({
el: '#app',
data: {
	message: "we are 伐木累!"
},
//使用Vue钩子函数(生命周期函数)的目的就是在Vue加载完整个页面之后自动执行一些定义好的代码(向后台请求要数据)
mounted() {
	console.log("Vue对象已经加载完毕(页面渲染完毕),自动执行mounted钩子函数!")
}
});

Ajax的概念

补充:form表单请求GET/POST的区别

GET请求:会将收集到的数据按照请求路径?KEY=VALUE&KEY=VALUE的方式拼接在请求路径上。

提交路径

POST请求:会将收集到的数据按照KEY=VALUE的方式提交(不会放在请求路径上,放到请求体中)

需要基于F12找到开发者工具-网络(抓包)

区别:

POST请求更安全(请求的数据在地址栏看不到,能够抓包看到) / GET请求不安全 (二者没什么区别)

POST请求由于数据在请求体中,请求体可以保存任意大小的数据,GET请求参数在路径上(路径的长度有限制)

POST请求可以发送很多种(二进制数据)/GET请求只能发送ASCII字符数据

想要发送请求获取数据GET(快)

想要发送数据POST(方便/容量更大)

Ajax的概念:

异步交互的技术,可以在不影响整合页面的情况下,发送请求接收响应数据,完成页面的局部渲染。

悄悄的发请求,悄悄的处理结果 => 将结果渲染出来!

同步就是一件事一件事做,异步就是多件事可以一起做!

原生Ajax

document.getElementById("btn").onclick = function () {
    //创建XMLHttpRequest对象
    var xmlHttpRequest = new XMLHttpRequest();

    //基于open方法指定要请求的路径以及请求的方式
    xmlHttpRequest.open('GET', 'http://yapi.smart-xwork.cn/mock/169327/emp/list');

    //发送请求
    xmlHttpRequest.send();

    //给xmlHttpRequest对象绑定监听事件(监听内部的readyState内容发生改变)
    xmlHttpRequest.onreadystatechange = function () {
    //当readyState是4并且status是200才表示请求成功,响应数据以准备就绪!
    if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
    //默认把接收到的响应数据封装到对象的responseText
    document.getElementById("div").innerHTML = xmlHttpRequest.responseText;
    	}
    }
}