您现在的位置是:首页 > 正文

vue3 模版语法

2024-02-01 04:24:57阅读 1

App.vue

注释掉首页的文本内容,只剩下对应的图标即可。

    <div class="wrapper">
      <!-- <HelloWorld msg="You did it!day day up 自己更新" /> -->
    </div>
  </header>

  <main>
    <!-- <TheWelcome /> -->
  </main>

内容解析

<script setup>
	...
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <!-- <div class="wrapper"> -->
      <!-- <HelloWorld msg="You did it!day day up 自己更新" /> -->
    <!-- </div> -->
  </header>

  <main>
    <!-- <TheWelcome /> -->
  </main>
</template>

<style scoped>
	...
</style>
  • script 标签:业务逻辑部分
  • style 标签:样式部分,不用管
  • template 标签:页面模版部分

js的业务和模版部分结合起来

模版语法

文本插值

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

  • msg为对应的文本插入值。
<script>
export default{
  name: 'app',
  data(){
    return{
      msg:"这个一个模版的语法"
    }
  }
}
</script>
<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
    <div id="app">
      <div>
        <h2>模版语法</h2>
        <p>{{msg}}</p>
      </div>
    </div>
  </header>
</template>

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

原始 HTML

在这里插入图片描述

根据上图发现,如果还是使用p标签进行显示对应的html,则默认html显示的为字符串,而非定义的html内容。

  • 双大括号会将数据解释为纯文本,而不是 HTML

若想插入 HTML,需要使用 v-html 指令:

<script>
export default{
  name: 'app',
  data(){
    return{
      price:"<span style=\"color:red\">600 should be red.</span>"
    }
  }
}
</script>
<template>
  <header>
    <div id="app">
      <div>
        <p>使用html : <span v-html="price"></span></p>
      </div>
    </div>
  </header>
</template>

在这里插入图片描述

v-html

这里我们遇到了一个新的概念。这里看到的 v-html attribute 被称为一个指令。

  • 指令由 v- 作为前缀,表明它们是一些由 Vue 提供的特殊 attribute,你可能已经猜到了,它们将为渲染的 DOM 应用特殊的响应式行为。

  • 这里我们做的事情简单来说就是:在当前组件实例上,将此元素的 innerHTMLprice 属性 保持同步

span 的内容将会被替换为 price 属性的值,插值为纯 HTML——数据绑定将会被忽略。

注意
  • 不能使用 v-html 来拼接组合模板。

因为 Vue 不是一个基于字符串的模板引擎。在使用 Vue 时,应当使用组件作为 UI 重用和组合 的基本单元。

Attribute 绑定

  • 响应性:Vue 会自动跟踪 JavaScript 状态变化并在改变发生时响应式地更新 DOM

想要 响应式 地绑定一个 标签对应属性,应该使用 v-bind 指令:
在这里插入图片描述

<script>
export default{
  name: 'app',
  data(){
    return{
      dynamicId:'iddfs'
    }
  }
}
</script>
<template>
  <header>
      <div v-bind:id="dynamicId">标签属性的动态展示</div>
  </header>
</template>
v-bind

v-bind 指令指示 Vue 将元素的 id 属性 与组件的 dynamicId 属性保持一致。

  • 如果绑定的值 是 null 或者 undefined,那么该 属性 将会从渲染的元素上移除。
简写优化
  • 特定的简写语法:
<div :id="dynamicId">标签属性的动态展示</div>

开头为 : 的 属性 可能和一般的 HTML 属性 看起来不太一样,但它的确是合法的 attribute 名称字符,并且所有支持 Vue 的浏览器都能正确解析它。

Boolean Attribute

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

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

  • isButtonDisabled真值true“true”1」或一个 空字符串 (即 <button disabled="">) 时,元素会包含这个 disabled 属性。元素置灰,不能使用。

  • isButtonDisabled为其他假值「false“false”0」时 attribute 将被忽略。元素可以使用。

在这里插入图片描述

动态绑定多个值

一个包含多个 属性 的 JavaScript 对象:

data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
}

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

<div v-bind="objectOfAttrs"></div>

在这里插入图片描述

更多技术文章

网站文章