vue学习笔记2----模板语法

最新推荐文章于 2024-01-19 13:59:42 发布

lazy91

最新推荐文章于 2024-01-19 13:59:42 发布

阅读量223

点赞数

分类专栏： Vue 文章标签： vue.js 学习前端

本文链接：https://blog.csdn.net/qq_59954212/article/details/126318848

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Vue模板语法

Vue模板语法有2大类：
1.插值语法：
功能：用于解析标签体（起始标签与结束标签之间的部分）。
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
2.指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
举例：v-bind:href="xxx" 或简写为 :href="xxx"，xxx同样要写js表达式，且可以直接读取data中的所有属性。
备注：Vue中有很多的指令，且形式都是：v-????，以v-bind为例。

插值语法与指令语法

<body>
    <div id="root">
        <h1>插值语法</h1>
        <h3>hi,{{name}}</h3>
        <hr/>
        <h1>指令语法</h1>
        <!-- --原始写法-- -->
        <a href="http://baidu.com">点击跳转到百度1-原始</a><br/>
        <!-- --错误写法，最初可以用“***”，现在已经被淘汰，需要使用v-bind-- -->
        <a href="url">点击跳转到百度2-错误</a> <br/>
        <a href={{url}}>点击跳转到百度3-错误</a> <br/>
        <!-- --vue的写法，使用v-bind-- -->
        <a v-bind:href="url">点击跳转到百度4-vue使用v-bind</a><br/>
        <!-- v-bind的省略写法 -->
        <a :href="url">点击跳转到百度5-省略</a>
    </div>

    <script>
        Vue.config.productionTip = false

        new Vue({
            el:'#root',
            data:{
                name:'jack',
                url:'http://baidu.com'
            }
        })
    </script>
</body>

执行结果：

v-bind 指令

该指令用于绑定元素的属性，例如href。

如果绑定的值是 null 或 undefined，那么该 attribute 将不会被包含在渲染的元素上。

对于布尔属性(它们只要存在就意味着值为 true)，v-bind 工作起来略有不同，在这个例子中：

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

如果 isButtonDisabled 的值是 true，那么 disabled 属性将被包含在内。如果该值是一个空字符串，它也会被包括在内，与 <button disabled=""> 保持一致。对于其他 false 的值，该 attribute 将被省略。

在v-bind：之后的“***”，***会被作为js表达式来执行。

v-bind: 可以简写为 :

以下两行代码，效果相同。

<a v-bind:href="url">点击跳转到百度4</a><br/>
<a :href="url">点击跳转到百度5</a>

属性产生冲突

如果有两个name（Jack和百度），后来居上，所有用到name的地方都会显示百度。

可以采用多级结构。

<body>
    <div id="root">
        <h1>插值语法</h1>
        <h3>hi,{{name}}</h3>
        <hr/>
        <h1>指令语法</h1>
        <!-- 有两个name（Jack和百度）产生了冲突 -->
        <a :href="school.url">点击跳转到{{school.name}}</a>
    </div>

    <script>
        Vue.config.productionTip = false

        new Vue({
            el:'#root',
            data:{
                name:'jack',
                school:{
                    name:'百度',
                    url:'http://baidu.com'
                }
            }
        })
    </script>
</body>