vue 重学笔记(1) data,computed,watch,method基础属性

前端一号站

已于 2022-04-01 16:23:43 修改

阅读量512

点赞数 1

分类专栏： vue快速入门与提高文章标签： vue vue基础 vue实例 vue入门与提高 vue属性

于 2020-10-12 15:47:18 首次发布

本文链接：https://blog.csdn.net/weixin_39553363/article/details/109020877

版权

vue快速入门与提高专栏收录该内容

15 篇文章 1 订阅

订阅专栏

在学习vue之前，我们安装2个开发工具和1个插件，

1.HBuilder X 编辑器
2.chrome浏览器
3.vue.js devtools

vue.js devtools是chrome浏览器里一个插件，需要我们在chrome网上应用店里面安装。

安装完成后，打开chrome浏览器的调试工具就会找到它。安装此插件会在我们开发vue项目的时候有比较好的开发提示和修复项目的debug，我们将会在往后的学习中更加详细的演示。
在这里插入图片描述
接下来，让我们深入认识认识vue

1.如何在页面引入vue.js

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

我们可以在我们的页面中加入上面的脚本代码，那么，就可以帮助我们引入vue.js了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		//在此处添加
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
	  
	</body>
	
</html>

2.如何获取到vue实例

2.1在使用vue之前，我们需要给整个页面最外层的那个盒子的id属性为“app”属性值。

	<body>
	//在此处增加
	    <div id="app">			
		</div>

	</body>

2.2 获取Vue实例
接下来，我们需要实例化Vue的对象。

	<body>
	    <div id="app">
			
		</div>
		
		//此处添加
	   <script type="text/javascript">
	      let vm=new Vue({
			  el:'#app'
		  });  
	   </script>
	</body>

我们使用vm变量来存储Vue的实例化对象，右边通过new来给Vue创建一个新的对象，Vue()构造函数中传入一个对象参数，el属性是帮助我们确定页面中某个元素被转换为Vue的实例。此处，我们把页面中id属性为app的div元素转换成Vue实例了。我们可以通过页面调试可以观察此时的效果。
在这里插入图片描述

从效果图中可以看到，vm作为Vue的实例化对象，这个对象会有很多属性跟方法，这些属性我们后期会详细讲解，对于获取属性跟方法，我们可以通过’.'来获取。

举例子：获取对象的子元素
> vm.$children

3.如何实现数据双向绑定

在vue框架中，我们的数据存放在哪里？如何把vue框架里面的数据显示在页面上，这些都是需要我们解决的。

3.1我们可以把数据放在vue 实例vm对象的$data属性中。
example

	   <script type="text/javascript">
	      let vm=new Vue({
			  el:'#app',
			  // 此处增加
			  data:{
				  msg:'我要努力学习vue'
			  }
		  });
		  
	   </script>

3.2 通过插值{{}}获取变量值
example

    <div id="app">
			<!-- 此处增加 -->
			{{msg}}
		</div>

在这里插入图片描述
我们可以把两组花括号{{}}叫做插值。插值不仅仅可以存放变量，还可以对里面的变量增加编辑后再显示。

小结：插值里面可以放什么

1.:变量
{{msg}}
2.表达式
{{msg+1}} {{msg==2? msg=‘true’ : msg:‘false’}}
3.函数
{{msg.split()}} {{ (function(){ return ‘hello world’})() }}

3.3如何修改变量值
vue是支持数据的双向绑定，如何理解数据的双向绑定。

1.我们可以把数据放在data属性中
2.我们可以通过vm实例改变data中的数据。

vm.$data.msg="我不喜欢vue"

在这里插入图片描述
注意：vm. $d a t a . m s g 相当于 v m . m s g ，$ data是可以省略不写的。

4.vue 计算属性

很多时候，我们都需要对原始数据进行处理后再显示在页面上，比如，在价格的后面加上单位。

这时，我们可以在插值内加入单位即可

	{{msg+'元'}}

但是，对于比较复杂的计算我们不建议把他们存放在插值内，如函数。我们一般会使用vue实例中的计算属性computed。

	      let vm=new Vue({
			  el:'#app',
		
			  data:{
				  msg:'我要努力学习vue'
			  },
			  //此处增加
			  computed:{
				
			  }
		  });

例子：
在这里插入图片描述
代码解析：计算属性是一个对象，对象里面放置很多中方法，我们在这里定义一个commgs函数来处理msg数据。我们可以通过vm.msg获取到实例中的msg数据，vm在这里我们可以使用this代替。注意，更改msg数据后一定要记得返回，否则页面上将渲染失败。还有一点就是页面上的插值内直接写上函数名即可。

扩展：如何在不破坏原有数据下通过计算属性更改数据。
解决方法：使用一个局部变量复制原有数据值。
注意：数据与对象不适用，后面会详说

例子：

 commsg:function(){
		let msg=this.msg+='勤做练习';
		return this.msg
				  }

问题：computed计算属性什么时候触发
当数据改变的时候，会动态刷新。

5.vue监听属性 watch

当一个值发生变化的时候，我们想改变另一个数据的值或者想做出一些什么反应，比如弹出对话框。这时，我们就可以使用到watch属性了。

5.1 如何使用watch属性
例子：
在这里插入图片描述

注意：
watch属性可以监听一个值的变化，但是不能监听数据或者对象里面具体的属性值的变化。后面详解。

深度监听

watch: {
               //tel 是data() 里面的数据tel，newVal是tel变化后的值，oldVal是tel变化前的值
					    isRise: {
					        handler(newVal, oldVal) {
					            console.log(newVal,oldVal)
					            if(newVal<0){
					                      this.isRise = false
					            }else{
					                      this.isRise = true
					            }
					        },
					        // deep属性对对象进行深度监听
					        deep: true,
					        // 这样使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值        发生改变才会执行。
					        // 如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。比如当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true。
					        immediate: true
					    }
					},

6.vue方法属性method

计算属性以及监听属性的触发条件是值发生变化的时候会重新触发，而接下来我们要认识是由用户主动触发的方法属性，method。
在这里插入图片描述

注意：methods 是Vue 实例的方法属性。可以直接通过 VM 实例访问methods里的方法，也可以在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

前端一号站

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue 重学笔记(1) data,computed,watch,method基础属性

在学习vue之前，我们安装2个开发工具和1个插件，1.HBuilder X 编辑器2.chrome浏览器3.vue.js devtoolsvue.js devtools是chrome浏览器里一个插件，需要我们在chrome网上应用店里面安装。安装完成后，打开chrome浏览器的调试工具就会找到它。安装此插件会在我们开发vue项目的时候有比较好的开发提示和修复项目的debug，我们将会在往后的学习中更加详细的演示。接下来，让我们深入认识认识vue1.如何在页面引入vue.js&lt
复制链接

扫一扫