黄阿信的个人博客

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);
        }
    }
});

Vue指令