Vue3学习总结

学习Vue3，最好的地方是官网：https://cn.vuejs.org/guide/quick-start.html
我这里只是自己的总结，以加深自己的学习记忆。如果其他人想学习Vue3，建议直接去官网学习。
1、已创建好的Vue3工程再次启动的命令：npm run dev。Vue3的代码至少分成两部分，一个是<–script steup>这里写类JS代码 <–script>，一个是<–template> 这里写类HTML语法<–template>。这里的script和tempate前的–是多余的，因为不写这个符号，就会被变成优快云网页脚本，无法呈现。
2、文本绑定：mustache语法是一种数据与表现分离的语法，用两个大括号来表示。vue3用的就是mustache语法，它在HTML中用两个大括号来括住JS传递来的文本。
3、所有的Vue3指令，都是在HTML属性中，用v-开头的特殊属性
4、属性绑定：使用v-bind:命令来实现属性绑定，如果是绑定单个属性，命令为v-bind:attr=“attr”，也可以写为v-bind:attr，也可以简写为：。如果是通过绑定一个映射表来一次性绑定多个属性，命令为v-bind=“map”,其中，map是一个映射表。
5、事件绑定：使用v-on:命令来实现事件绑定。如v-on:click=“doSomething”，可以用@符号来代替v-on:，如@click=“doSomething”
6、可以用[ ]来实现动态的属性或者事件绑定。
v-bind:[attrs]=“myattr”,当attrs值等于id时，则其等同于v-bind:id=“myattr”
v-on:[event] = “doSomething”，当event等于onclick时，则等同于v-on:click= “doSomething”
7、vue3中所有的数据绑定，都支持表达式。什么是表达式：即可以作为return返回值的语句。如：
{{ number + 1 }}

{{ ok ? ‘YES’ : ‘NO’ }}

{{ message.split(‘’).reverse().join(‘’) }}

<–div :id=“list-${id}”><–/div> （这里的–也是故意额外加的）

8、我跳过了响应式基础的学习，回头记得学
9、计算属性：使用computed属性，可以给template传递一个经过计算后的值，当这个值放在缓存中，当这个值不发生改变时，则JS不会再次执行computed，这样就能提高运行速度。函数也能提供经过计算后的值，但是不论传递的值有无改变，函数每次都会运行，速度会比computed慢。
计算属性的Vue语法是：
const this_value = computed( ()=>)，()=>的括号中不要放任何值，=>后用{}跟一串代码，或者是一个函数。

10、class属性是一个特殊属性，因此vue3对这个属性的绑定做了增强。
可以用大括号括住class名称，然后在class名称后加一个冒号以及布尔值，来控制该class是否绑定。（普通v-bind=““的引号不能省略）
可以用中括号来一次绑定多个class，且在中括号中可以使用表达式。当然使用大括号也可以绑定多个class，区别在于大括号里的可以用冒号+布尔值来决定该class是否绑定。中括号可以用表达式来决定该class是否绑定。
下面两种写法，效果是一样的。
<-div :class=”{class1:isActive, class2:isError}”> 66 <-/div>
<-div :class=“[isActive ? class1 : ’ ', isError ? class2 : ’ ']}”> 66 <-/div>

11、绑定CSS样式，是通过绑定style属性来实现的，语法为v-bind:style=“myStyle”.其中，myStyle是在vue中自定义的样式
如果有多个样式，则用中括号括起来。