【无标题】

sync修饰符

.sync修饰符是@update:自定义属性名的语法糖

.sync 修饰符的作用就是实现父子组件数据双向绑定

<template>
  <div class="app">
    <!-- <BaseSelect :value="value" @input="value = $event" /> -->
    <!-- v-model 相当于:value + @input -->
    <!-- <BaseSelect v-model="value" />
    <BaseSelect value="104" /> -->
    <button @click="close">退出系统</button>
    <!-- <BaseDialog :isShow="isShow" @hidden="hidden" /> -->
    <!-- <BaseDialog v-model="isShow" /> -->
    <!-- <BaseDialog :visible="isShow" @update:visible="isShow = $event"/>  -->
    <!-- 12行代码等价于第10行代码-->
    <BaseDialog :visible.sync="isShow" />
  </div>
</template>

<script>
import BaseDialog from "./components/basedialog.vue";
import BaseSelect from "./components/baseselect.vue";

export default {
  data() {
    return {
      value: "102",
      isShow: false,
    };
  },
  components: {
    BaseSelect,
    BaseDialog,
  },
  methods: {
    changeId(id) {
      this.selectId = id;
    },
    close() {
      this.isShow = true;
    },
    hidden() {
      this.isShow = false;
    },
  },
};
</script>

<style>
.app {
  border: 3px solid #000;
  border-radius: 6px;
  margin: 10px;
}
</style>

对应的更改的

<template>
  <div class="base-dialog-wrap" v-show="visible">
    <div class="base-dialog">
      <div class="title">
        <h3>温馨提示：</h3>
        <button class="close" @click="$emit('update:visible')">x</button>
      </div>
      <div class="content">
        <p>你确认要退出本系统么？</p>
      </div>
      <div class="footer">
        <button>确认</button>
        <button>取消</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: Boolean,
  },
};
</script>

<style scoped>
.base-dialog-wrap {
  width: 300px;
  height: 200px;
  box-shadow: 2px 2px 2px 2px #ccc;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0 10px;
}
.base-dialog .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #000;
}
.base-dialog .content {
  margin-top: 38px;
}
.base-dialog .title .close {
  width: 20px;
  height: 20px;
  cursor: pointer;
  line-height: 10px;
}
.footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 26px;
}
.footer button {
  width: 80px;
  height: 40px;
}
.footer button:nth-child(1) {
  margin-right: 10px;
  cursor: pointer;
}
</style>

ref和refs

在Vue中一般很少会用到直接操作DOM，但不可避免有时候需要用到，这时我们可以通过ref和$refs这两个来

常用的属性有：
	1：vm.$el   	//获取vue实例关联的Dom元素
	2: vm.$data 	//获取vue实例的data选项
	3：vm.$options	//获取vue实例的自定义属性
	4：vm.$refs		//获取vue实例中所有含有ref属性的dom元素，如果有多个，只返回最后一个。
	5: vm.$ref 		// ref 被用来给元素或子组件注册引用信息， 引用信息将会注册在父组件的 $refs 对象上，如果是在普通的DOM元素上使用，引用指向的就是 DOM 元素，如果是在子组件上，引用就指向组件的实例
		 ref加载普通元素上，this.$refs.  获取到的就是dom元素
		 ref记载在子组件上，this.$refs.  获取到的就是组件实例，可使用组件的所有方法。

用法

①ref加在普通的元素上，用this.ref.name获取到的是dom元素；

   ②ref加在子组件上，用this.ref.name获取到的是组件实例，可以使用组件的所有方法；

   ③如何利用v-for和ref获取一组数据或者dom节点。

   当v-for用于元素或者组件的时候，引用信息将是包含dom节点或组件实例的数组；

   关于ref注册时间的重要说明：因为ref本身是作为渲染结果被创建的，在初始渲染的时候，你不能访问它们--它们还不存在！$refs也不是响应式的，因此你不应该试图用它在模板中做数据绑定。
————————————————
版权声明：本文为CSDN博主「kalvin_y_liu」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/kalvin_y_liu/article/details/125426001

全局指令

1. 全局注册指令
// Vue.directive('focus', {
//   // inserted 会在 指令所在的元素，被插入到页面中时触发
//   inserted (el) {
//     // el 就是指令所绑定的元素
//     // console.log(el);
//     el.focus()
//   }
// })

局部指令

directives: {
    focus: {
      inserted(el) {
        el.focus();
      },
    },
    color: {
      // 指令所在元素被插入页面中调用一次并且只调用一次
      inserted(el, binding) {
        console.log(el, binding);
        // binding.value 拿到指令的值
        el.style.color = binding.value;
      },
      // 指令绑定的数据发生变化时执行
      update(el, binding) {
        el.style.color = binding.value;
      },
    },

插值和作用域插值

插值就是在元素上面留一个空间可以跟还不知是写什么的先留下

作用域是可以在在插值的同时传递数据