01.姓名案例-插值语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>姓名案例-插值语法</title>
<!-- 创建新的页面,记得引入。 -->
<script type='text/javascript' src="../JS/vue.js"></script>
</head>
<body>
<div id="root">
<!-- 双向数据绑定使用v-model,可省略value -->
姓:<input type="text" v-model:value="firstName"><br><br>
名:<input type="text" v-model="lastName"><br><br>
<!-- 直接这么写的话,在变化姓名的时候,代码不美观,比如我们想保留三位,翻转名字,大写等等。所以,
下一节使用methods优化 -->
姓名:<span>{{firstName}}-{{lastName}}</span>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el: '#root',
data: {
firstName: 'Vue',
lastName: '学习'
}
})
</script>
</body>
</html>
02.姓名案例-methods语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>姓名案例-methods值语法</title>
<!-- 创建新的页面,记得引入。 -->
<script type='text/javascript' src="../JS/vue.js"></script>
</head>
<body>
<div id="root">
<!-- 双向数据绑定使用v-model,可省略value -->
姓:<input type="text" v-model:value="firstName"><br><br>
名:<input type="text" v-model="lastName"><br><br>
<!-- 因为是调用函数,所以需要加() -->
<!-- 每次执行的时候,代码都会看一下函数是否发生了改变,保证里面的内容是最新的。 -->
姓名:<span>{{fullName()}}</span>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el: '#root',
data: {
firstName: 'Vue',
lastName: '学习'
},
methods: {
fullName() {
// 此时的this指向的是vm
// console.log(this);
// 为了代码的美观,我们对姓名的格式修改可以在此完成。
return this.firstName + '-' + this.lastName
}
}
})
</script>
</body>
</html>
03.姓名案例-计算属性语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>姓名案例-methods值语法</title>
<!-- 创建新的页面,记得引入。 -->
<script type='text/javascript' src="../JS/vue.js"></script>
</head>
<body>
<div id="root">
<!-- 双向数据绑定使用v-model,可省略value -->
姓:<input type="text" v-model:value="firstName"><br><br>
名:<input type="text" v-model="lastName"><br><br>
姓名:<span>{{fullName}}</span>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
firstName: 'Vue',
lastName: '学习'
},
computed: {
// 完整写法
// fullName: {
// // get什么作用?
// // 答:当有人读取get的时候,且返回值是fullName的值。
// // get什么时候被调用?
// // 答:1.初次被调用
// // 2.所依赖的参数数据发生变化时。
// // 上面两点是与众不同之处,别的方法在多次调用的时候,系统会有缓存,在次调用会直接拿缓存的数据,而computed在发生变化的时候也会调用。
// // 优势:与methods相比,内部有缓存机智(复用),效率更高,调试方便
// get() {
// // 同样,不能写箭头函数
// return this.firstName + '-' + this.lastName
// },
// // 在你确定name不会发生改变的时候,可不写set
// set() {
// // 因为姓 名中间有个-,所有我们要提取。
// const arr = value.split('-')
// // 我们利用set修改之后,让名字和修改的内容相等。
// // firstName 和 lastName = value的值,会到前台显示,而fullname捕捉到了name发生变化,因此名字组合也会跟着变化
// firstName = value[0]
// lastName = value[1]
// }
// }
// 简写(当我们确定只读取不修改才能简写)
// fullName: function () {
// return this.firstName + '-' + this.lastName
// }
// 再次简写
fullName() {
return this.firstName + '-' + this.lastName
}
}
})
</script>
</body>
</html>