要么改变世界,要么适应世界

Vue指令

2020-03-21 10:31:00
102
目录

v-text

设置标签的文本值(textContent)

var app = new Vue({
    el: "#app",
    data: {
        message: "hello",
    }
});
<div id="app">
    <h2 v-text="message">标题</h2>
    <h2>{{message}}标题</h2>
</div>

我们会发现,使用v-text设置文本的话,标签内部的文本值会被完全地覆盖

v-html

设置标签地innerHTML

注意当v-html的值是普通的字符串的时候,v-html和v-text的用法没有区别,但当v-html的值是一个标签的语法时,这二者的用法就有了区别

 <div id="app">
    <p v-html = "content1"></p>
    <p v-text = "content1"></p>
    <p v-html = "content2"></p>
    <p v-text = "content2"></p>
 </div>
var app = new Vue({
    el: "#app",
    data: {
        content1: "hello",
        content2: "<a href='https://yalexin.gitee.io/'>超链接</a>",
    }
});

图片

可以发现,v-html成功地渲染成了标签,但是前提是v-html所在节点能够拥有子节点。

v-on

为元素绑定事件

我们可以从官方的文档中可以得知,Vue支持的事件非常多,用法都是类似下面的情况

<div id="app">
    <!-- 格式是   v-on:+事件名+="需要绑定的方法" -->
    <input type="button" v-on:click="demo1_fun" value="事件绑定-全写">
    <!-- 格式是   @+事件名+="需要绑定的方法" -->
    <input type="button" @click="demo2_fun" value="事件绑定-简写">
</div>
var app = new Vue({
    el: "#app",
    methods: {
        demo1_fun:function(){
            alert("demo1_fun");
        },
        demo2_fun:function(){
            alert("demo2_fun");
        },
        demo3_fun:function(){
            alert("demo3_fun");
        },
    },
});

假如需要传递参数,只需要v-on处提供实参即可

@click="demo2_fun(p1,p2,p3,...)"

该指令还可以配合事件修饰符来使用,一个简单的例子就是,我们希望按下回车键时触发事件:

<input type="text" @keydown.enter="do_sh">

关于更多的用法,可以参照官方文档

事件名不需要写on,绑定的方法定义在methods属性中,而且方法内部通过this关键字可以访问定义在data中的数据。

v-show:

根据真假切换元素的显示状态,原理是修改元素的display,实现显示和隐藏,指令的值最终被解析为布尔值(true显示,false隐藏)。

<div id="app">
    <button @click="change_show">click-me</button>
    <p v-show="isShow">这是一段测试的文字</p>
</div>

var app = new Vue({
    el: "#app",
    data: {
        isShow: false,
    },
    methods: {
        change_show: function () {
            this.isShow = !this.isShow;
        }
    },
});

v-if

根据真假切换元素的显示状态,原理是操纵dom元素来切换显示状态,效果跟v-show是一样的。

<div id="app">
    <button @click="change_show">click-me</button>
    <p v-if="isIf">这是一段测试的文字</p>
</div>

var app = new Vue({
    el: "#app",
    data: {
        isIf: false,
    },
    methods: {
        change_show: function () {
            this.isIf = !this.isIf;
        }
    },
});

图片

图片

即当v-if的值是true时,该元素在存在于div标签中,否则将元素移除,那我们如何进行选择? 一般来说, v-if 有	更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;	如果在运行时条件不太可能改变,则使用 v-if 较好。 

v-bind

为元素绑定属性值

<div id="app">
    <img v-bind:src="img_src" v-bind:title="title1">
    <!-- 简写 -->
    <img :src="img_src" :title="title2">
</div>

var app = new Vue({
    el: "#app",
    data: {
        isShow: false,
        img_src:"../study/images/2.jpg",
        title1:"图片一",
        title2:"图片二",
    },
});

v-for

根据数据源生成列表结构,语法是(item,index) in 数据源:

<div id="app">
    <ol>
        <li v-for="item in demo_array">
            每天做的事情:{{item}}
        </li>
    </ol>
</div>

var app = new Vue({
    el: "#app",
    data: {
        demo_array:["写bug","查bug","改bug"]
    },
});

图片

v-for不仅仅可以放进li标签中,还可以放进其他中,而且数据源也不仅限于普通数组,对象性数组也是可以的,如:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p v-for="item in students">
            学生姓名:{{item.name}}
        </p>
    </div>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                students: [
                    { name: "张三" },
                    { name: "李四" },
                    { name: "王五" },
                ],
            }
        });
    </script>
</body>

</html>

v-model

便捷地设置和获取表单元素的值,它可以将某个特定的值和表单元素的值相关联,这种关联是双向的:

<div id="app">
    <input type="text" v-model="message" @keydown.enter="setNewMsg">
    <p>{{message}}</p>
</div>

var app = new Vue({
    el: "#app",
    data: {
        message: "",
    },
    methods:{
        setNewMsg:function(){
            this.message = "通过vue改变message";
            console.log(66);
        }
    }
});

历史评论
开始评论