VUE的基础使用2

学习VUE已经有了一段时间，在工作中逐渐也从刚开始的只能摘抄代码到现在的逐步可以根据业务需要自己编写。以下，总结自己在这段时间的学习中学到的一些关于VUE的用法。

过滤器的使用

过滤器在实际中的应用场景，例如后端向前端返回的数据是以数字形式的状态码来显示的，但我需要在前端以文字形式呈现；或者后端返回的时间是具体到秒的，但前端只需要具体到日；从后端拿到money值需要在前面加上人民币符号￥$等等。
过滤器有局部和全局两种。

1.局部过滤器的使用

template: `
    <div>
       <input type="number" v-model='price'/>
       <h1>{{price | myCurrent}}</h1>
    </div>
`,
   filters:{
     //1.声明一个过滤器
     myCurrent:function(value) {
        return "￥" + value
     }
   }

这个过滤器的作用是将在输入框中输入的数字显示出来并在前面添加“￥”符号

2.全局过滤器

 //全局过滤器
 Vue.filter(myReverse, function(value){
   return value.split('').reverse().join('');
 });

 var App = {
   data() {
     return {
       msg:'hello filter'
     }
   },
   template: `
     <div>
       <input type="number" v-model='price'/>
       <h1>{{msg | myReverse}}</h1>
     </div>
   `,

这个过滤器作用在全局，可以被任意组件调用，它实现的结果是将msg中的内容进行
反转。

事件监听（watch）

<template>
  <div>
		<input type="text" v-model='msg'>
		<h3>{{msg}}</h3>
	</div>
</template>

<script>
export default {
	data() {
		return{
			msg: ''
		}
	},
	watch: {
		msg: function(newValue,oldValue) {
			if(newValue == 'break') {
				console.log('输入框中输入了break')
			}
		}
	}
}
</script>

这样一个案例 实现了对一个字符串内容的监听，当字符串出现符合监听要求的内容时输出提示信息，但这种监听方式只能监听简单类型，对于复杂类型属性无法监听，例如Object、数组，原因是因为监听本身是监听对象对应的内存空间地址，而数组类型数组本身对应了一个内存地址，数组中的对象又分别对应着不同的内存地址，简单的监听方式就无法实现监听，这时就需要使用深度监听。深度监听的用法如下：

//监听数组对象people
return{
	people: [{name:'张三'}]
}
watch: {
	people:{
		deep: true,
		handler: function(newValue,oldValue) {
			console.log(newValue.[0].name);
	}
}
/*这里再在template中设置一个按钮点击改变name的值，
控制台就能实时监听到属性值的改变并打印输出*/

值得一提的是，事件监听对于性能消耗非常大，所以在实际开发场景中应当谨慎使用
watch。

VUE组件封装

一、组件封装的基本步骤：
1、搭建基本的组件结构，建立组件之间的联系（子父组件、兄弟组件），考虑组件的基本逻辑；
2、准备组件之间的属性通信，定好props中的属性；
3、根据组件的逻辑，准备好其他组件需要调用的方法，对组件数据进行输出；
4、封装完毕，进行调用。
在父组件中使用:+属性的方式动态设置组件属性，导入子组件需要的数据，子组件使用props将父组件的数据接收。子组件在props中接收的数据可以在当前组件中直接使用"this.属性名"的方式使用，但只能使用不能修改，想要修改需要在当前属性中重新定义属性对其进行接收再修改。
二、修改父组件数据
使用$emit对父组件的数据进行修改：
子组件可以通过 $emit出发父组件的自定义方法，再传入自身设置的属性值改变方法执行的结果。

父组件

<template>
  <div>
    <h1>父组件数据：{{msg}}</h1>
    <v-child @updateInfo="updateInfo" :sendData="msg"></v-child>
  </div>
</template>
<script>
import childfrom './parent'
export default {
  name: 'parent',
  components: { "v-child":child},
  data () {
    return {
      msg: '北京'
    }
  },
  methods: {
    updateInfo (data) { // 点击子组件按钮时触发事件
      console.log(data)
      this.msg = data.city // 改变了父组件的值
    }
  }
}
</script>

子组件

<template>
 <div>
    <h3>父组件传给子组件的数据：{{sendData}}</h3>
    <br/><button @click='select()'>点击子组件</button>
  </div>
</template>

<script>
export default {
  name: 'child',
  props: ['sendData'], 
  methods: {
    select () {
      let data = {
        city: '杭州'
      }
      this.$emit('updateInfo', data)// select事件触发后，自动触发updateInfo事件
    }
  }
}
</script>

总的来说，在封装组件时，需要定义好调用处传入的数据，定义好自己暴露出去的用于调用的方法，梳理好组件内部的整体逻辑即可。