2023面试高手

这个屌丝很懒，什么也没留下！

热门标签

Vue3进阶：模板语法的介绍和编码使用详解（附代码与群资料）_vue3 模板完整代码

作者：2023面试高手 | 2024-05-04 16:14:31

踩

vue3 模板完整代码

更多关于Vue前端相关技术点，敬请关注公众号：CTO Plus后续的发文，有问题欢迎后台留言交流。

注意：由于排版太费时间，所以还是多多注重技术干货的内容吧。

接下来的一段时间我将除了总结下关于【Python进阶系列】的知识点分享文章外，还将为各位前端读者（全栈开发者）分享下关于前端开发框架Vue3的内容，当然还会包括：H5、CSS3、JavaScript、JQuery、前端开发规范等前端内容。

然后对Python开发感兴趣的读者也可以关注公众号CTO Plus，关注【Python进阶系列】的内容，同时涉及到Web开发、爬虫开发、操作系统开发、网络安全开发应用领域这块，可以分别参考我的公众号CTO Plus【Flask进阶系列】、【Django进阶系列】、【DRF进阶系列】、【互联网分布式爬虫系列】和【网络安全系列】的内容，敬请关注，欢迎交流。

以下是【Vue3进阶系列】的部分内容

Vue3是一个流行的JavaScript框架，它提供了一种简洁、灵活和高效的方式来构建用户界面。在Vue3中，模板语法是一项重要的功能，它可以帮助开发者快速编写可读性高且易于维护的代码。

Vue 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。结合响应系统，在应用状态改变时，Vue能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

插值和表达式

在Vue 3中，我们仍然可以使用插值和表达式来将数据动态地渲染到DOM中。在Vue3的模板语法中，最常用的语法元素是插值表达式。插值表达式使用双大括号 `{{}}` 将表达式包裹起来，用于将动态数据绑定到模板中。例如：

<div>

<h1>{{ message }}</h1>

</div>

在上面的例子中，`{{ message }}` 将会被 `message` 变量的值替换。当 `message` 变量的值发生变化时，插值表达式会自动更新。

插值表达式还支持一些表达式运算符和过滤器。例如：

<p>{{ count + 1 }}</p>

<p>{{ message | capitalize }}</p>

字符串转大写：{{ message2.toUpperCase() }}<br>

上面的例子中，`count + 1` 表达式会计算出 `count` 变量的值加上1的结果。而 `message | capitalize` 则会将 `message` 变量的值转换为大写字母开头。同时，还可以使用使用内置的JavaScript方法toUpperCase()将字符串转为大写字母。

当数据发生变化时，Vue3会自动更新插值表达式的结果。因此，如果你在代码中更新了message的值，插值表达式将自动显示更新后的大写字符串。

指令

除了插值表达式，Vue3还提供了一些特殊的指令，可以用于处理DOM元素的属性、事件和样式。指令以 `v-` 开头，后面跟着指令的名称和参数。例如：

<button v-on:click="handleClick">Click me</button>

在上面的例子中，`v-on:click` 指令用于监听按钮的点击事件，并调用 `handleClick` 方法。而 `v-bind:value` 指令用于将输入框的值绑定到 `message` 变量。

除了上述两个指令，Vue3还提供了一些其他常用的指令，如：`v-if`、`v-for`、`v-show`、`v-model` 等，以便于开发者更方便地操作DOM元素。

Vue3的模板语法还提供了条件渲染和列表渲染的功能，用于根据条件来动态地展示和处理数据。

条件渲染

条件渲染是根据条件来决定是否渲染某个DOM元素的一种方式，条件渲染通过 `v-if` 指令来实现，可以根据表达式的值决定是否渲染DOM元素。在Vue 3中，我们可以使用`v-if`和`v-else`指令来实现条件渲染。例如：

<p v-if="isShown">This paragraph is shown if isShown is true.</p>

或

</div>

上述代码中，如果`showContent`变量为`true`，则渲染`<div>`标签和其中的内容，否则不渲染。

列表渲染

列表渲染是根据数据数组动态地渲染多个DOM元素的一种方式，在Vue 3中，我们可以通过 `v-for` 指令实现列表渲染，可以遍历数组或对象，并对每个元素执行一段模板代码。例如：

<ul>

</ul>

