【卷起来】VUE3.0教程-02-模板语法

听潮阁

于 2024-09-02 16:26:21 发布

阅读量1k

点赞数 10

分类专栏： VUE 3.x 文章标签： html5 javascript json css vue.js

本文链接：https://blog.csdn.net/yueyehuguang/article/details/141822931

版权

VUE 3.x 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

🍁 项目目录结构

在上面的案例中，我们创建出了一个vue项目，项目结构如下：

.vscode：vscode工具的配置文件
node_modules：Vue 项目的运行依赖文件
public：资源文件夹（浏览器图标）
src：源码文件夹
.gitignore：git忽略文件
index.html : 首页，入口HTML文件
package.json ：属性版本依赖文件
README.md ：注释文件
vite.config.js ：VUE的配置文件

🍁 VUE 模板语法

🌾 基础案例

在讲解模板语法之前，我们先将src中components目录下的文件删除，同时将App.vue中的代码删除成如下格式，：

<script >

</script>

<template>

</template>

编写如下代码，并将main.js中的 import './assets/main.css'删掉：

<script >
  export default{
    data(){
      return {
        msg: "vue 我学定了！耶稣也拦不住！"
      }
    }
  }
</script>

<template>
    <h2 style="color: red;">{{msg}}</h2>
  
 </template>

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

<h2 style="color: red;">{{msg}}</h2>

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

运行之后，显示效果：

🌾 原始html

双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，你需要使用 v-html指令：

<script >
  export default{
    data(){
      return {
        msg: "vue 我学定了！耶稣也拦不住！",
        showHtml: "<span style='color:green'>你知道我这几个月是怎么过来的吗？</span>"
      }
    }
  }
</script>

<template>
    <h2 style="color: red;">{{msg}}</h2>
    <p>纯文本：{{showHtml}}</p>
    <p>v-html: <span v-html="showHtml"></span></p>
 </template>

运行效果：

🌾 Attribute绑定

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


<template>
    <!-- <div id="{{dynamicId}}">我是加皇帝</div> -->
    <div v-bind:id="dynamicId">我是大皇帝</div>
</template>

<script >
  export default{
    data(){
      return {
        "dynamicId":"active"
      }
    }
  }
</script>

v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除。

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

<div :id="dynamicId"></div>

🌾 布尔型Attribute

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

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

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

<script >
  export default{
    data(){
      return {
        isButtonDisabled : true
      }
    }
  }
</script>

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

🌾 动态绑定多个值

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

  const objectOfAttrs = {
    id:"demo",
    class:"demo_class"
  }

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

<template>
    <button :disabled="isButtonDisabled">Button</button>
    <div v-bind="objectOfAttrs">O(∩_∩)O哈哈</div>
</template>

<script setup>
  const objectOfAttrs = {
    id:"demo",
    class:"demo_class"
  }

</script>

最终展示效果：

🌾 Javascript表达式

Vue 实际上在所有的数据绑定中都支持完整的 JavaScript 表达式：

如下面代码所示：

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

这些表达式都会被作为 JavaScript ，以当前组件实例为作用域解析执行。具体代码如下：

<script >
  export default{
    data(){
      return {
        msg: "vue 我学定了！耶稣也拦不住！",
        showHtml: "<span style='color:green'>你知道我这几个月是怎么过来的吗？</span>",
        // 绑定数字类型
        number:521,
        // 绑定布尔类型
        ok:true,
        // 绑定字符串类型
        message:"甜甜的恋爱"
      }
    }
  }
</script>

<template>
    <!-- 发生运算 -->
    <h3>小甜甜{{number-1}}!</h3>
    <!-- 使用三目运算符 -->
    <h3>你也喜欢我把？{{ok?'YES':'No'}}</h3>
    <!-- 调用方法 -->
    <h3>我们在一起就是->{{message.split('').reverse().join('')}}</h3>
    <h2 style="color: red;">{{msg}}</h2>
    <p>纯文本：{{showHtml}}</p>
    <p>v-html: <span v-html="showHtml"></span></p>
 </template>

🌾指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 ( v-for 和 v-on 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。回顾我们在介绍中看到的例子：

<p v-if="seen">现在你看到我了</p>

<script >
  export default{
    data(){
      return {
        seen:true
      }
    }
  }
</script>

这里， v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。

🌾 参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如， v-bind 指令可以用于响应式地更新 HTML attribute：

<a v-bind:href="url"> 看看我是谁？ </a>

在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。

🌾 数据绑定

Vue中有2中数据绑定的方式：

单向绑定：v-bind 数据只能从data流向页面
双向绑定：v-model 数据不仅能从data流向页面，还可以从页面流向data

<template>
    <div id="root">
        单向绑定：<input type="text" :value="name"><br/>
        双向绑定：<input type="text" v-model="name"><br>
        最终name的值: {{name}}
    </div>
 </template>

<script >
  export default{
    data(){
      return {
        name: "阿良"
      }
    }
  }
</script>