计算属性
、computed
、书写形式为函数
、有返回值
、使用的话是和data中值使用一样 {{revereMsg}}
、计算属性具有依赖性,如果原始值不发生变化,则不会执行,发生变化,会重新计算,执行次数和调用次数无关
、特定条件下,计算属性优于方法,方法是每调用一次就会执行一次
、应用场景,登录注册可以验证表单信息
<!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>计算属性</title>
</head>
<body>
<div id="app">
{{ msg }} ----- {{ reverseMsg }} ---- {{ reverseMsg }} ---- {{ reverseMsg }}---- {{ reverseMsg }}
<div>
<input type="tel" v-model="tel" > {{ telTip }}
</div>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 'hello message',
tel: ''
},
computed: { // 计算属性
reverseMsg () { // 函数----有返回值 ---- 就和data中值一样用
console.log('computed')
return this.msg.split('').reverse().join('')
},
telTip () {
if (this.tel === '') {
return '不能为空'
} else if (this.tel.length !== 11) {
return '格式错误'
} else {
return 'ok'
}
}
}
})
</script>
</html>
侦听属性
、vue提供了检测数据变化的一个属性 watch
、也叫做监听属性
、在特定条件下,计算属性优于侦听属性
<!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>方法</title>
</head>
<body>
<div id="app">
<input type="text" v-model="firstname">
<input type="text" v-model="lastname">
{{ fullname }}
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
firstname: 'wu',
lastname: 'daxun',
fullname: 'wu daxun'
},
watch: { // 侦听属性
firstname (newval, oldval) {
this.fullname = newval + this.lastname
},
lastname (newval, oldval) {
this.fullname = this.firstname + newval
}
}
})
</script>
</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>方法</title>
</head>
<body>
<div id="app">
<input type="text" v-model="firstname">
<input type="text" v-model="lastname">
{{ fullname }}
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
firstname: 'wu',
lastname: 'daxun'
},
computed: {
fullname () {
return this.firstname + this.lastname
}
}
})
</script>
</html>
总结
任何复杂的业务逻辑,建议使用计算属性
vue生命周期函数
生命周期钩子函数
、vue的生命周期就是vue实例从创建到销毁的过程
创建–初始化数据–模板编译/挂载(更新)–销毁
、类型都是function
总共分为8个阶段:
beforeCreate(创建前),
created(创建后),created(){}//数据请求
beforeMount(载入前),
mounted(载入后),mounted(){}//数据请求 +操作dom
beforeUpdate(更新前),
updated(更新后),updated(){} //操作dom
beforeDestroy(销毁前),
destroyed(销毁后)destroyed(){} //不可以操作DOM
vue中的数据请求
fetch实现数据请求
、fetch可以直接使用,不需要引入任何东西
、语法
fetch(‘url’,{
//参数
method:’get‘,//如果改为post,则接收不到,get直接拼在地址栏
//post请求是通过 req.body 接收数据
}).then(res => res.json()) //将promise对象转为json对象
.then(data = >{ })//得到请求的数据,执行后续的业务逻辑
、fetch()返回的是promise对象
<!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>fetch数据请求</title>
</head>
<body>
<div id="app">
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
mounted () {
/**
* fetch 可以直接使用,不需要引入任何东西
* fetch() --- 返回的是 promise 对象
* .then(res => res.json()) 将promise 对象转换成json对象,供我们使用
* .then(data => {}) 得到请求的数据,执行后续的业务逻辑
*/
fetch('https://www.daxunxun.com/banner')
.then(res => res.json())
.then(data => {
console.log(data)
})
}
})
</script>
</html>
axios实现数据请求
、会自动把promise对象转换为json数据
、语法:
axios.get(‘url’,{
}).then(res = >{
console.log(res.date)
})
、get请求直接url拼接
、post请求,{ 对象参数 }
<!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>fetch数据请求</title>
</head>
<body>
<div id="app">
</div>
</body>
<script src="vue.js"></script>
<script src="axios.min.js"></script>
<script>
new Vue({
el: '#app',
mounted () {
axios.get('https://www.daxunxun.com/banner').then(res => {
console.log(res.data)
})
axios.post('https://www.daxunxun.com/users/login', {
username:'18813887814',
password: '1234567'
}).then(res => {
console.log(res.data)
})
}
})
</script>
</html>
========================================================