上述代码中，`items` 是一个数组，我们使用`v-for`指令对`items`数组进行遍历，并将每个元素的`name`属性插入到`<li></li>`标签中。

插值

文本插值

文本插值是将数据以字符串形式插入到DOM文本中的一种方式。在Vue 3中，我们可以使用双花括号`{{}}`（双大括号）来进行文本插值（数据绑定）。例如：

<h1>{{ message }}</h1>

上述代码中，我们将`message`变量的值插入到`<h1></h1>`标签中。

代码示例：

<body><div id="steverocket" class="demo" style="background-color: bisque">    插入文本：{{ message }}<br>    {{ age }}<br>
<!--  可以看到使用这种方式给img的属性指定URL无法实现效果，使用方法请参考Vue的指令v-bind-->    <img src="{{ url }}"/><br>    <img v-bind:src="url"/><br>
</div></body><script>    // data 选项    const HelloVueApp = {        data() {            return {                message: "This is vue3 app, my name is SteveRocket. 公众号：CTO Plus",                age: 28,                url: "./../../../static/wechat.png"            }        }    }    Vue.createApp(HelloVueApp).mount("#steverocket");    //  mount("#steverocket")  将 Vue 应用 HelloVueApp 挂载到 <div id="steverocket" class="demo"> 中。    //  {{ }} 用于输出对象属性和函数返回值。    // {{ message }} 对应应用中 message 的值。</script>

{{...}} 标签的内容将会被替代为对应组件实例中 message 属性的值，如果 message 属性的值发生了改变，{{...}} 标签内容也会更新。

如果不想改变标签的内容，可以通过使用 v-once 指令执行一次性地插值，当数据改变时，插值处的内容不会更新。

<span v-once>这个将不会改变: {{ message }}</span>

输出结果

HTML

使用 v-html 指令用于输出html 代码。

代码示例

<body><p>author:<b>SteveRocket</b></p><p>WeChat:<a href="https://mp.weixin.qq.com/s/0yqGBPbOI6QxHqK17WxU8Q">https://mp.weixin.qq.com/s/0yqGBPbOI6QxHqK17WxU8Q</a></p>
{{ htmlContent }}<p><span v-html="htmlContent"></span></p></body><script>    const VueApp = {        data() {            return {htmlContent: '<span style="color: red">这里会显示红色！</span>'}        }    }    Vue.createApp(VueApp).mount('body')</script>

输出结果

属性绑定

属性绑定是将数据绑定到HTML属性上的一种方式。在Vue 3中，我们可以使用`v-bind`指令或简写的冒号来进行属性绑定，HTML 属性中的值应使用 v-bind 指令。例如：

上述代码中，我们将`imageSrc`变量的值绑定到`src`属性上，以动态地加载图片。

代码示例：

