1、计算属性
相较于函数而言计算属性更加智能,他是基于它们的响应式依赖进行缓存的。也就是说只要相关依赖(下述例子中的area)没有发生改变,那么这个计算属性的函数不会重新执行,而是直接返回之前的值。这个缓存功能让计算属性访问更加高效。
只要修改值后面立刻返回结果,不用写个按钮触发函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<span>长:</span>
<!-- value会控制input标签的显示所以用它绑定显示在页面之中 -->
<input type="text" v-model='length'>
<span>宽:</span>
<input type="text" v-model='width'>
<span>面积:</span>
<input type="text" v-model:value='area'>
</div>
<script>
new Vue({
el:'#app',
data:{
length:0,
width:0
},
computed:{
area:function(){
return this.length*this.width
}
}
})
</script>
</body>
</html>
1.1计算属性的set和get
计算属性默认只有get,不过在需要时你也可以提供一个set,但是提供了set就必须要提供get方法。省市区的自动补全
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<span>省:</span>
<input type="text" v-model='province'>
<span>市:</span>
<input type="text" v-model='city'>
<span>区:</span>
<input type="text" v-model:value='district'>
<span>详细地址:</span>
<input type="text" v-model:value='address'>
</div>
<script>
new Vue({
el:'#app',
data:{
province:0,
city:0,
district:0
},
computed:{
address:{
get(){
let result=''
if (this.province)
{result=this.province+'省'}
if (this.city){
result += this.city +'市'
}
if (this.district){
result += this.district +'区'
}
return result
},
set:function(value){
let result = value.split(/省|市|区/)
console.log(result)
if (result && result.length>0){
this.province=result[0]
}
if (result && result.length>1){
this.city=result[1]
}
if (result && result.length>0){
this.district=result[2]
}
}
}
}
})
</script>
</body>
</html>
2、监听属性
监听属性可以针对某个属性进行监听,只要这个属性的值发生改变了,那么就会执行相应的函数。搜索的时候会出现搜索中等字眼就是监听属性的结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<span>搜索:</span>
<input type="text" v-model:value='keyword'>
<p>搜索结果:</p>
<p>{{result}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
keyword:'',
result:''
},
watch:{
keyword(newvalue,oldvalue){
// console.log(newvalue)
// console.log(oldvalue)
this.result = '加载中'
// 定时器,每隔多少秒中再去执行下面操作,相当于python中的sleep
setTimeout(()=>{
this.result = newvalue+ '搜索中'
},1000)
// 匿名函数每隔1000毫秒1秒中再去执行
}
}
})
</script>
</body>
</html>
3、表单输入绑定
单选复选以及文本域和选项等标签的使用实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<!-- 复选框 文本域写东西不会在页面中显示 -->
<input type="text" v-model:value='message'>
<textarea name="" id="" cols="30" rows="10" v-model='message'>我是文本域</textarea>
<input type="checkbox" value=beiyue v-model:value='checkname'>
<span>beiyue</span>
<input type="checkbox" value=heihei v-model:value='checkname'>
<span>heihei</span>
<input type="checkbox" value=haha v-model:value='checkname'>
<span>hhhh</span>
<br>
{{message}}
<br>
{{checkname}}
<br>
<!-- 单选框要将name属性写成一样的或者通过v-model进行双向绑定 -->
<input type="radio" value='男' name=y>
<span>男</span>
<input type="radio" value='女' name=y>
<span>女</span>
<br>
<select name="" id="" v-model='selected'>
<option value="" disabled>请选择</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
<p>{{selected}}</p>
<!-- {{selected}}显示的是value属性,展示的是选项属性 -->
</div>
<script>
new Vue({
el:'#app',
data:{
message:'',
checkname:[],
selected:''
}
})
</script>
</body>
</html>
4、修饰符
①.lazy 在默认情况下,v-model在每次input事件触发后将输入框的值与数据进行同步 ,添加lazy修饰符,从而转变为使用change事件进行同步(当光标移出选择框时才触发双向绑定的事件)
<input type="text" v-model:value.lazy="message">
<input v-model.lazy="message" >
new Vue({
el: '#app',
data: {
message: ''
}
})
②.number<input v-model.number="age" type="number">
此时只能输入数字或者e科学计数法,要将绑定的age设为数字比如0.即使在type="number"时,HTML输入元素的值也总会返回字符串。只有.number之后才会返回数字
③.trim如果要自动过滤用户输入的首尾空白字符,中间空格去不了 v-model.trim='hh'
可以同时添加多个修饰符一起用
5、自定义组件
定义:类似于python当中的封装,将一个可能多次用到的代码写成一个组件,提高代码的复用性,避免一直拷贝
5.1全局组件
定义在vue外部的组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<button-counter></button-counter>
<!-- 组件之间相互独立互不影响 -->
<button-counter></button-counter>
<Hello></Hello>
</div>
<script>
// 组件定义在vue的外面,第一个参数为组件的名字,组件不能定义在vue的后面,不然会报错,另外要注意单一根元素
Vue.component("button-counter",{
template:`
<div>
<button >{{count}}</button>
<button @click="count+=1">+</button>
<button @click="count-=1">-</button>
<button @click="add">减法</button>
<Hello></Hello>
</div>`,
data:function(){
return{
count:0
}},
methods:{
add(){
this.count-=1
}
}
})
// 组件命名的时候如果用的驼峰使用的时候要改为小写并且使用-连接,不然组件不认识,首字母大写没事,组件可以嵌套使用,嵌套的时候直接用组件名
Vue.component('Hello',{
template:'<p>{{msg}}</p>',
data:function(){
return{
msg:'hello beiyue'
}
}
})
new Vue({el:'#app',data:{},methods:{}})
</script>
</body>
</html>
5.2局部组件
定义在vue内部的组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<hello-world></hello-world>
<hello></hello>
</div>
<script>
let HelloWorld = {
data(){
return {
msg:'hello beiyue'
}
},
template:'<div>{{msg}}</div>'
}
let Hello = {
data(){
return {
msg:'hello'
}
},
template:'<div>{{msg}}</div>'
}
new Vue({el:'#app',
data:{},
components:{
'hello-world':HelloWorld,
'hello':Hello
}})
</script>
</body>
</html>
组件的要点总结
①data是一个函数,不是vue中的对象
②组件的模板内容必须是单一根元素
③组件的模板是模板字符串可以多行写入标签即在``中写
④组件的命名方式一般规范的有两种,短横线(都可以直接使用),驼峰(可直接在组件中使用,不能直接在模板中使用),采用普通命名方式也可以