Vue知识点

Issssy

已于 2023-03-01 22:05:15 修改

阅读量98

点赞数

文章标签： vue.js javascript 前端

于 2023-03-01 22:02:39 首次发布

本文链接：https://blog.csdn.net/Issssy/article/details/129290918

版权

文章详细介绍了Vue.js中的v-bind用于数据绑定，axios作为基于Promise的HTTP库对比AJAX的使用，包括AJAX的基本原理和axios的特点。同时，提到了事件修饰符如.stop和.v-model的修饰符.number，以及v-if和v-show在条件渲染中的区别和适用场景。

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

v-bind

v-bind就是用于绑定数据和元素属性的。v-bind后面是：属性名=，我的理解是表示绑定这个属性，绑定之后，对应的值要去vue的数据里面找,当然也可以等于一个常数，这样就不用去data里找了。
当我们在控制台改变url时，对应也会变化。相同的，我们还可以绑定图片src属性、超链接的class。

v-bind:让行内属性不写死

<!-- 简写： -->

    <div id="app">

        <a href="http://www.baidu.com">跳转</a>

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

        <button @click="change" target="_blank">跳转</button>

    </div>

ajax和axios

1、什么是ajax？

AJAX（ Asynchronous JavaScript and XML）

A：异步； J：js； A:and; X:XML

指异步和JavaScript和XML结合的一种技术。

作用：ajax可以实现网页的异步更新，意味着可以不重新加载整个页面的情况下，对网页的某个部分进行更新。

axjx的组成：

异步的js事件
其他的js（用来处理解析数数据）
XMLHttpRequest对象
数据（txt、json、xml、html）

2、ajax请求原理

创建XMLHttpRequest实例对象；

设置回调函数；

通过XMLHttpRequest.open发出Http网络请求,和服务器端进行连接；

服务器端收到请求，发出请求的数据；

检查网络请求对象的状态，如果响应成功，浏览器接收返回的数据，并且更新页面。

3、什么是axios？

axios是通过Promise对ajax的封装，是一个基于Promise 的Http库，可以在浏览器和Node.js中使用。

简单理解为：axios是一个封装好的，基于Promise的发送请求的方法，不用设置回调，直接调用then方法。

4、axios有哪些特性

在浏览器中创建XMLHttpRequest对象；
在node.js中创建Http请求
支持拦截请求和响应
自动转换将响应为JSON格式
提供一些并发请求

5、ajax和axios的区别

axios是通过Promise实现ajax技术的一种封装，就像jquery对ajax的封装一样；
axios返回的数据是一个promise，ajax返回的数据是回调；
axios比ajax更加好用，更加安全；

简单来说就是，ajax技术实现了局部数据的刷新，axios实现了对ajax的封装。

axios是ajax，ajax不止axios。

6、get请求提交参数

1.实例化一个请求对象

2.调用open方法，设置请求方式和请求地址

3.设置请求完成后到回调函数

4.调用send方法，完成请求

get传递参数

语法: url? key = value

          url? key1 = value1&key2 = value2&key3 = value3

<script>

    // 1.实例化一个请求对象

    let xhr = new XMLHttpRequest

    // 2.调用open方法，设置请求方式和请求地址

    xhr.open('get','https://autumnfish.cn/api/joke/list?num=10')

    // 3.设置请求完成后到回调函数

    xhr.onload = function(){

        // console.log(xhr.response);



        // xhr.response是服务器响应回来的内容

        // JSON.parse方法是将响应回来的JSON对象转为普通的JS对象



        let jokes = JSON.parse(xhr.response)

        console.log(jokes);

    }

    // 4.调用send方法，完成请求

    xhr.send()</script>

7.AJAX发送post请求

1.实例化一个请求对象

2.调用open方法，传递请求方法及请求地址

3.设置请求头

4.设置请求成功后回调函数

5.发送请求

get请求传递参数：直接在url地址后拼接，安全性不高

post请求传递参数：在send()方法里传递

<script>

        // 1.实例化一个请求对象

        let xhr = new XMLHttpRequest

        // 2.调用open方法，传递请求方法及请求地址

        xhr.open('post','https://autumnfish.cn/api/user/register')

        // 3.设置请求头

        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")

        // 4.设置请求成功后回调函数

        xhr.onload = function() {

            // console.log(xhr.response);



            let obj = JSON.parse(xhr.response)

            console.log(obj);

        }

        // 5.发送请求

        // 请求格式 :'key= value'

        xhr.send('username=nana')

</script>

3.事件修饰符

.stop 阻止事件继续传播

.prevent 阻止标签默认行为

.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理

.self 只当在 event.target 是当前元素自身时触发处理函数

.once 事件将只会触发一次

.passive 告诉浏览器你不想阻止事件的默认行为

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

4.v-model的修饰符

（1）.lazy

我们在上面的动图中可以看到通过v-model绑定的文本框只要是文本框的值发生变化了就会更新到Model的数据中，很多时候我们可能连贯实现某种功能但是会影响我们的性能，所以我们用到了.lazy修饰符

他会在我们文本框失去焦点的时候再帮我们将文本框的值同步给Model.