Vue.js之指令的使用及MVVM框架

cloudOnSkyline

已于 2022-07-25 19:59:37 修改

阅读量118

点赞数

分类专栏： JavaScript 文章标签： vue.js

于 2022-07-09 13:44:27 首次发布

本文链接：https://blog.csdn.net/weixin_44827643/article/details/125689343

版权

JavaScript 专栏收录该内容

61 篇文章 0 订阅

订阅专栏

本文主要介绍Vue.js中常用指令的使用，包括v-cloak、v-text、v-html、v-model等，下面依次进行介绍。

1.v-cloak

vue.js会对原始页面进行编译，故页面一开始会显示出未编译的内容，之后会被迅速渲染为指定数据，由此产生了“闪动”问题。v-cloak的原理就是隐藏未编译的内容，只显示出编译之后的内容。需要规定以下样式：

 <style>
        [v-cloak] {
            display: none;
        }
    </style>

2.v-text

添加纯文本

3.v-html

可解析HTML标签

4.v-pre

跳过编译，保留原文本

5.v-once

只编译一次，之后不再具备响应式特点

6.v-model

双向数据绑定：改页面元素的值，Vue结构中的值会变化；改Vue结构中的值，页面元素的值会变化

7.v-on（可简写为@）

为元素绑定事件，可直接执行语句，也可调用相应的函数。

（1）若直接写函数名，默认第一个形参为事件对象

（2）写括号时，最后一个形参为事件对象，对应的实参固定为$event

（3）事件修饰符的使用：简化原生js的写法，stop阻止冒泡事件，prevent阻止默认事件，self指仅当操作该元素时，才会执行相应代码，冒泡或捕获不会执行。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 1.v-cloak指令：将最初未渲染好的数据隐藏，解决闪动问题-->
        <div v-cloak>{{msg+7}}</div>
        <!-- 2.v-text填充纯文本 -->
        <div v-text="msg1"></div>
        <!-- 3.v-html可解析HTML -->
        <div v-html="msg1"></div>
        <!-- 4.v-pre显示原始信息,跳过编译过程 -->
        <div v-pre>{{msg1}}</div>
        <!-- 5.v-once编译一次,不再具备响应式特点 -->
        <div v-cloak v-once>{{unchanged}}</div>
        <!-- 6.v-model双向数据绑定，表单值与数据值，一个改变，另一个就会改变 -->
        <div><input type="text" v-model="username"></div>
        <div v-text="username"></div>
        <!-- 7.v-on，事件绑定 ,可简写为@-->
        <div v-text="num"></div>
        <button v-on:click="num++">点击+1</button>
        <!-- 7.1调用函数，直接写函数名，第一个形参为事件对象 -->
        <button @click="myFunc">点击+2</button>
        <button @click="myFunc1()">点击+3</button>
        <!-- 7.2 调用函数，有参数时最后一个参数为事件对象，实参固定写为$event -->
        <button @click="myFunc2(4,$event)">点击+4 <i>addFour</i> </button>
        <button @click="myFunc3">点击+5</button>
        <!-- 8.事件修饰符：阻止冒泡(stop)和阻止默认跳转(prevent),只能点击该元素执行（self不执行冒泡和捕获） -->
        <div @click="alert(1)">
            <a href="http://www.baidu.com" @click.prevent.stop>百度</a>
        </div>
        <div @click.self="alert(1)">
            <a href="http://www.baidu.com" @click.prevent>百度</a>
        </div>
    </div>
    <script src="./vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 1,
                msg1: '<h1>1</h1>',
                unchanged: 'constant',
                username: 'zs',
                num: 0
            },
            methods: {
                myFunc() {
                    this.num += 2;
                },
                myFunc1: function() {
                    this.num += 3;
                },
                myFunc2: function(four, e) {
                    this.num += four;
                    console.log(e.target.innerHTML);
                },
                myFunc3: function(e) {
                    this.num += 5;
                    console.log(e.target.innerHTML);
                },
            }
        })
    </script>
</body>

</html>