杂记

Deamy8023

于 2019-01-04 16:52:03 发布

阅读量112

点赞数

本文链接：https://blog.youkuaiyun.com/amily8023/article/details/85704945

版权

本文深入探讨Vue.js的高级用法，包括动态样式绑定、watch与computed的合理运用、props类型定义与默认值设置、全局状态管理、组件间通信的最佳策略、插槽的灵活应用、过渡动画封装、过滤器的高效使用、HTTP请求处理，以及低耦合、高内聚的设计原则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.碰到一个坑，在动态绑定样式的是时候，接收时可以赋值数组，数组中可以接受对象，但对象中不能接受变量，数组中可以

2.watch能试试监听数据变化,但是能使用computed就不要使用watch，具体请看vue的官方文档

3.props类型

props也可以使用对象类型，可以在子组件中声明缩需要的参数的类型

props:{
		type:String,
		name:String,
		age:Number
	},

如果父组件没有传递参数的时候，子组件自己设定默认值

	props:{
		type:String,
		name:String,
		age:Number,
		nick:{
			type:String,
			default:"这是个默认值"
		}
	},

props:{
		type:String,
		name:String,
		age:Number,
		nick:{
			type:String,
			default:"这是个默认值"
		},
		parent:{
			type:String,
			required:true //这是个必选项，若父组件不传递事件则会报错
		},
		// 默认值如果是数组或者是对象,则必须返回一个function
		friends:{
			type:Array,
			default:function(){
				
				return ["f1","f2"]
				
			}
		}
	},

在main.js中，创建根实例，在任何组件中都可以访问的到

new Vue({
  el: '#app',
	data:
	{
		foo:"helloFoo"
	},
  router,
  store,
  components: { App },
  template: '<App/>'
})

<template>
	<div>
		red
		{{getFoo}}
	</div>
</template>

<script>
	export default {
		name: "red",
		data(){
			return{
			}
		},
		methods: {
		},
		computed:{
			getFoo(){
				return this.$root.foo
			}
		}
	}
</script>

<style scoped>
	
</style>

4.低耦合，高内聚：

组件于组件之间的关联越少越好，所有跟组件相关的东西都写在自己的里面，所以上面提到的￥root并不建议使用

5.之前一直不太理解的插槽，

插槽的作用就是进行内容分发，不以属性的形式进行传递，而是在组件中进行添加内容

插槽中可以传递任何代码，包括div各种标签，甚至是组件，即传递视图

子组件也可以通过slot-scope限制作用于给父组件传递数据

7.v-bind是用来绑定属性的,简写：（动态绑定）
   v-if是会销毁和重建，v-show则不会
   v-model.lazy输入框点击回车后才会显示数据
   v-model.number只能输入数字类型
   v-model.trim去掉前后空格
   watch实时监听数据变化，必须与v-model名称相同，任何数据变化都可以侦听

8.使用transion属性可以实现css动画的封装，详见官网例子

9.过滤器，很实用

toString是用来转换为字符串的

过滤时以管道符号分割

10.axios发送get请求时，可在地址后添加逗号，以花括号承载参数params：{}，params中再承载所要传递给后台的参数

mounted(){
			this.$axios.get("http...",{
				params:{
					name:"dreamy",
					age:20
				}
			})
		}

在发送post请求时需要隐去qs解决参数的转码及格式问题

mounted(){
			this.$axios.post("http...",{
				name:"dreamy",
				age:20
			})
		}

或者请求的另一种方式

this.$axios({
					method: "get",
					url: "http..."
				})