- 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.
(2).number
我们还是拿文本框举例,很多时候我们需要一些值让用户填写而这个值可能希望他是数字我们用于计算,这个时候很多同学想到很多办法,转换呀、输入后去判断等等等,但其实v-model中有一个修饰符就可以帮助我们完成这个需求
我们还是通过一个小栗子来看一下,首先我们希望两个文本框各输入一个数值我们进行求和.
- v-if和v-show的区别
v-show 和v-if 是比较常用的Vue指令,经常用来判断渲染部分代码块
1.v-show
- v-show指令的作用是:根据真假值切换元素的显示状态,是响应式的
- 语法表达v-show = " 表达式 "
- 原理是修改元素的的CSS属性(display)来决定实现显示还是隐藏
- 指令后面的内容最终都会解析为布尔值
- 值为真(true)的时候元素显示,值为假(false)的时候元素隐藏
- 数据改变之后呢对应的元素的显示状态也是会同步更新的
2.v-if
- v-if指令的作用:根据表达式的真假切换元素的显示状态
- v-if = "表达式"
- 本质是通过操纵dom元素来进行切换显示
- 表达式的值为true的时候元素存在于dom树中,为false的时候从dom树中移除
3.v-show和v-if的区别
- 原理
v-show指令:元素始终被渲染到HTML,它只是简单的伪元素设置css的style属性,当不满足条件的元素被设置style=“display:none”的样,是通过修改元素的的CSS属性(display)来决定实现显示还是隐藏
v-if指令:满足条件是会渲染到html中,不满足条件时是不会渲染到html中的,是通过操纵dom元素来进行切换显示
- 应用场景
v-if需要操作dom元素,有更高的切换消耗,v-show只是修改元素的的CSS属性有更高的初始渲染消耗,如果需要非常频繁的切换,建议使用v-show较好,如果在运行时条件很少改变,则使用v-if较好