vue基础 组合式和响应式 && 模板语法 && 计算属性

模板语法 | Vue.js

根据文档

组合式和响应式

响应式

响应api单网页实例式

组合式

组合式api单网页实例

模板语法

文本插值 {{msg}}

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

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

Attribute 属性绑定

v-bind:align="align">

简写因为 v-bind 非常常用，我们提供了特定的简写语法：

 
<template>
  <h3>{{ msg }}h3>
  <h3 v-bind:align="ali">{{ msg }}h3>
  <h3 v-bind:align="'right'">{{ msg }}h3>
  
  <h3 align="center">{{ msg }}h3>
 
  
  <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

"isButtonDisabled">Button

当 isButtonDisabled 为真值或一个空字符串 (即 ) 时，元素会包含这个 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">pppppp>
  
  <p :="mm">pppppp>

使用 JavaScript 表达式

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

{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }}

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

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

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

•  
  <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>
    
    <p :id="`list-${id}`">:id="`list-${id}`"p>
   
    <hr>
    
    
   
    
    
    <p>p>
    <p>p>
    <p>p>
  template>
  

  a

调用函数

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

<template>
  <time :title="toTitleDate(date)" v-bind:datetime="date">
    {{ formatDate(date) }}
  time>
template>
<style scoped>style>
 

动态参数

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

<template>
  <div v-bind:[n]="v" >动态参数绑定div>
template>
<style scoped>style>

计算属性

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

<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 绑定