Vue 模板语法

Vue 模板语法有两大类：插值语法、指令语法

插值语法

功能：用于解析 标签体 内容
写法：{{msg}}，这里msg是 js表达式 ，且可以直接读取到data中的所有属性

插值语法一般在标签体中使用，如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>

<div id="root">
    <h2>你好 {{msg}}</h2>
</div>

<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            msg: 'Vue',
        }
    })
</script>

</body>
</html>

指令语法

功能：用于解析标签（如：标签属性、标签体内容、绑定事件）
写法：

Vue 中有很多指令，这里用v-bind举例

v-bind:href="msg" 简写为 :href="msg"，这里msg是 js表达式 ，且可以直接读取data中的所有属性。

指令语法一般在标签中使用，如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>

<div id="root">
    <a :href="rul">花开富贵鸟的博客</a>
</div>

<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            rul: 'https://www.cnblogs.com/barwenyan/'
        }
    })
</script>

</body>
</html>

posted @ 2022-03-30 15:13 春暖花开鸟阅读(52) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue 内置指令 v-text

· Vue 内置指令 v-html

· Vue模板语法

· 03-Vue核心-模板语法

· Vue的模板语法

阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？