Vue入门2-CSDN博客

本文链接：https://blog.csdn.net/m0_55297736/article/details/142560456

Vue入门2

今天我们分4个部分来讲解Vue的使用

1.计算属性

2.用ref获取dom

3.侦听器的普通写法

4.对象格式的侦听器

注意:
在我们写代码的时候, 还是要引入vue.js文件的, 不然程序不能使用Vue框架, 这个很重要, 千万不能忘记。
vue.js文件就是第一篇Vue文章里面写到的vue.js文件, 如何下载也在第一篇博客里面写到, 如果你还没有vue.js文件, 那么你需要把它下载下来, 用cmd命令行下载。

一、计算属性

computed, 计算属性
computed应写到与data同级的地方, 写在data后面。

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 可以将data数据源里面的数据 通过内容渲染指令 显示到屏幕上 -->
			<!-- 计算属性 也可以通过{
   
   {}}渲染到屏幕上 -->
			这个是目前message的值:{
  
  {message}}
			<br />
			<!-- 响应式数据 -->
			这个是计算属性算出来的结果(响应式效果):{
  
  {a}}
			<button @click="message++">点击按钮让message加1</button>
		</div>
		<script src="vue.js"></script>
		<script>
			new Vue({
     
     
				el: "#app",
				// 数据源
				data: {
     
     
					message: 10
				},
				// 怎么写计算属性? computed 叫做计算属性 单词千万不能错
				computed: {
     
     
					a(){
     
     
						// 返回计算结果
						return this.message + 20;
					}
					// c(){
     
     
					// 	return 1 + 100;
					// }
				},
				
				// methods: {
     
     
				// 	// 只有在计算属性里面 才能通过return返回出来， methods不行
				// }
			});
		</script>
	</body>
</html>

这个代码, 我们使用到了computed, 就是计算属性, 那它到底有什么作用, 我们看一下结果。

结果:

当我们点击了5下按钮之后, 会发现, 上面的值和下面的值, 都增加了5。这个是怎么回事呢?

这是因为computed属性有响应式的效果, 当点击按钮将值加1的时候, 上面的值会加1, 下面computed里面的值也会自动增加。

只有在计算属性里面才能通过return返回出来， methods不行!

ref属性获取dom

获取到这个div dom元素, 通过ref属性来获取这个div
我们先定义一个红色背景色的框, 通过点击按钮来改变框的背景色为蓝色。

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.div{
     
     
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 第一步 获取到这个div dom元素 -->
			<!-- 通过ref属性来获取这个div -->
			<div class="div" ref="domdiv">我是被操作的div</div>
			<!-- 改变div里面的背景颜色 -->
			<button @click="getDom()">