计算属性,ES6语法
文章目录
前言
Vue学习系列-01传送门
本章内容来源于vue官网,最新最全vue
如有侵权,务必告知!
提示：以下是本篇文章正文内容，下面案例可供参考
一、计算属性(重要)
1.计算属性的简单介绍
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：
{{ message.split('').reverse().join('') }}在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中的多处包含此翻转字符串时，就会更加难以处理。所以，对于任何复杂逻辑，你都应当使用计算属性。
计算属性一般是没有set方法,只读属性.以下均将以只读属性讲解
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="../js/vue.js"></script>
<div id="app">
<!-- 之前方式start-->
<h2>{{message1}} {{message2}}</h2>
<h2>{{message1+message2}}</h2>
<!-- 之前方式end-->
<!--调用方法start-->
<h2>{{getMessage()}}</h2>
<!--调用方法end-->
<!-- 计算属性模式start-->
<h2>{{Message}}</h2>
<!-- 计算属性模式end-->
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message1: 'Hello ',
message2: 'World!',
},
methods: {
getMessage() {
return this.message1 + ' ' +this.message2;
}
},
computed: {
Message(){
return this.message1 + ' ' +this.message2
}
}
})
</script>
</body>
</html>
2.计算属性的复杂运用
案例:计算菜品的总价格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="../js/vue.js"></script>
<div id="app">
<h2>总价格: {{TotalPrice}}</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
diningRoom: [
{id: '01', name: '红烧鲤鱼', price: 39},
{id: '02', name: '炒黄瓜', price: 19},
{id: '03', name: '拍黄瓜', price: 9},
{id: '04', name: '油炸黄瓜', price: 9},
]
},
computed: {
TotalPrice(){
let result=0;
for (let i in this.diningRoom){
result += this.diningRoom[i].price;
}
return result;
}
}
})
</script>
</body>
</html>
3.计算属性computed和方法methods的比较
1.计算属性在调用时,不需要加小括号.
2.计算属性computed是有缓存的,而methods没有.这就意味着计算属性在使用时只用被调用一次.这可以大大提高计算机运行效率.
代码测试如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="../js/vue.js"></script>
<div id="app">
<!-- 简单拼接 语法过于繁琐-->
<h2>{{message1+' '+message2}}</h2>
<!-- 通过定义methods -->
<h2>{{getMessage()}}</h2>
<h2>{{getMessage()}}</h2>
<h2>{{getMessage()}}</h2>
<h2>{{getMessage()}}</h2>
<!--通过定义computed-->
<h2>{{message}}</h2>
<h2>{{message}}</h2>
<h2>{{message}}</h2>
<h2>{{message}}</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message1: 'Hello World!',
message2: '呆萌小新@渊洁',
},
methods: {
getMessage(){
console.log('getMessage');
return this.message1 + ' ' + this.message2;
}
},
computed: {
message(){
console.log('Message');
return this.message1 + ' ' + this.message2;
}
}
})
</script>
</body>
</html>
二、ES6语法
1.块级作用域-let/var
事实上var的设计可以看成JavaScript语言设计上的错误.但是这种错误多半不能修复和移除,以为需要向后兼容.
大概十年前,Brendan Eich就决定修复这个问题,于是他添加了一个新的关键字: let. 我们可以将let看成更完美的var 块级作用域
块级作用域
JS中使用var来声明一个变量时,变量的作用域主要是和函数的定义有关.
针对于其他块定义来说是没有作用域的，比如if/for等，这在我们开发中往往会引起一些问题。
2.const的使用和注意点
const关键字
在很多语言中已经存在,比如C/C++中,主要的作用是将某个变量修饰为常量.
在JavaScript中也是如此,使用const修饰的标识符为常量,不可以再次赋值. ■什么时候使用const呢?
当我们修饰的标识符不会被再次赋值时,就可以使用const来保证数据的安全性.
建议:在ES6开发中,优先使用const,只有需要改变某一个标识符的时候才使用let.
<script>
/**
* 1.注意一: 一旦给const修饰的标识符被赋值后,不能修改
* const name = 'why';
* name = 'abc';
*
* 2.注意二: 在使用const定义标识符,必须进行赋值
* const name;
*
* 3.注意三: 常量的含义是指向的对象不能修改,但是可以改变对象内部的属性
* const obj = {
* name: 'why',
* age: 18,
* height: 1.88,
* }
* obj.name = 'kobe';
* obj.age = 40;
* obj.height = 1.87
*/
</script>
对象字面量的增强写法
事件监听v-on/@click
1.基本介绍
当通过methods中定义方法，以供@click调用时，需要注意参数问题︰
情况一:如果该方法不需要额外参数，那么方法后的0可以不添加。但是注意:如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去
情况二︰如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。
2. v-on的修饰符
起泡反应
vue 修饰符帮助我们提供了一些方法来处理事件：
@xxxx.stop: 阻止事件冒泡
@xxxx.prevent: 阻止默认事件.
@xxxx.navite: 监听组件根元素的原生事件
@xxxx .once: 只会触发一次
3.v-if v-else-if v-else
这三个指令与JavaScript的条件语句if、else、else if类似。
Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件
(1)
(2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="../js/vue.js"></script>
<div id="app">
<p v-if="score>90">优秀</p>
<p v-else-if="score>70">良好</p>
<p v-else-if="score>60">及格</p>
<p v-else>不及格</p>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
score: 98,
},
})
</script>
</body>
</html>
v-if的原理: v-if后面的条件为false时，对应的元素以及其子元素不会渲染。
也就是根本没有不会有对应的标签出现在DOM中。
last.总结
提示：这里对文章进行总结：
以上就是02要讲的内容，接下来03将以实例展开。
