vue常用指令v--clock，v-pre，v-once等

v-once:

        绑定的元素只动态渲染一次：

<ele v-once>{{name}}</ele>

v-pre:   

        v-pre 告诉 Vue.js 编译时跳过这个元素及其所有子元素的编译过程，将其视为静态内容，不会触发 Vue.js 的编译过程。

		<div id='app'>
			<div v-text='text'>将$data的text属性值渲染到此处</div>
			<div v-html='html'>将$data的html属性值渲染到此处</div>
			<div v-pre>这里的信息不回被解析{{desc}},作为静态文本处理</div>	
		</div>

v-clock：
       元素还没有被渲染的情况下，页面会显示源代码的 例如:{{name}}
我们可以使用 v-clock，作用就是为Vue绑定的元素上添加该属性，只需要配合CSS设置样式就可以解决屏幕闪烁问题。主要配合display：none；控制元素被渲染前不显示。
 

//可以是html页面内,
//也可以是单页面模板
<ele v-clock>{{clock}}</ele>
<div v-clock>{{name}}</div>
<style>
        [v-clock]{display:none;}
</style>

v-if和v-show：

    v-if,v-else-if,v-else:条件渲染，构成逻辑互斥关系的条件是条件本身是互斥，同时v-if,v-else-if,v-else处于同一dom元素等级(siblings）。

   v-if和v-show的区别:

     v-if是条件"惰性"渲染，即只有在条件为真时才会渲染对应的组件或元素，而在条件为假时会直接移除对应的组件或元素。这意味着在条件为假时，相关的组件或元素的所有事件监听器和子组件都会被销毁，从而减少了内存的占用。

     v-show则是通过CSS的display属性来控制元素的显示和隐藏。在条件为真时，元素的display属性会被设置为原来的值，从而显示元素；在条件为假时，元素的display属性会被设置为none，从而隐藏元素。因此，v-show并不会销毁元素，只是通过CSS来隐藏它们。

初始渲染开销：

由于v-if是惰性渲染的，所以在初始渲染时，如果条件为假，相关的组件或元素将不会被渲染到DOM中。这样可以减少初始渲染时的开销，尤其是对于复杂的组件或元素。

而v-show则会在初始渲染时将所有元素都渲染到DOM中，只是通过CSS来控制其显示和隐藏。这意味着在初始渲染时，无论条件为真还是为假，相关的组件或元素都会被渲染到DOM中，可能会增加一些初始渲染的开销。

切换开销：

由于v-if在条件变为真时才会渲染对应的组件或元素，所以在条件切换时，会有一定的切换开销。因为切换时需要重新创建和销毁组件或元素，对应的事件监听器和子组件也会重新创建和销毁。

而v-show在条件切换时，只需要通过CSS来控制元素的显示和隐藏，不需要重新创建和销毁组件或元素，也不会影响对应的事件监听器和子组件。因此，在条件切换频繁的情况下，v-show的性能可能会优于v-if。

使用场景：

如果需要在条件切换频繁的情况下，可以使用v-show来避免频繁的创建和销毁组件或元素，提高性能。

如果需要在条件切换较少的情况下，可以使用v-if来在条件为假时减少不必要的渲染，节省内存。总结：

      v-if和v-show的区别主要体现在渲染方式、初始渲染开销、切换开销和使用场景上。根据实际情况选择合适的指令可以提高应用的性能和用户体验。

v-on:

       v-on指令实现事件的绑定，事件触发函数必须在methods中指定。

<input type="button" value="按钮" @click="show"/>

事件修饰符：

    .stop 阻止冒泡
    .prevent 阻止事件默认行为
    .capture 添加事件侦听器时使用事件捕获模式
    .self 只当事件在该元素本身（比如不是子元素）触发时触发回调
    .once 事件只触发一次

v-model 数据双向绑定

      v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定。
      v-model 只能运用在 表单元素中。

      v-model 父子间通信

   parent.vue

<template>
  <div>
    <h3>parent</h3>
    <ChildComponent v-model:modelValue="message" />
    <p>来自子组件的消息：{{ message }}</p>
  </div>
</template>
<script setup>
import ChildComponent from './ChildComponent.vue'
let message = ''
</script>

  child.vue

<template>
  <div>
    <h3>子组件</h3>
    <input :value="modelValue"         @input="$emit('update:modelValue',$event.target.value)">
  </div>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue'
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  }

})
const mits = defineEmits(['update:modelValue']);
</script>

$emit双向绑定实现通信

Child.vue

child.vue
<template>
    <div>
        <button @click="myMethod1">点击透传</button>
        <input @change="myMethod2($event)"/>
    </div>
</template>

<script>
export default {
    methods: {
        myMethod1() {
            this.$emit("myEvent", "hello");
        },
        myMethod2(event) { 
            this.$emit("myEvent", event.target.value); 
        },
    }
}
</script>

parent.vue

<template>
    <div>
        <child @myEvent="onChildChange" />
        <input type="text" v-model="childValue">
    </div>
</template>
<script>
import Child from "./Child.vue";
export default {
    data(){
        childValue:'',
   },
    components: {
        Child
    },
    methods: {
        onChildChange(v) {
            this.childValue=v;
        }
    }
}
</script>