Vue学习第一天，指令

2019-04-26 本文已影响0人 coderymy

三个指令

v-cloak

使用v-cloak能解决插值表达式闪烁的问题，也就是在网络不好的时候并没有完全加载该界面的时候，可能会显示成{{msg}}。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <p v-cloak>{{msg}}</p>
    </div>
<script>
    var s=new Vue({
        el:"#app",
        data:{
            msg:"哈哈哈"
        }
    })
</script>
</body>
</html>

v-text

使用意义在于可以直接显示数据，在没有获取数据时候，可以显示标签中的数据

<p v-text="msg"></p>

v-html

可以将html进行转义，也就是说，如果数据是一段html代码，他可以执行该段html代码

    <div id="app">
        <p v-html="msg2"></p>
    </div>
<script>
    var s=new Vue({
        el:"#app",
        data:{
            msg2:"<h1>我是H1标签，我很大</h1>"
        }
    })

v-bind

是Vue中提供的用于绑定属性的指令，所谓的绑定属性就是可以在属性中获取对应的变量值，而不是将属性中所绑定的变量当做字符串

<div id="app">
    <span>
        <input type="button" value="按钮" v-bind:title="mytitle">
    </span>
</div>
<script>
    var app1=new Vue({
        el:"#app",
        data:{
            mytitle:"这是我们自己定义的一个Title"
        }
    })
</script>

v-bind:value="mytitle"

可以给某个标签中的某个属性绑定值

还可以进行变量的处理，如字符串的拼接

v-bind:title="mytitle+‘123’"

这样可以显示成字符串+上一个变量，也就相当于js中的字符串拼接

v-bind的简写形式“：”

v-on

是用来绑定事件的机制

<div id="app">
    <button v-on:click="btn" >按钮</button>
</div>
<script>
    var app=new Vue({
        el:"#app",
        methods:{
            btn:function () {
                alert("hello!!!")
            }
        }
    })
</script>

注意！！！

这个地方的methods，注意后面的s，注意后面的s，注意后面的s

还有一些其他的事件，如鼠标覆盖事件：mouseover等等，都可以使用同样的方法

注意点

v-text和v-cloak的区别

默认前者没有闪烁问题
后者可以进行数值和需要的数据的拼接，但是前者会替换标签中的数据，从而覆盖标签中原本的内容