Vue学习笔记3：模版语法

提辖鲁

已于 2022-06-08 20:19:16 修改

阅读量200

点赞数

CC 4.0 BY-SA版权

分类专栏： Web # Vue.js 文章标签： vue.js javascript 前端

于 2022-02-08 19:56:51 首次发布

本文链接：https://blog.csdn.net/lj402159806/article/details/122830242

Web 同时被 2 个专栏收录

37 篇文章

订阅专栏

Vue.js

10 篇文章

订阅专栏

模版语法

插值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        #id_red {
            color: red;
            font-size: 50px;
        }

        .clz_blue {
            color: blue;
            font-size: 50px;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- "Mustache"语法文本插值 -->
    <p>Message: {{msg}}</p>
    <!-- 使用v-once指令插值 数值不会更新 -->
    <p v-once>v-once Message: {{msg}}</p>

    <!-- 使用v-html指令插值 解释为html代码 -->
    <p>Using v-html directive: <span v-html="rawHtml"></span></p>
    <!-- 使用双大括号插值 解释为普通文本 -->
    <p>Using mustaches: {{ rawHtml }}</p>

    <!-- 使用v-bind指令 响应式的更新HTML attribute -->
    <div v-bind:id="id_color">v-bind:id</div>
    <div v-bind:class="clz_color">v-bind:class</div>
    <!-- 对于布尔属性 如果值为null、undefined或false则不会渲染disabled属性 -->
    <button v-bind:disabled="isButtonDisabled">Button</button>

    <!-- 双大括号支持JS表达式 -->
    <p>{{ number + 1 }}</p>
    <!-- 使用三元表达式 不能使用if else -->
    <p>{{ 1 === 1 ? 'YES' : 'NO' }}</p>
    <p>{{ message.split('').reverse().join('') }}</p>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "hi vue",
            rawHtml: '<span style="color:red">this is should be red</span>',
            id_color: 'id_red',
            clz_color: 'clz_blue',
            isButtonDisabled: false,
            number: 10,
            ok: 1,
            message: "vue"
        }
    });

    setTimeout(function () {
        vm.msg = "oh no vue";
    }, 3000)
</script>
</body>
</html>

在这里插入图片描述

指令与缩写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令与缩写</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!-- 使用v-if指令来插入或移除p元素 -->
    <p v-if="seen">现在你看到我了</p>

    <!-- v-bind与v-on 能使用":"接收参数  -->
    <!-- :href 表示将该元素的href attribute与url的值绑定 -->
    <a v-bind:href="url">模版语法</a>
    <!-- v-bind缩写 可以直接省略前面的v-bind -->
    <a :href="url">模版语法</a>

    <!-- v-on指令 用于监听DOM事件 -->
    <!-- v-on:click 表示监听该元素的click事件 -->
    <div v-on:click="click1">
        <!-- 修饰符 (modifier) 是以半角句号 . 指明的特殊后缀 -->
        <!-- .stop 表示阻止点击事件继续传递(阻止传递到click1) -->
        <!-- v-on缩写 使用@代替v-on-->
        <div @click.stop="click2">
            点击显示/隐藏
        </div>
    </div>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            seen: false,
            url: "https://cn.vuejs.org/v2/guide/syntax.html#%E6%8C%87%E4%BB%A4"
        },
        methods: {
            click1: function () {
                alert("on click 1");
            },
            click2: function () {
                this.seen = !this.seen;
            }
        }
    });
</script>
</body>
</html>

在这里插入图片描述