一，v-text和v-html
都是z在
<h1>v-text 和 v-html</h1><p v-text="msg"></p><p v-html="msg"></p><p v-html="'msg'"></p>const msg = "<b>你好世界<b/>";html中渲染内容的，这两个指令后面接的是变量名
v-text:渲染的内容如果包含html不会被解析出来，类似innerText
v-html:渲染的内容如果包含html会被解析出来，类似innerHTml
二，v-show 和 v-if
都可以控制元素的显隐 后面的值是结果为布尔值的表达式
v-show:利用display属性来控制显隐，浏览器dom树中还存在，使用场景：适合频繁操作的场景，以及安全要求不高的场景
v-if：利用元素的添加和删除来控制显隐，dom树中不存在,更安全，性能消耗更大，使用场景：适合安全要求较高的场景
<p v-show="flag">v-show按钮</p><p v-if="flag">v-if按钮</p>const flag = true;三，v-if 和 v-else-if 和 v-else
用来在模板中对数据进行条件渲染，类似于js中的if/else
后面的值是一个表达式，而且是一个结果为布尔值的表达式
小明同学打怪兽打了<span v-html="score"></span>只<p v-if="score >= 90">拯救银河系</p><p v-else-if="score >= 70">拯救地球</p><p v-else-if="score >= 60">拯救人类</p><p v-else>拯救银河系</p>const score = 80;四，v-for和:key
在模板装渲染列表数据，被循环渲染的数据可以数组，对象，数字，字符串
<div v-for="每一项（循环项） in 列表数据" :key="唯一标识"></div>
<div v-for="(循环项,当前索引） in 列表数据" :key="唯一标识"></div> 数组
<div v-for="(当前项的值,当前项的键,当前索引) in 列表数据" :key="唯一标识"></div> 对象
<pv-for="(item, index) in list":key="item.id">{{ item.id }}:{{ item.title }}:{{ index }}</p><pv-for="(value, key, index) in user":key="value">{{ value }}:{{ key }}:{{ index }}</p><pv-for="item in 5":key="item">{{ item }}</p><pv-for="item in 'hello'":key="item">{{ item }}</p>const list = [{ id: 0, title: "html" },{ id: 1, title: "css" },{ id: 2, title: "js" },
];const user = {name: "李四",age: 12,hobby: "paly",
};
五v-on
在模板中绑定事件，通过v-on：事件类型 = "事件句柄/函数名"来实现页面的交互
因为在这种场景非常高频，所以可以简写为@事件类型="事件句柄/函数名"
在事件声明的函数中，可以直接通过形参获取取到事件对象
如果在事件句柄中传入了参数，可以传入第二个参数$event 把事件对象手动传入到函数内部使用
<button v-on:click="handClick">按钮1</button><button @click="handClick">按钮2</button><button @click="handClick1('hello', $event)">按钮3</button>const handClick = (e) => {console.log("1111", e);
};
const handClick1 = (msg, e) => {console.log(msg, e);
};六v-model
双向数据绑定,用在表单元素，在输入框中修改了v-model绑定的值 ，那么使用到该值的位置会同步更新
p>{{ name }}</p><inputtype="text"v-model="name"/><button @click="handClick2">提交</button>//const name = ref('你好')
import { ref } from "vue"; //ref声明的变量是响应式数据
const name = ref("你好");const handClick2 = () => {//特别注意：在js中通过.value的方法读取ref声明的响应式数据console.log(name.value);name.value = "修改后的数据";
};七v-bind
v-bind: 给标签添加动态属性
v-bind:属性名 = "{属性名1：布尔值,属性名2，布尔值}"
v-bind:属性名 = "[布尔值？属性名1：属性名2]"
:缩写
:属性名="{属性名1：布尔值，属性名2：布尔值}"
:属性名="[布尔值？属性名1:属性名2]"
<h1>考试成绩</h1><ul><li :style="{ fontSize: '30px' }">语文：144</li><li v-bind:class="{ active: flag }">数学：144</li><liclass="abc"v-bind:class="[flag ? 'active' : '']">英语：144</li></ul><img:src="imgUrl"alt=""/>import { ref } from "vue";
const flag = ref(true);const handleClick = () => {msg.value = "不会改变";
};const imgUrl = ref("https://tse1-mm.cn.bing.net/th/id/OIP-C.PKEGERhWPUpBdgVRoBAGfQHaDx?w=350&h=178&c=7&r=0&o=5&dpr=1.2&pid=1.7"
);.active {color: red;
}八v-slots
插槽是一种用于组件内容分发的机制，它允许你将内容从父组件传递到子组件的模板中
简单理解占位置用的
插槽的基本类型：
默认插槽，如果没有指定插槽的名称，那么它就是默认插槽，组件中有且仅有一个插槽
具名插槽 当你需要在子组件模板中插入多个内容块时，可以使用具名插槽。
作用域插槽 作用域插槽允许子组件将数据作为插槽的一部分传递回父组件，这样父组件可以访问子组件的数据来渲染内容
默认插槽
<!-- 子组件 -->
<template><div><slot></slot> <!-- 默认插槽 --></div>
</template><!-- 父组件 -->
<template><ChildComponent><p>这是插入到子组件的内容</p></ChildComponent>
</template>具名插槽
<!-- 子组件 -->
<template><div><slot name="header"></slot> <!-- 具名插槽 --><slot name="footer"></slot> <!-- 具名插槽 --></div>
</template><!-- 父组件 -->
<template><ChildComponent><template #header><h1>这是头部内容</h1></template><template #footer><p>这是底部内容</p></template></ChildComponent>
</template>作用域插槽
<!-- 子组件 -->
<template><ul><li v-for="item in items" :key="item.id"><slot :item="item">{{ item.defaultText }}</slot> <!-- 传递 item 对象给父组件 --></li></ul>
</template><script setup>
const items = ref([{ id: 1, text: 'Item 1' }, { id: 2, text: 'Item 2' }]);
</script><!-- 父组件 -->
<template><ChildComponent><template #default="slotProps"><span>{{ slotProps.item.text }}</span> <!-- 使用子组件传递的数据 --></template></ChildComponent>
</template>九。v-pre
v-pre 是一个内置指令，用于跳过元素的编译过程
<!-- 这将原样渲染 <div> 内的 HTML，不会解析任何 Vue 指令 -->
<div v-pre>{{ this will not be rendered }}<span v-if="true">neither will this</span>
</div>在这个例子中，<div> 内的内容将不会被 Vue 解析，所以 {{ this will not be rendered }} 和 <span v-if="true">neither will this</span> 都不会被处理。
十，v-once
v-once 是一个指令，用于渲染元素和组件时只执行一次初始化，之后视图更新时不再重新渲染该元素或组件
十一，v-cloak
v-cloak 指令，通过隐藏未渲染的模板表达式，直到 Vue 实例完成渲染
