第3天 | 14天搞定Vue3.0，Vue核心语法(必看)

myzbx 2025-01-26 23:28 41 浏览

想学一门编程语言，就要先整明白它的语法规则。Vue使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层组件实例的数据。所有Vue的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML解析器解析。

3.1 文本插值

数据绑定最常见的形式就是使用双大括号{{}}的文本插值，如果你要用不常见的，那可用<span v-text=""></span>的方式。在Vue中，带有v-前缀的特殊属性，称为指令。

无论选择哪一个插值方式绑定到组件(HTML标签)上，在组件实例上的值发生了改变，插值处的内容都会更新，这便是数据驱动的方式。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue3.0核心语法</title>
    <script src="vue.global.js"></script>
</head>
<body>
<div id="hello">
    <input id="name" v-model="msg" placeholder="输入文本内容"/>
    <p>用双大括号实现文本插值：{{ msg }}</p>
    <p>用v-text指定实现插值：<span v-text="msg"></span></p>
</div>

<script>
    // 第1步：data数据；第2步：vue实例，第3步：绑定元素
    Vue.createApp({
        data() {
            return {
                msg: ''
            }
        }
    }).mount("#hello")
</script>
</body>
</html>

输出结果

3.2 原始HTML

在开发过程中，有时会输出有格式的动态内容，比如输出带颜色文本。如果用插值的方式，输出的为文本内容，显然满足不了要求。这时就要用到v-html指令了。

温馨提醒：原始HTML，尽量不要用在输入上，因为它很容易导致 XSS 攻击。XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页中。

<div id="vh">
    <p>文本插值结果: {{ msg }}</p>
    <p>原始HTML结果: <span v-html="msg"></span></p>
</div>
<script>
    // 第1步：data数据；第2步：vue实例，第3步：绑定元素
    Vue.createApp({
        data() {
            return {
                msg: '<span style="color: red">老陈说编程，真酷.</span>'
            }
        }
    }).mount("#vh")
</script>

输出结果

3.3 属性绑定

在Vue中，对HTML属性的绑定，采用v-bind(可缩写为":")指令，对事件的绑定，采用v-on(可缩写为"@")指令。这里说下v-bind的应用，v-on在讲事件时再细讲。

你可能会奇怪，绑定属性有什么用？我随便举一个例子，你就秒懂了。

当美女程序员看我的文章时，系统就给她推荐有漂亮图表的文章链接地址；当男性程序员看我的文章时，系统就给推荐有漂亮MM的文章链接地址，以此来提高阅读量。

<!-- 完整语法 -->
<a v-bind:href="url"> ... </a>

<!-- 缩写 -->
<a :href="url"> ... </a>

输出结果(自己点一下链接)

好了，有关Vue3.0的核心语法内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。

一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注今日头条：老陈说编程。分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。

#前端##Vue##程序员##JavaScript##Web#

CSS 简写背景属性

上一篇：深入了解 Flex 属性（flex-flow属性）
下一篇：10条影响CSS渲染速度的写法与建议

第3天 | 14天搞定Vue3.0，Vue核心语法(必看)

3.1 文本插值

3.2 原始HTML

3.3 属性绑定

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

8.7k star，一款超炫酷的动态可视化大屏项目

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