关于sy”“nc的语法糖

关于sync的语法糖

语法： <子组件标签  :a.sync="b"  

父组件和子组件同步某个属性时：
以前的方法：利用单向数据流  <Son :myname="name"  @update:myname="v=>name=v" />
现在的方法：利用sync语法糖(父子之间的双向绑定)  <Son :myname.sync="name"/>
注意：update:xx 是固定的

优势：对于父组件而言：少写一个@xxx (不用授权方法给儿子，因为sync已经包含了)
使用场景：仅仅用于 父子组件关于属性的修改

# 自定义指令directive

## 指令：

1 vue提供好的指令： v-for v-if v-show v-html 等 <a v-if=“”
2 自定义指令：自己来定义指令：v-xx,以后也是被用于标签中 <a v-xx=“”

## 场景：

权限控制 :不同的账号看到的组件是不同的

## 分类：

1 全局 : 在某个js中写，能够用于所有组件
import Vue from ‘vue’
Vue.directive(‘指令名称1’,{功能1})
Vue.directive(‘指令名称2’,{功能2})

2 局部 ：在组件中写，只能用于当前组件
export default {
directives:{
‘指令名称1’:{
//功能1
},
‘指令名称2’:{
//功能2
}
},

上课只讲全局：

## 指令中的钩子函数

1 bind: 当指令被绑定到某个元素时，才会触发， —只会触发一次
2 inserted: 当被指令绑定后的元素渲染(挂载)时，才出触发 --可能会触发多次（重点）
3 update: 当被指令绑定后的元素发生改变会触发 --可能会触发多次

## 语法：全局

Vue.directive(‘指令名称1’,{
//el能够获取被绑定的dom元素（js对象）
//binding对象.value 返回被绑定时传入的参数 v-xx=“值”
钩子函数(el,binding){}
})

## 步骤：全局

1 在src下新建directives,在该目录下新建myDirectives.js，编辑该js

2 在main.js中 使用即可

import ‘./directives/myDirectives.js’

## 场景1：通过自定义指令实现某个文本框自动获取焦点

import Vue from ‘vue’

//让某个元素能够获取焦点
Vue.directive(‘getFocus’,{
//el能够获取被绑定的dom元素（js对象）
//binding对象.value 返回被绑定时传入的参数 v-xx=“值”
inserted(el,binding){

    el.focus();
}

})

~~~

场景2: 加载多个图，如果图片加载失败，则加载默认图

//加载图片错误时显示默认图
Vue.directive('defaultImg',{
	inserted(el,binding){
        //当图片加载错误时触发
        el.onerror=function(){
            el.src=binding.value
        }
    }
})


<img  v-defaultImg="default_img" 
:src="`http://localhost:3000/img/${item}`" 
v-for=