vue3模板语法

👤拔丝英语网 🕔2024/01/10 18:33 📁国外生活

ads

更多关于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>

<input v-bind:value="message">

 

在上面的例子中，`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 v-if="showContent">

        <p>显示内容</p>

</div>

 

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

 

列表渲染

 

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

 

<ul>

        <li v-for="item in items" :key="item.id">{{ item.name }}</li>

</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 指令。例如：

 

<img :src="imageSrc" alt="Image">

 

上述代码中，我们将`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，则该属性不会显示出来。

<button v-bind:disabled="isButtonDisabled">按钮</button>

 

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

 

表达式

 

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

 

<p>{{ num1 + num2 }}</p>

 

上述代码中，我们对`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 事件：

<!-- 完整语法 -->

<a v-on:click="doSomething"> ... </a>

 

<!-- 缩写 -->

<a @click="doSomething"> ... </a>

 

<!-- 动态参数的缩写(2.6.0+) -->

<a @[event]="doSomething"> ... </a>

 

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

 

修饰符

 

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

<form v-on:submit.prevent="onSubmit"></form>

 

用户输入

 

在 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


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



推荐阅读：

  • 前端开发技术栈（工具篇）：2023最新版nvm的Win/Linux安装和使用（详细） 27.8k stars

  • 前端开发技术栈（模板篇）：10款较流行的前端后台管理系统模板

  • 50+款前端高效开发辅助工具总结

  • 开源项目 | Vue进阶：总结下日常开发中关于Vue的热门开源项目

  • Vue3进阶：简化前端开发的利器，以及常用指令汇总和案例详解

最后，不少前端粉丝后台留言问加技术交流群，之前也一直没弄，所以为满足粉丝需求，现建立了一个关于前端开发相关的技术交流群，加群验证方式必须为本公众号的粉丝，群号如下：

最后编辑于：2024/1/10 拔丝英语网

admin-avatar

英语作文代写、国外视频下载

高质量学习资料分享

admin@buzzrecipe.com