vue指令

最新推荐文章于 2024-10-04 00:46:18 发布

陈小同学

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量77

点赞数

文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/xiaoChenPengYou/article/details/120398343

版权

vue指令

本文就简单的说一下一些vue的指令。

本文只是简单介绍几个指令。不做详细介绍。

v-modal指令

v-modal：可以双向的传输数据。可以实现页面的数据和后台的数据联通。

<!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>
</head>

<body>
    <div id="NC">
        <input type="text" v-modal="num"/>
        <!-- 页面显示num的数据 18 -->
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    // 实例化Vue对象
    new Vue({
        // 控制区域
        el: "#NC",
        // 存放数据的地方
        data: {
            num: "18",
        },
        // 存放方法的地方
        methods: {},
    })
</script>

</html>

这时候页面上的数据只要发生改变后，后台的数据就会跟着发生改变。

v-clock指令

v-cloak：配合css使用[v-cloak]:{display: none}可以使没有渲染的元素隐藏，等待渲染完之后再显示。能够解决差值表达式闪烁的问题。

例：在网速不理想的状态下，一开始是会显示{{name}}内容，直到加载完成才会显示name代替的值。

解决的方法就是使用v-cloak指令就可以解决了。通过v-cloak使name隐藏，直到后台把数据加载完后再显示出来。

<!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="NC">
        <!-- 
			页面数据加载完之后显示 我是张三
			要记得还有style样式要写上
		-->
        <p v-colak>{{name}}</p>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    // 实例化Vue对象
    new Vue({
        // 控制区域
        el: "#NC",
        // 存放数据的地方
        data: {
            name: "我是张三",
        },
        // 存放方法的地方
        methods: {},
    })
</script>

</html>

v-text指令

v-Text：相当于innerText，可以将指定的值渲染到元素中，会覆盖但是不会解析代码。

<!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>
</head>

<body>
    <div id="NC">
        <p>{{num}}</p>
        <p v-text="num"></p>
        <!-- 页面显示num的数据 18 -->
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    // 实例化Vue对象
    new Vue({
        // 控制区域
        el: "#NC",
        // 存放数据的地方
        data: {
            num: "18",
        },
        // 存放方法的地方
        methods: {},
    })
</script>

</html>

上述代码的结果会覆盖原本内容区域的数值。

这个是和插值表达式是有一些区别的：

使用v-text是不存在表达式闪烁的问题的，因为这是直接放在属性上面的。
插值表达式只会替换自己的这个占位符，并不会把整个元素的内容清空。v-text指令会覆盖元素中原本的内容。

v-html指令

v-html：相当于innerHtml，会覆盖切且会解析代码

<!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>
</head>

<body>
    <div id="NC">
        <p>{{read}}</p>  <!-- 显示结果（文本）：<h1>我是h1标签</h1> -->
        <p v-text="read"></p>  <!-- 显示结果（文本）：<h1>我是h1标签</h1> -->
        <p v-html="read"></p>  <!--显示结果（元素）：我是h1标签 -->
        <!-- 页面显示num的数据 18 -->
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    // 实例化Vue对象
    new Vue({
        // 控制区域
        el: "#NC",
        // 存放数据的地方
        data: {
            read: "<h1>我是h1标签</h1>",
        },
        // 存放方法的地方
        methods: {},
    })
</script>

</html>

v-html与v-text的区别：

v-text指令是纯文本，不会解析代码。而v-html指令是可以解析代码，翻译为html元素。

v-bind指令

v-bind指令是用于绑定属性。

注意：

给属性加了v-bind之后，属性值里的整体内容可以是表达式，也就是说，v-bind的属性值里，可以写合法的 js 表达式。

v-bind有两种表达形式：

直接使用v-bind:属性=""/v-bind=""。
还有一种就是使用冒号形式:属性=""。

<!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>
</head>

<body>
    <div id="NC">
        <input value="num + num1" /> <!-- 页面显示 num + num1 -->
        <input :value="num + num1" /> <!-- 页面显示 20 -->
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    // 实例化Vue对象
    new Vue({
        // 控制区域
        el: "#NC",
        // 存放数据的地方
        data: {
            num: 10,
            num1: 10
        },
        // 存放方法的地方
        methods: {},
    })
</script>

</html>

我们用v-bind给value这个属性绑定了值，此时这个值是一个变量。可以使用任何正确的JavaScript的表达式。

v-on指令

v-on：事件绑定机制

v-on有两种表达形式：

直接使用v-on:事件=""。
还有一种就是使用艾特形式 @:事件=""。

v-on的常用事件

v-on 提供了一些事件。

v-on:click
v-on:keydown
v-on:keyup
v-on:mousedown
v-on:mouseover
v-on:submit

使用v-on就需要使用到了方法。接下来就简单的演示一下效果。

<!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>
</head>

<body>
    <div id="NC">
        <h1>{{name}}</h1>
        <button @:click="fn()">点击换字</button>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    // 实例化Vue对象
    new Vue({
        // 控制区域
        el: "#NC",
        // 存放数据的地方
        data: {
            name: "你好",
        }
        // 存放方法的地方
        methods: {
        	fn(){
        		this.name = "欢迎"
            }
        },
    })
</script>

</html>