</div>
编写一个方法,返回值为两者拼在一起的字符串
<div id="root">
姓:<input type="text" v-model="fistName"><br><br>
名:<input type="text" v-model="lastName"><br><br>
<!-- 只要数据发生改变,这个方法就会再被调用一次 -->
姓名:<span>{{fullName()}}</span>
</div>
new Vue({
el:'#root',
data:{
fistName:'张',
lastName:'三'
},
methods: {
fullName(){
return this.fistName + this.lastName;
}
},
})
计算属性就是vue中的computed,这里面存放的是计算属性
而data中的是属性,两者不一样
<div id="root">
姓:<input type="text" v-model="fistName"><br><br>
名:<input type="text" v-model="lastName"><br><br>
姓名:<span>{{fullName}}</span>
</div>
const vm = new Vue({
el:'#root',
//属性
data:{
fistName:'张',
lastName:'三'
},
// 计算属性
computed:{
fullName:{
//当有人读取fullName时,get就会被调用,返回值为fullName的值
//get调用时机
//1、初次读取fullName
//2、所依赖的数据变化时
get(){
//这里的this是指vm
return this.fistName + this.lastName;
},
//当fullName被调用时候调用
set(value){
const arr = value.split('-')
this.fistName = arr[0]
this.lastName = arr[1]
}
}
}
})
计算属性和方法的编写方式有点区别
- {{}}中方法是写一个方法的,即带括号
- 但是计算属性只需要写名字即可,不用带花括号
计算属性中要编写两个方法,一个是get方法,另一个是set方法
-
当有人读取fullname这个计算属性,get方法就会被调用,返回值是fullname的值
-
当有人修改fullname这个计算属性,set方法就会被调用
当明确只有get方法,不需要set方法的时候,计算属性可以简写成如下:
fullName(){
return this.fistName + this.lastName;
}
get函数什么时候执行:
- 初次读取时会执行一次
- 当依赖的数据发生变化时会被调用一次
3.1、计算属性的优势
相对于方法来说,计算属性内部有缓存机制(复用),效率更好,调试更方便
简单来说,倘若计算属性不变,计算属性的数据就会存进缓存中,当页面上的其他数据需要读取这个计算属性的话,不再需要从vm获取,直接从缓存里面获取
=========================================================================
监视属性可以监视某个属性的变化,并且可以获取变化前和变化后的数值
通过关键词watch实现
<!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>Document</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changgeWeather">切换天气</button>
</div>
</body>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: "#root",
data: {
isHot: true,
},
computed: {
info() {
return this.isHot ? "炎热" : "凉爽";
},
},
methods: {
changgeWeather() {
this.isHot = !this.isHot;
},
},
// 监视
//适用于一开始很明确地知道要监视谁
watch: {
isHot: {
//初始化时让handler调用一下
immediate: true,
//什么时候调用?当isHost发生改变时
handler(newValue, oldValue) {
console.log("isHost被调用", newValue, oldValue);
}
},
// }
});
</script>
</html>
例如如上案例,当isHost被修改的时候,监视属性中的isHost中的handler就会被调用
而 immediate: true 的作用是再初始化的时候调用一下这个监视属性
注意的是监视属性必须存在,才可以进行监视
除了以上邪恶写法,还可以通过vm.$watch监视
vm.$watch("isHost", {
//初始化时让handler调用一下
immediate: true,
#### css
1,盒模型
2,如何实现一个最大的正方形
3,一行水平居中,多行居左
4,水平垂直居中
5,两栏布局,左边固定,右边自适应,左右不重叠
6,如何实现左右等高布局
7,画三角形
8,link @import导入css
9,BFC理解
![](https://img-blog.csdnimg.cn/img_convert/71b05b5bc66f98212257879cc09ca199.webp?x-oss-process=image/format,png)
#### js
1,判断 js 类型的方式
2,ES5 和 ES6 分别几种方式声明变量
3,闭包的概念?优缺点?
4,浅拷贝和深拷贝
5,数组去重的方法
6,DOM 事件有哪些阶段?谈谈对事件代理的理解
7,js 执行机制、事件循环
8,介绍下 promise.all
9,async 和 await,
10,ES6 的 class 和构造函数的区别
11,transform、translate、transition 分别是什么属性?CSS 中常用的实现动画方式,
12,介绍一下rAF(requestAnimationFrame)
13,javascript 的垃圾回收机制讲一下,
14,对前端性能优化有什么了解?一般都通过那几个方面去优化的?
![](https://img-blog.csdnimg.cn/img_convert/e3696c26df9a454a53d11fd2f31e2f7a.webp?x-oss-process=image/format,png)
g-kejLks42-1714165055938)]
#### js
1,判断 js 类型的方式
2,ES5 和 ES6 分别几种方式声明变量
3,闭包的概念?优缺点?
4,浅拷贝和深拷贝
5,数组去重的方法
6,DOM 事件有哪些阶段?谈谈对事件代理的理解
7,js 执行机制、事件循环
8,介绍下 promise.all
9,async 和 await,
10,ES6 的 class 和构造函数的区别
11,transform、translate、transition 分别是什么属性?CSS 中常用的实现动画方式,
12,介绍一下rAF(requestAnimationFrame)
13,javascript 的垃圾回收机制讲一下,
14,对前端性能优化有什么了解?一般都通过那几个方面去优化的?
[外链图片转存中...(img-cD5DlpdP-1714165055939)]
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**