<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>姓名案例实现</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
姓:<input type="text" v-model:value="firstName"> <br/><br>
名:<input type="text" v-model:value="lastName"> <br/><br>
姓名:<span>{{firstName.slice(0,3)+"_"+lastName}}</span>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
new Vue({
el:"#root",
data:{
firstName:"张",
lastName:"三"
}
})
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>姓名案例实现_methods实现</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
姓:<input type="text" v-model:value="firstName"> <br/><br>
名:<input type="text" v-model:value="lastName"> <br/><br>
姓名:<span>{{fullName()}}</span><br/><br>
姓名:<span>{{fullName()}}</span><br/><br>
姓名:<span>{{fullName()}}</span><br/><br>
姓名:<span>{{fullName()}}</span><br/><br>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
new Vue({
el:"#root",
data:{
firstName:"",
lastName:""
},
methods:{
fullName(){
console.log('调用fullName()')
return this.firstName +"-"+this.lastName
}
}
})
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>姓名案例实现_methods实现</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 计算属性:1.定义:要用的属性不存在,要通过已有的属性计算得来
2.原理:底层借助了Object.defineproperty方法提供的getter和setter
3.get函数什么时候会执行
4.优势:与methods实现对比:内部缓存机制(复用),效率更高,调试方便
5.备注:计算属性最终出现在vm上,直接读取使用即可;如果计算属性要被修改,
那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变。
-->
<!-- 准备好一个容器 -->
<div id="root">
姓:<input type="text" v-model:value="firstName"> <br/><br>
名:<input type="text" v-model:value="lastName"> <br/><br>
姓名:<span>{{fullName}}</span><br/><br>
姓名:<span>{{fullName}}</span><br/><br>
姓名:<span>{{fullName}}</span><br/><br>
姓名:<span>{{fullName}}</span><br/><br>
<button @click="demo">点我</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
const vm = new Vue({
el:"#root",
data:{
firstName:"",
lastName:""
},
methods:{
demo(){
}
},
computed:{
fullName:{
//get有什么作用?当有人读取fullName时,get就会被调用,且返回值就作为fullName的值
//get什么时候调用?1.初次读取fullName时。2.所依赖的数据发生变化时。
get(){
//调用初次调用get读取fullName会形成缓存,后面每次读取fullName都只需要调用缓存中的数据,只有所依赖数据发生变化时才会重新调用get
console.log("get被调用了")
return this.firstName + '-'+this.lastName//此处的this是vm
},
//set什么时候调用?当fullname被修改的时候。
set(value){
console.log('set',value)
const arr = value.split('-')
this.firstName=arr[0]
this.lastName=arr[1]
}
}
}
})
//能用计算属性就不用methods,methods没有缓存,每次读取数据必须调用方法,计算属性配置了缓存,依赖数据不发生变化的话直接从缓存读取数据。
//箭头函数:get:()=>{ **** } 不要用箭头函数,会导致vm变成windows
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>姓名案例实现计算属性的简写</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
姓:<input type="text" v-model:value="firstName"> <br/><br>
名:<input type="text" v-model:value="lastName"> <br/><br>
姓名:<span>{{fullName}}</span><br/><br>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el:"#root",
data:{
firstName:"",
lastName:""
},
computed:{
//完整写法:
//fullName:{
// get(){
// console.log("get被调用了")
// return this.firstName + '-'+this.lastName
// },
// set(value){
// console.log('set',value)
// const arr = value.split('-')
// this.firstName=arr[0]
// this.lastName=arr[1]
// }
//简写:
fullName:function(){
console.log('get被调用了')
return this.firstName+'-'+this.lastName
}
}
})
</script>
</html>