Vue学习之模板语法(3)

最新推荐文章于 2024-05-24 16:49:34 发布

Kreuz流光

最新推荐文章于 2024-05-24 16:49:34 发布

阅读量411

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue学习学习笔记文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_44206148/article/details/121422736

Vue学习同时被 2 个专栏收录

5 篇文章

订阅专栏

学习笔记

5 篇文章

订阅专栏

本文详细介绍了Vue的模板语法，包括插值语法和指令语法。插值语法使用{{xxx}

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue的模板语法分为两大类：插值语法（双大括号表达式）和指令语法（以V开头）。

插值语法：语法: {{xxx}} ，xxx 会作为 js 表达式解析,xxx可以直接读取data里所有的属性,补充：xxx不仅可以读取data里的属性，还可以读取Vue实例对象原型链上所有属性。其实data里的数据会被存到Vue实例对象里，所以这里应该说:

模板语法能使用Vue实例化对象及其原型链上的所有属性及方法。

指令语法：

<body>
    <div id="root">
        <h1>插值语法</h1>
        <h2>你好，{{name}}</h2>
        <hr/>
        <h1>指令语法</h1>
        <a v-bind:href="url">点我去Blibili</a>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;

        new Vue({
            el:'#root',
            data: {
                name:'Jack',
                url: 'https://www.bilibili.com'
            }
        })

v-bind:是Vue里的一个指令，Vue里所有的指令都是以“v-”开头。v-bind:href = 'xxxx' ，xxxx 会作为 js 代码解析。这里url会被当做解析式，去data中寻找再赋值给href。如果在这里加上一句"v-bind:x = 'jack'",浏览器就会去data里面寻找jack，但次数data里并没有名为jack的变量或者方法，所以浏览器会报错。

这里“xxxx”会被当做js代码解析所以你在“”里写js代码是没问题的：

<a v-bind:href="Date.now()">点我去Blibili</a>

这里Date.now()会被执行，返回现在的时间戳。

v-bind:可以简写成 :

所以上诉语句可以写成:

<a :href="url">点我去Blibili</a>

data里也可以套层：

data: {
                name:'Jack',
                web: {
                    url: 'https://www.bilibili.com'
                },
            }

此时href应该写成：

：href = “web.url”

插值语法一般写在标签体里，例如<a></a><h1></h1>是标签体，两个<>中间包括的部分就是标签体里。而指令语法一般用来解析标签属性、解析标签体内容、绑定事件。

注意：data里如果有重名的key时，后者会覆盖前者。