学习Vue3 第二章 （认识目录&setup语法糖&Vue指令）

1.认识目录

pubilc 下面的不好被编译，可以存放静态资源，引入的时候可以要用绝对路径

src文件下面的都会被编译，如果图片地址或者其他静态资源在src-assets下面，要使用相对路径

2.模版语法

在setup函数模式中定义的变量要return出去，但是这样感觉很麻烦，Vue推出了setup语法糖模式,不需要 return,直接使用

<template>
  <div>{{ a }}</div>
</template>
<script>
export default {
  setup() {
    const a = 1
    return { a }
  },
}
</script>

setup语法糖

<template>
   <div>变量：{{ a }}</div>
   <div>条件运算：{{ a > 1 ? '大于1' : '小于等于1' }}</div>
   <div>运算：{{ a + 1 }}</div>
    <div>操作Api：{{ [1, 2].join(',') }}</div>
</template>
<script setup >

const a = 1

</script>

3.Vue指令

官网：cn.vuejs.org/api/built-i…

v-text 显示文本

v-html 可以用来显示富文本

v-if v-else-if v-else 控制元素显示隐藏 (切换真假DOM)

v-show 控制元素显示隐藏 (display: none/block css切换)

v-on 简写@ 元素添加事件

v-bind 简写：绑定元素属性

v-modal 双向绑定

v-for 遍历元素

v-on 修饰符，冒泡案例

v-once 性能优化只渲染一次

v-memo 性能优化