模板语法 | Vue.js

根据文档

组合式和响应式

响应式

响应api单网页实例式

组合式

组合式api单网页实例

模板语法

文本插值 {{msg}}

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

<script setup>
import {onMounted, ref, version} from 'vue'

const ver = ref('ok')  // ver = {value:'ok'}
const tt = () => {
  ver.value = new Date().toLocaleTimeString()
}
tt()
const mm = () => {
  setInterval(tt, 1000)
}
onMounted(mm)
</script>

<template>
  <p>{{ version }}</p>
  hello vue {{ ver }}
</template>
<style scoped></style>

Attribute 属性绑定

<h3 v-bind:align="align"></h3>

简写因为 v-bind 非常常用，我们提供了特定的简写语法：<h3 :id="ad"></h3>

<script setup>
import {ref} from 'vue'

const msg = ref('hello')
const ali = ref('center')
const ad = ref('box')
</script>

<template>
  <h3>{{ msg }}</h3>
  <h3 v-bind:align="ali">{{ msg }}</h3>
  <h3 v-bind:align="'right'">{{ msg }}</h3>
  <!-- 此标签的align属性和vue关系 -->
  <h3 align="center">{{ msg }}</h3>

  <!-- :id="'ad'"  相当于 id="ad" -->
  <h3 :align="ali" :id="'ad'">{{ msg }}</h3>
  <h3 :align="ali" v-bind:id="ad">{{ msg }}</h3>
</template>
<style scoped></style>

布尔型 Attribute

布尔型 attribute 依据 true / false 值来决定 attribute 是否应该存在于该元素上。disabled 就是最常见的例子之一。

v-bind 在这种场景下的行为略有不同：template

<button :disabled="isButtonDisabled">Button</button>

当 isButtonDisabled 为真值或一个空字符串 (即 <button disabled="">) 时，元素会包含这个 disabled attribute。而当其为其他假值时 attribute 将被忽略。

<script setup>
import {ref} from 'vue'

const isSubmit = ref(true)

function ok() {
  isSubmit.value = !isSubmit.value
}
</script>

<template>

  <button :disabled="isSubmit">{{ isSubmit ? '不可以提交' : '允许提交' }}</button>
  <br>
  <button :disabled="isSubmit">提交</button>
  <br>
  <button :disabled="false">提交</button>
  <br>
  <button>提交</button>
  <br>
  <button disabled>提交</button>
  <br>
  <a href="javascript:void(0)" @click="ok">{{ isSubmit ? '允许提交' : '不可以提交' }}</a>
</template>

<style scoped>
button {
  margin: 5px;
  border-radius: 8px;
  min-width: 55px;
  padding: 6px;
}
</style>

动态绑定多个值

如果你有像这样的一个包含多个 attribute 的 JavaScript 对象：js

const mm = ref({
  id: 100,
  class: 'ad',
  align: 'center'
})

通过不带参数的 v-bind，你可以将它们绑定到单个元素上：template

 <p v-bind="mm">ppppp</p>
  <!-- v-bind:属性简写 语法糖 :属性 :="对象" -->
  <p :="mm">ppppp</p>

使用 JavaScript 表达式

至此，我们仅在模板中绑定了一些简单的属性名。但是 Vue 实际上在所有的数据绑定中都支持完整的 JavaScript 表达式：template

{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} <div :id="`list-${id}`"></div>

这些表达式都会被作为 JavaScript ，以当前组件实例为作用域解析执行。

在 Vue 模板内，JavaScript 表达式可以被使用在如下场景上：

• 在文本插值中 (双大括号)
• 在任何 Vue 指令 (以 v- 开头的特殊 attribute) attribute 的值中

• <script setup>
  import {ref} from 'vue'
  
  let pf = i => i * i
  let id = ref('ad')
  let msg = ref('hello world')
  </script>
  
  <template>
    <p>{{ 2 ** 3 }}</p>
    <p>{{ Math.random() > .5 ? 'yes' : 'no' }}</p>
    <p>{{ pf(6) }}</p>
    <p>{{ msg + 1}}</p>
    <p>{{ msg.split('').reverse().join('').toUpperCase().repeat(pf(3))}}</p>
    <p></p>
    <!-- id="list-ad" -->
    <p :id="`list-${id}`">:id="`list-${id}`"</p>
  
    <hr>
    <!-- 这是一个语句，而非表达式 -->
    <!--{{ var a = 1 }}-->
  
    <!-- 条件控制也不支持，请使用三元表达式 -->
    <!--{{ if (ok) { return message } }}-->
    <p></p>
    <p></p>
    <p></p>
  </template>

  a

调用函数

可以在绑定的表达式中使用一个组件暴露的方法：template

<script setup>
import {ref} from 'vue'
let date = ref(new Date())
let toTitleDate = d => {
  return d.getTime()
}

function formatDate(date) {
  let yy = date.getFullYear()
  let mm = date.getMonth() + 1
  let dd = date.getDate()
  return `${yy}年${mm}月${dd}日`
}
</script>
<template>
  <time :title="toTitleDate(date)" v-bind:datetime="date">
    {{ formatDate(date) }}
  </time>
</template>
<style scoped></style>

动态参数

--注意，参数表达式有一些约束，
参见下面“动态参数值的限制”与“动态参数语法的限制”章节的解释
 

<script setup>
import {ref} from 'vue'
let n = 'align'
let v = 'right'
</script>
<template>
  <div v-bind:[n]="v" >动态参数绑定</div>
</template>
<style scoped></style>

计算属性

计算属性是循环的方法，通过computed(fn) 来实现自动响应式，此函数必须返回一个值

<script setup>
import {reactive,computed} from 'vue'

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

//计算属性 是响应式 使用时 在template {{aa}}
const aa = computed(()=>{
  console.log("aa计算属性")
  return author.books.length>0 ? 'Yes' :'No'
})
//函数 {{ok()}}
function ok(){
  let t = 'No'
  if(author.books.length>0) t = 'Yes'
  console.log("ok()调用函数")
  return t
}
</script>
<template>
  <p>Has published books:</p>
  <span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>
  <!-- 调用函数 -->
  <p>{{ok()}}</p>
  <!-- 计算属性 表达式 -->
  <p>{{aa}}</p>
</template>
<style scoped></style>

Class 与 Style 绑定