0
点赞
收藏
分享

微信扫一扫

Vue2.0常用知识

IT程序员 2022-05-04 阅读 125

属性、指令
v-bind:attribute简写为:attribute
v-show是否展示元素组件节点

元素组件id
ref=”vueComName”
vm.$refs可获取ref注册过的元素和组件//vm==》vue的实例对象

事件方法
v-on:click=”doSomething”简写为@click=”doSomething”
键盘事件:(下拉选择)
@keyup.native.enter=”方法名”

路由:
路由匹配到的组件将显示的位置

<router-view>

跳转:

<router-link :to=””></router-link>

插槽:solt

<div slot=”hoverPerson”></div>//替换成对应组件
<slot name=”hoverPerson”/>

Vuex全局状态管理
…objectName([‘taskID’])//赋值并取值

监听器 watch

watch:{
	num(newVal, oldVal){
		console.log('新值:', newVal, '旧值:', oldVal);
	},
	immediate:true,	//立即监听
}

生命周期–钩子函数
☆ create 数据响应式之后调用
☆ mounted DOM渲染之后调用

mounted: function () {
  this.$nextTick(function () {
    // 仅在整个视图都被渲染之后才会运行的代码
  })
}

子组件和父组件v-model语法糖(双向绑定)
父组件/子组件的值改变,对应的子组件/父组件的值也会改变

//原写法:
//父组件:
	:value="form.l2_solution_review_next"
	@input="form.l2_solution_review_next=$event"
	//可简写:
	v-model="form.l2_solution_review_next"//即父组件的写法
//子组件:
//使用props接收value的属性值之后
	 :value=”value”
	 @input=”$emit(‘input’, $event)

父子组件,节点之间互相调用各自的方法:

this.$parent.fn2();//子调用父节点的方法/属性
this.$emit(‘onValudateFinshed’,formValidateResult)//子组件调用父组件方法
this.$refs[refName].fn1();//this.$refs代表获取所有绑定ref的实例对象,取具体实例调用方法
this.$store.commit(“aa”, true);//commit是改变vuex全局状态量的方法;

编程思想:
尽量用计算属性(除了异步没办法用,其它都可以)
方法尽量不要改变入参
方法定义用get

举报

相关推荐

0 条评论