Vue基础系列数据绑定以及姓名案例的三种写法
Posted 勇敢*牛牛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue基础系列数据绑定以及姓名案例的三种写法相关的知识，希望对你有一定的参考价值。
和阿牛一起冲Vue
🌕写在前面
🍊博客主页 ：勇敢link牛牛
🎉欢迎关注：🔎点赞👍收藏⭐️留言📝
🌟本文由 勇敢link牛牛 原创，CSDN首发！
📆首发时间：🌹2022年3月3日🌹
🆕最新更新时间：🎄2022年3月3日🎄
✉️愿你熬过万丈孤独，藏下星辰大海！
📠参考书籍：📚《Vue2》
🙏作者水平很有限，如果发现错误，请留言轰炸哦！万分感谢感谢感谢！
文章目录
前言
青春，因为奋斗与奉献更美丽。
姓名案例-插值语法
直接调用属性值数据
<!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>
</head>
<body>
<div id="root">
姓:<input type="text" v-model:value="firstName"><br />
名:<input type="text" v-model="lastName"><br />
姓名: <span>firstName.slice(0,3)-lastName</span>
</div>
</body>
<script src='vue.js'></script>
<script>
Vue.config.productionTip = false;
new Vue(
el: '#root',
data:
name: 'jack',
message:
url: 'https://blog.csdn.net/m0_46672781?spm=1000.2115.3001.5343',
name: '勇敢牛牛'
,
firstName: '牛',
lastName: '哥',
);
</script>
</html>
姓名案例_menthods方法
将属性值加以函数话调用
<!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>
</head>
<body>
<div id="root">
姓:<input type="text" v-model:value="firstName"><br />
名:<input type="text" v-model="lastName"><br />
姓名: <span>fullName()</span>
</div>
</body>
<script src='vue.js'></script>
<script>
Vue.config.productionTip = false;
new Vue(
el: '#root',
data:
name: 'jack',
message:
url: 'https://blog.csdn.net/m0_46672781?spm=1000.2115.3001.5343',
name: '勇敢牛牛'
,
firstName: '牛',
lastName: '哥'
,
methods:
fullName()
return this.firstName + '-' + this.lastName;
);
</script>
</html>
姓名案例-计算属性
通过computed计算属性（缓存优化）
<!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>
</head>
<body>
<div id="root">
姓:<input type="text" v-model:value="firstName"><br />
名:<input type="text" v-model="lastName"><br />
姓名: <span>fullName</span>
</div>
</body>
<script src='vue.js'></script>
<script>
Vue.config.productionTip = false;
new Vue(
el: '#root',
data:
name: 'jack',
message:
url: 'https://blog.csdn.net/m0_46672781?spm=1000.2115.3001.5343',
name: '勇敢牛牛'
,
firstName: '牛',
lastName: '哥'
,
computed:
fullName:
// 当有人读取fullname了，get就会被调用，且返回值作为fullname的值
// get : 初次使用+所依赖的数据发生变换
get()
return this.firstName + '-' + this.lastName;
,
// 当fullname修改时
set(value)
console.log('全名被修改');
const arr = value.split('-');
this.firstName = arr[0];
this.lastName = arr[1];
);
</script>
</html>
简写方式：
<!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>
</head>
<body>
<div id="root">
姓:<input type="text" v-model:value="firstName"><br />
名:<input type="text" v-model="lastName"><br />
姓名: <span>fullName</span>
</div>
</body>
<script src='vue.js'></script>
<script>
Vue.config.productionTip = false;
new Vue(
el: '#root',
data:
name: 'jack',
message:
url: 'https://blog.csdn.net/m0_46672781?spm=1000.2115.3001.5343',
name: '勇敢牛牛'
,
firstName: '牛',
lastName: '哥'
,
computed:
fullName: function ()
return this.firstName + '-' + this.lastName;
);
</script>
</html>
总结
计算属性：
1.定义：要用的属性不存在，要通过已有属性计算得来。
2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
3.get函数什么时候执行？
- 初次读取时会执行一次。
- 当依赖的数据发生改变时会被再次调用。
4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
备注：
1.计算属性最终会出现在vm上，直接读取使用即可。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改
以上是关于Vue基础系列数据绑定以及姓名案例的三种写法的主要内容，如果未能解决你的问题，请参考以下文章