【愚公系列】《循序渐进Vue.js 3.x前端开发实践》005-Vue 模板与应用：模板基础

愚公搬代码

已于 2024-10-19 23:04:46 修改

阅读量4.8w

点赞数 26

分类专栏：愚公系列-书籍专栏文章标签： vue.js 前端前端框架

于 2024-08-20 23:38:40 首次发布

本文链接：https://blog.csdn.net/aa2528877987/article/details/141370946

版权

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉	2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。
博客内容	.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎	👍点赞、✍评论、⭐收藏

🚀前言

模板是 Vue 框架的核心组成部分。Vue 采用的基于 HTML 的模板语法大大降低了前端开发者的学习曲线，使大多数开发者能够快速上手。

在 Vue 的分层设计理念中，模板属于视图层，允许开发者专注于页面布局的组织，而不必过多关注数据逻辑的处理。同时，当开发者在 Vue 组件内部编写数据逻辑时，也无需担心视图的渲染问题，因为 Vue 的模板系统会自动处理数据与视图之间的映射关系。

本章将深入探讨 Vue 框架的模板功能，引导你掌握 Vue 模板的使用技巧，开启精通 Vue 模板的旅程。

🚀一、模板基础

我们已经体验了 Vue 模板的使用。在普通 HTML 文档中，若要更新页面以响应数据变化，通常需要通过 JavaScript 进行 DOM 操作，包括获取指定元素并修改其属性或文本。这种方法不仅繁琐，而且容易出错。

相较之下，Vue 的模板语法极大地简化了这一过程。我们只需将变化的数据定义为组件的属性，然后在 HTML 文档的相应位置插入这些属性变量。当数据变化时，所有相关的组件都会自动同步更新。这一特性正是 Vue 模板中的插值表达式所实现的。

学习 Vue 模板的第一步，就是掌握插值表达式的使用。通过这种方式，Vue 使得数据与视图之间的同步变得更加直观和高效。

🔎1.模板插值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板插值</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style type="text/css">
        #h1 {
     
            color: red;
        }
    </style>
</head>
<body>
    <!-- <div style="text-align: center;">
        <h1>这里是模板的内容:1次点击</h1>
        <button>按钮</button>
    </div> -->
    <div id="Application" style="text-align: center;">
        <h1>这里是模板的内容:{
  {count}}次点击</h1>
        <h1 v-once>这里是模板的内容:{
  {count}}次点击</h1>
        <h1>这里是模板的内容:{
  {countHTML}}次点击</h1>
        <h1 v-once>这里是模板的内容:<span v-html="countHTML"></span>次点击</h1>
        <!-- <h1 v-once>这里是模板的内容:{
   {count}}次点击</h1> -->

        <h1 v-bind:id="id1">这里是模板的内容:{
  {count}}次点击</h1>
        <button v-on:click="clickButton">按钮</button>
    </div>
    <script>
        const {
     createApp, ref} = Vue
        // 定义一个Vue组件, 名为App
        let config = {
     
            setup() {
      
                // 定义组件中的数据
                const count = ref(0)
                const countHTML = ref("<span style='color:red;'>0</span>")
                const id1 = ref("h1"