这是我参与「第四届青训营」笔记创作活动的的第7天

一、重点内容

SFC结构
常用的Vue指令

二、详细知识点介绍

Vue模板语法

在Vue3中，最常用到是单文件组件，一个SFC（*.vue）主要分为三部分，分别是script，template，style三大语言块，如下：

<script>
export default {
data() {
 return {
   count: 0
 }
}
}
</script>

<template>
<button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
font-weight: bold;
}
</style>

script：中包含了组件所用到的数据，方法等信息，负责处理该组件的数据以及业务逻辑。每个组件中最多含有一个script块。

template：模板标签中包含了该组件的DOM结构，语法类似于H5，但是可以通过{{}}的方式在文本中插入script标签的中的数据，也可以通过v-model,v-bind等指令进行数据绑定，以及其他指令对数据和DOM元素进行操作。每个 *.vue 文件最多可以包含一个顶层 template块，与Vue2不同，template不再强调根标签。

style：style中包含了当前组件的样式，当标签中含有scoped属性时，它的 CSS 只会影响当前组件的元素，和 Shadow DOM 中的样式封装类似。如此一来，父组件的css不会影响污染子组件的css，但是会影响子组件的根节点。如果希望某些父组件能够影响到子组件，可以在对应的父组件的css上添加：deep伪类。

Vue常用指令

v-html
v-text
v-for
v-bind
v-model
v-show
v-if
v-on

v-html

用于设置元素的html，等效于JS中的innerHTML

例如：

<div v-html="html"></div>

会将div标签内的元素替换为data内html属性对应的数据，html标签会进行解析渲染，单组件文件中，scoped样式不会作用于该指令中的内容，而且动态渲染很容易招受xss攻击，绝不要将用户提供的内容作为插值

v-text

等效与JS的innerText，原封不动地展示数据

<span v-text="msg"></span>
<!-- 等同于 -->
<span>{{msg}}</span>

v-for

for循环遍历，可以用来遍历Array、Object 、number 、string、Iterable。 v in Object v是自定义的变量，Object是我们需要遍历的对象

<div v-for="item in items">
  {{ item.text }}
</div>

v-bind

动态的绑定一个或多个 attribute，也可以是一个组件的 prop。

基本结构：

v-bind:属性 = "想要绑定的数据" 或者简写为 :属性 = "想要绑定的数据"

例如：

<!-- 绑定 attribute -->
<img v-bind:src="imageSrc" />

<!-- 动态 attribute 名 -->
<button v-bind:[key]="value"></button>

<!-- 缩写 -->
<img :src="imageSrc" />

<!-- 缩写形式的动态 attribute 名 -->
<button :[key]="value"></button>

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName" />

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定对象形式的 attribute -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- prop 绑定。“prop” 必须在子组件中已声明。 -->
<MyComponent :prop="someThing" />

<!-- 传递子父组件共有的 prop -->
<MyComponent v-bind="$props" />

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

v-model

与表单内的元素进行双向绑定只能用于：input，select，textarea标签

v-show

改变该元素的可见性，为true时显示，false不显示。通过设置该元素的内联css中display属性来执行。

v-if

决定该元素是否渲染，为true时渲染，false不渲染，比v-for的优先级高，不能通过和v-for一起用来进行过滤

v-on

给元素绑定事件监听器基本结构 v-on:事件名=方法名() 简写形式：@事件名=方法名()

【青训营】Vue3基本语法