<style>    .classSteveRocket{        background-color: #7030AB;        color: #ffffff;    }</style><body><p>author:<b>SteveRocket</b></p><p>WeChat:<a href="https://mp.weixin.qq.com/s/0yqGBPbOI6QxHqK17WxU8Q">https://mp.weixin.qq.com/s/0yqGBPbOI6QxHqK17WxU8Q</a></p><label for="r1">修改颜色</label><input type="checkbox" v-model="isShow" id="r1"><br><br><div v-bind:class="{'classSteveRocket': isShow }">    v-bind:class 指令</div></body><script>    const VueApp = {        data() {            return {                isShow: false,                isDisable: null,                isDefine: undefined            }        }    }    Vue.createApp(VueApp).mount('body')</script>

输出结果

对于布尔属性，常规值为 true 或false，如果属性值为 null 或 undefined，则该属性不会显示出来。

以上代码中如果 isButtonDisabled 的值是 null 或 undefined，则 disabled属性甚至不会被包含在渲染出来的 <button> 元素中。

表达式

在Vue 3中，我们完全可以在模板中使用JavaScript表达式来进行计算和逻辑操作。表达式要包含在双花括号中`{{}}`。例如：

上述代码中，我们对`num1`和`num2`进行相加的计算，并将结果插入到`<p></p>`标签中。

代码示例

<div id="steverocket">    Vue.js 都提供了完全的 JavaScript 表达式支持<br>    算术表达式：{{ 11 + 22 }}<br>    布尔表达式：{{ ok ? 'Yes' : 'No' }}<br>    字符串拆分翻转：{{message.split(' ').reverse().join(' ')}}<br>    <div v-bind:id="'list-'+id">SteveRocket Study Vue3</div>
    表达式会在当前活动实例的数据作用域下作为 JavaScript 被解析。需要注意的是：每个绑定都只能包含单个表达式，所以下面的例子都不会生效:<!--    这是语句，不是表达式，会报错--><!--    {{ var name = 'steverocket'}} --><!--    流控制也不会生效，请使用三元表达式--> <!--    {{ if(ok) {return message } }} -->
    <p>{{ message }}</p>    <button v-on:click="reverseMessage">翻转字符串</button>

</div></body><script>    const app = Vue.createApp(        {            data() {                return {                    ok: true,                    message: "my name is steverocket",                    id: 100                }            },            methods: {                reverseMessage(){                    this.message = this.message.split(' ').reverse().join(' ');                }            }        }    ).mount("#steverocket");</script>

输出结果

参数

参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：

<body><p>author:<b>SteveRocket</b></p><p>WeChat:<a href="https://mp.weixin.qq.com/s/0yqGBPbOI6QxHqK17WxU8Q">https://mp.weixin.qq.com/s/0yqGBPbOI6QxHqK17WxU8Q</a></p>
<p><a v-bind:href="url" v-on:click="isClick">微信公众号：CTO Plus</a></p>
</body><script>    const blogUrl = 'https://mp.weixin.qq.com/s/V5Axn-ZWi22ubh5Jiocb9g'
    const VueApp = {        data() {            return {                url: blogUrl            }        },        methods: {            isClick() {                console.log("超链接" + blogUrl + "被点击，即将跳转");            }        }    }    Vue.createApp(VueApp).mount('body')</script>

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

点击后的响应效果

另一个例子是 v-on 指令，它用于监听 DOM 事件：

在这里参数是监听的事件名。

修饰符

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on指令对于触发的事件调用 event.preventDefault()：

用户输入

在 input 输入框中我们可以使用v-model 指令来实现双向数据绑定：

<body><p>author:<b>SteveRocket</b></p><p>WeChat:<a href="https://mp.weixin.qq.com/s/0yqGBPbOI6QxHqK17WxU8Q">https://mp.weixin.qq.com/s/0yqGBPbOI6QxHqK17WxU8Q</a></p><br/><p>{{ message }}</p><input v-model="message"/></body><script>    const VueApp = {        data() {            return {                message: "公众号：CTO Plus"            }        }    }    Vue.createApp(VueApp).mount('body')</script>

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

输出结果

我们通过在上面的输入框中输入内容，段落中的内容会随之而改变。

按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。

总结

Vue 3的模板语法提供了一种简洁、直观的方式将数据渲染到DOM中。我们可以使用插值和表达式进行文本插值和属性绑定，使用指令进行条件渲染、列表渲染和事件绑定等功能，其中，插值表达式用于将动态数据绑定到模板中，指令用于处理DOM元素的属性、事件和样式，条件渲染和列表渲染则用于根据条件来动态地展示和处理数据。

通过掌握和运用Vue3的模板语法，开发者可以轻松构建复杂的用户界面，提高开发效率和代码质量。让我们一起充分发挥Vue3的优势，构建出令人满意的应用程序吧！

后面的文章，我将介绍Vue模板的过滤器，使用过滤器对数据进行格式化，计算属性和监听器用于处理数据的计算和响应。这些特性使得Vue开发更加灵活和高效，帮助我们构建出优雅而功能强大的用户界面。

下面的文章将分别介绍：

Vue3进阶：条件语句的介绍和编码使用详解（附代码与群资料）
Vue3进阶：循环语句的介绍和编码使用详解（附代码与群资料）
Vue3进阶：组件的介绍、使用详解和代码实战案例
大前端专栏

https://blog.csdn.net/zhouruifu2015/category_5734911.html

更多精彩，关注我公号，一起学习、成长

CTO Plus

一个有深度和广度的技术圈，技术总结、分享与交流，我们一起学习。涉及网络安全、C/C++、Python、Go、大前端、云原生、SRE、SDL、DevSecOps、数据库、中间件、FPGA、架构设计等大厂技术。每天早上8点10分准时发文。

306篇原创内容

公众号