Vue3 模板语法及指令

1、插值表达式

1.1、文本插值

最基本的数据绑定形式就是文本插值，它使用的是“Mustache”语法 (即双大括号)

{{ msg }}

let msg = '我是文本插值测试'

双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 msg 属性更改时它也会同步更新。

1.2、JavaScript 表达式

“Mustache”语法不仅支持普通的文本插值，还可以执行一些简单的JavaScript 表达式

{{ msg ? msg : '-' }}
{{ count + 1 }}
{{ getName() }}

let msg = '我是文本插值测试'
let count = 1
const getName = () => {
  return '小陆';
}

“Mustache”语法仅支持单一的表达式，必须是能够计算出结果的JavaScript 代码，而不是任意的JavaScript 代码
如果要实现条件表达式，则使用三元表达式，JavaScript 的条件语句也是不支持的

1.3、Attribute 绑定

双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令

:id="dataId">


:id="dataId">


:id>


:disabled="isButtonDisabled">Button

有时候我们可能需要在后端接口返回数据是判断某些节点的展示，此时我们还可以利用动态绑定多个属性值实现

"objectOfAttrs">

const objectOfAttrs = {
  class: 'wrapper',
  style: 'background-color:grey;color:yellow'
}

2、内置指令

Vue 指令是以 v- 为前缀的特殊属性，Vue 提供了许多内置指令，下面列举一些比较常用的指令

2.1、v-bind

绑定属性或动态绑定对象的值到元素上，也可缩写为 :

:id="id">


:id="userId">

2.2、v-show、v-if、v-else-if、v-else

控制元素显示或隐藏

"isShow">show

"type == A"> 显示 A 

"type == B"> 显示 B 

 不是A也不是B 

2.3、v-for

循环渲染数组或对象

  
"(item, index) in arr" :key="index">{{ item }}




  
"(value, key) in object" :key="key">{{ key }}: {{ value }}



  
"i in 10" :key="i">{{i }}

2.4、v-on

监听 DOM 事件，也可简写为 @

:click="addCount">数量 + 1
count: {{ value }}

const count = ref(1)
const addCount = () => {
	count.value += 1
}

2.5、v-model

在表单元素和组件中双向绑定数据

"text" v-model="value">
value is: {{ value }}


"value">


:info="info">
User 组件
{{ props.info }}
const props = defineProps({
  info: {
    type: Object,
    default: () => {},
  },
})

2.6、v-text

渲染元素的文本内容

"textContent">

let textContent = '我是纯文本哦'

2.7、v-html

更新元素的 innerHTML，渲染HTML标签

"htmlCode">

let htmlCode = `'
这是一段 HTML 内容
'`

注意：内容会按普通HTML渲染，会存在安全问题，谨慎使用。

2.8、v-slot

具名插槽的用法，可自定义子组件内容
子组件：

父组件：

import NameSlot from './components/NameSlot.vue'