vue的基本属性了解

Vue中的各个属性

el（挂载点）

el提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标

data（数据）

Vue 实例的数据对象。

methods（方法）

methods中写页面中所有想要写的方法。

watch（侦听器，监听）

watch监听数据的变化，分为浅监听和深监听。

1浅监听

它可以监听字符串、普通数组的变化

watch:{
	val(newVal,oldVal){
		//实时监控数据的变化
	}
}

2深监听

可以监听到对象的变化，还可以复杂数组
watch:{
	对象：{
		deep:true,//深度
		handler(新值newVal){
			//可以实时监听到新值newVal的变化
		}
	}
}

computed（计算属性）

作者希望模板内容{{}}简单易于维护，但是有时候我们会书写大量的逻辑，这样作业就开发了computed、

用法

 <!-- 字符串翻转 -->
{{val.split('').reverse().join('')}}
computed: {//计算属性 大量的逻辑操作可以放在计算属性中
                reverse(){
                    return this.val.split('').reverse().join('')
                },
           }

计算属性和methods的区别。

​ 相同点：都是通过return返回数据且都是相关依赖发生变化，值也会跟着变化
​ 不同点： 计算属性是有缓存作用的，如果依赖没有发生变化，它只执行一次，而方法是调用几次执行几次。计算属性极大的提高渲染速率
​ 使用场景：有交互事件的时候，我们可以选择methods.如果有大量的数据交互，而且调用多遍我们可以选取计算属性computed

计算属性和watch的区别

共同点：都是以Vue的依赖追踪机制为基础的，都是希望在依赖数据发生改变的时候，被依赖的数据根据预先定义好的函数，发生“自动”的变化。
不同点：watch擅长处理的场景：一个数据影响多个数据；computed擅长处理的场景：一个数据受多个数据影响。虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器，当需要在数据变化时执行异步或开销较大的操作时，通过侦听器最有用。
总结：
当在模板内使用了复杂逻辑的表达式时，应当使用计算属性。
虽然方法也能实现同样的效果，但是因为计算属性可以基于它们的依赖进行缓存，所以选择计算属性会比方法更优。
当需要在数据变化时执行异步或开销较大的操作时，可以使用 watch。

filters（过滤器）

过滤器其实就是一个工具函数，通过执行这个函数，实现数据格式化。

局部过滤器

视图：
{{数据 | 过滤器名称}}

逻辑代码
filters:{
	toPrice(n,m){
		//第一个参数是你要过滤的内容
		//第二个参数是你调用过滤器的传参
		return 结果就是文本格式化的结果
	}
}

全局过滤器

视图
{{msg|toStr(4,6)}}

逻辑
//全局过滤器 Vue.filter() 它有两个参数，第一个参数是你要过滤的内容，第二个参数是你的逻辑函数，这个函数有两个参数，①要过滤的内容，②要过滤内容的传参
        Vue.filter('toStr',(n,m)=>{
            return n.substring(m)
        })

项目中主要使用的过滤器都是全局过滤器，一次声明，多次调用。

components（组件）特别重要

组件就是复用一个vue的实例，它含有vue实例上面所有的属性和方法，除了el元素。我们可以利用template去渲染视图
实际我们只是把共通的代码或者片段提取出来，哪里需要哪里引入

组件名称当作一个标签名去渲染

组件
封装的是共同的视图

模块
封装共同模块，逻辑js部分

组件的特点—>可复用！！！

局部的创建

视图
<组件名称></组件名称>

逻辑
components:{
	组件名称：{
		template:'
	}
}

全局创建组件

component这个方法中有两个参数，第一个参数是组件名称，要按照规则取名。第二个参数是组件的属性和方法
Vue.component('组件名称',{
//组件的内容
})

组件的命名规则

1、不能用已经存在的标签名称作为组件名称，大写也不可以。

2、如果组件名称用的是驼峰命名法，那么在渲染的时候加-，比如

template的使用规则、

1、组件中的template这个属性，有且只能有一个根元素
2、我们可以在视图下面提出一个template标签，所有的组件内容，放置在标签下的唯一根元素中

在组件中data为什么必须是一个函数的形式》》》重要

所有的组件都在同一个html中，类似于css样式，会互相干扰。如果每一个组件的数据它是对象的形式，相当于所有的组件共用一个数据源，那么如果a组件改变了其中一个数据，b组件会受到干扰。因为每一个组件都应该是独立的，所以我们用函数的形式去创建初始化数据，函数是独立的
data是一个对象，它们之间的地址空间是互通，如果是函数，它是一个私密的空间。函数是有自己的函数作用域

每一个组件都是一个独立的个体。

组件的重要性以后便知道！！！