Vue常用指令：v-text、v-html、v-model、v-for、v-if、v-else、v-show、v-bind、v-bind:class、computed、watch、console

时间：2025-01-19 07:34:08

一.指令

什么是指令？
指令 (Directives) 是带有 v- 前缀的特殊属性。例如在入门案例中的v-model，代表双向绑定。

二、v-text和v-html

使用v-text和v-html指令来替代 {{}}
说明：
v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染在这里插入图片描述vue_day1/03_v：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo3</title>
    <script src="node_modules/vue/dist/"></script>
</head>
<body>
<div id="app3">

    v-text:<span v-text="msg"></span><br>
    v-html:<span v-html="msg"></span><br>

</div>
<script type="text/javascript">
    var app1=new Vue({
        el:"#app3",   //el即element，要渲染的页面元素
        data:{
            msg:"<h2>hello vue!</h2>"
        },
    });
</script>
</body>
</html>

效果：
在这里插入图片描述

三、v-model

在这里插入图片描述
vue_day1/04_model.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo4</title>
    <script src="node_modules/vue/dist/"></script>
</head>
<body>
<div id="app4">

    <input type="checkbox" value="java" v-model="language">Java1<br>
    <input type="checkbox" value="php" v-model="language">php1<br>
    <input type="checkbox" value="python" v-model="language">python1<br>

    <h2>
        你选择了：{{(",")}}
    </h2>
</div>
<script type="text/javascript">
    var app1=new Vue({
        el:"#app4",   //el即element，要渲染的页面元素
        data:{
            language:[]
        },
    });
</script>
</body>
</html>

效果：
在这里插入图片描述
多个 checkbox 对应一个model时，model的类型是一个数组，单个checkbox值是boolean类型
radio对应的值是input的value值 input 和 textarea 默认对应的model是字符串
select 单选对应字符串，多选对应也是数组

四、v-on（可用@代替）

v-on指令用于给页面元素绑定事件。
语法：v-on:事件名=“js片段或函数名”(就是后面可接表达式或者函数)

简写语法（常用）：
@事件名=“js片段或函数名”
例如 v-on:click=‘add’ 可以简写为 @click=‘add’

4.1 事件修饰符

在这里插入图片描述
在这里插入图片描述
代码演示上述：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo5</title>
    <script src="node_modules/vue/dist/"></script>
</head>
<body>
<div id="app5">
    <!--不使用简写-->
    <button v-on:click="num++">增加</button>
    <!--使用简写-->
    <button @click="decrement">减少</button>
    <h2>
        num={{num}}
    </h2>
    <hr>
    事件冒泡测试:<br>
    <div style="background-color:lightblue;width: 100px;height: 100px"
        @click="print1('你点击了div')">
        <button @="print1('你点击了button')">点我试试</button>
    </div>

    <br>阻止默认事件：<br>
    <a href="" @="print1('点击了baidu')">百度</a>
</div>
<script type="text/javascript">
    var app1=new Vue({
        el:"#app5",   //el即element，要渲染的页面元素
        data:{
            num:1
        },
        methods:{
            decrement(){
                this.num--;
            },
            print1(msg){
                console.log(msg)
            }
        }
    });
</script>
</body>
</html>

在这里插入图片描述

五、v-for

v-for用于对数组和对象进行遍历

  1. 语法：v-for=“item in items”
    items：要遍历的数组，需要在vue的data中定义好。
    item：循环变量

  2. 在遍历的过程中，如果需要知道数组角标，可以指定第二个参数（也可以不指定）：
    v-for="(item,index) in items"
    items：要迭代的数组
    item：迭代得到的数组元素别名
    index：迭代到的当前元素索引，从0开始。

  3. v-for除了可以迭代数组，也可以迭代对象。语法基本类似
    语法：
    v-for=“value in object”
    v-for="(value,key) in object"
    v-for="(value,key,index) in object"
    1个参数时，得到的是对象的值
    2个参数时，第一个是值，第二个是键
    3个参数时，第三个是索引，从0开始

  4. key在这里插入图片描述
    代码演示上面的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo5</title>
    <script src="node_modules/vue/dist/"></script>
</head>
<body>
<div id="app6">
    <!--不要角标遍历数组-->
    <ul>
        <li v-for="user in users">{{}}--{{}}--{{}}</li>
    </ul>
    <hr>
    <!--要角标遍历数组-->
    <ul>
        <li v-for="(user,index) in users">{{index}}--{{}}--{{}}--{{}}</li>
    </ul>
    <hr>
    <!--遍历对象-->
    <ul>
        <li v-for="(value,key,index) in person">{{index}}--{{key}}--{{value}}</li>
    </ul>
</div>
<script type="text/javascript">
    var app=new Vue({
        el:"#app6",   //el即element，要渲染的页面元素
        data:{
            users:[
                {"name":"张三干","age":18,"gender":"男"},
                {"name":"李四","age":25,"gender":"女"},
                {"name":"小王","age":78,"gender":"男"},
            ],
            // 演示遍历对象
            person:{"name":"小圆","age":56,"address":"美国"}
        }
    });
</script>
</body>
</html>

效果：
在这里插入图片描述

六、v-if、v-else和v-show

（可以实现点击按钮隐藏东西）
在这里插入图片描述v-if:顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。语法：
v-if=“布尔表达式”

当v-if和v-for出现在一起时，v-for优先级更高。也就是说，会先遍历，再判断条件。

可以使用 v-else 指令来表示 v-if 的“else 块”：
v-if和v-else是紧接的执行的，不可空行在这里插入图片描述v-show:
另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：

在这里插入图片描述
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。 v-show 只是简单地切换元素的 CSS 属性display 。

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo7</title>
    <script src="node_modules/vue/dist/"></script>
</head>
<body>
<div id="app6">
    <button @click="show=!show">点我</button>
    <!--演示v-if-->
    <h2 v-if="show">Helle world!</h2>
    <hr>
    <!--演示v-if和v-else-->
    <ul v-if="show">
        <li v-for="(user,index) in users" v-if="=='女'" style="background-color:pink">
            {{index}}--{{}}--{{}}--{{}}
        </li>
        <li  v-else style="background-color:lightblue">
            {{index}}--{{}}--{{}}--{{}}
        </li>
    </ul>
    <hr>
    <!--演示V-show-->
    <h2 v-show="show">你好！v-show</h2>

</div>
<script type="text/javascript">
    var app=new Vue({
        el:"#app6",   //el即element，要渲染的页面元素
        data:{
            show:true,
            users:[
                {"name":"张三干","age":18,"gender":"男"},
                {"name":"李四","age":25,"gender":"女"},
                {"name":"小王","age":78,"gender":"男"},
                {"name":"小红","age":17,"gender":"女"}
            ]
        }
    });
</script>
</body>
</html>

点击前效果：
在这里插入图片描述
点击后效果：
在这里插入图片描述

七、v-bind、v-bind:class(:class)(可以用：代替v-bind)

在这里插入图片描述
在这里插入图片描述

可以用:代替v-bind

因为插值表达式不能用在标签的属性中
在这里插入图片描述

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue08测试</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            color: white;
        }
        .red{background-color: red}
        .blue{background-color: blue}
    </style>
</head>
<body>
<div id="app8">
    <button @click="color='red'">红色</button>
    <button @click="color='blue'">蓝色</button>
    <div v-bind:class="color"></div>
    <hr>

    <!--更便捷方式：-->
    <button @click="bool=!bool">点击按钮切换颜色</button>
    <div :class="{red:bool,blue:!bool}"></div>
</div>
<script src="node_modules/vue/dist/"></script>
<script>
    var app=new Vue({
        el:"#app8",   //el即element，要渲染的页面元素
        data:{
           color:'red',
            bool:true
        }
    })
</script>
</body>
</html>

上面代码css值得研究，放的位置也变了
效果：
在这里插入图片描述

八、计算属性：日期转换computed

在这里插入图片描述

在这里插入图片描述
Vue中提供了计算属性(如computed)，就是来替代复杂的表达式。
计算属性本质就是方法，但是一定要返回数据。然后页面渲染时，可以把这个方法当成一个变量来使用。

代码演示：(把毫秒值转为我们看懂的日期)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue09测试</title>
    <script src="node_modules/vue/dist/"></script>
</head>
<body>
<div id="app9">
    <h2>
        computed计算方式：你的生日是：{{birth}}
    </h2>
</div>
<script type="text/javascript">
    var app=new Vue({
        el:"#app9",   //el即element，要渲染的页面元素
        data:{
            birthday:1429032123201
        },
        computed:{
            birth(){
                const date=new Date(this.birthday);
                return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+
                        date.getDate();
            }
        }
    });
</script>
</body>
</html>

效果：
在这里插入图片描述

九、watch基本和深度监控、

是到浏览器打开F12看的

在这里插入图片描述
在这里插入图片描述在这里插入图片描述

  • 基本监控：watch可以让我们监控一个值的变化。从而做出相应的反应。

  • 深度监控：
    如果监控的是一个对象，需要进行深度监控，才能监控到对象中属性的变化，例如：
    以前定义监控时，person是一个函数，现在改成了对象，并且要指定两个属性：
    deep:代表深度监控，不仅监控person变化，也监控person中属性变化
    handler：就是以前的监控处理函数

下面代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue10测试</title>
    <script src="node_modules/vue/dist/"></script>
</head>
<body>
<div id="app10">
    <input v-model="message1">
    <hr>
    <br>
    <!--下面为深度监控-->
    <input v-model=""><br>
    <input v-model=""><button @click="++">+</button>

    <h2>
        姓名为:{{}};年龄为:{{}}
    </h2>
</div>
<script type="text/javascript">
    var app=new Vue({
        el:"#app10",   //el即element，要渲染的页面元素
        data:{
            // 演示基本watch
            message1:"hello vue",
            //演示深度监控
            person:{"name":"喜洋洋","age":12}
        },
        watch:{
            message1(newValue,oldValue){
                console.log("新值："+newValue+",旧值："+oldValue);
            },
            //下面演示深度watch
            person:{
                //开启深度监控，可以监控到对象属性值的变化
                deep:true,
                //监控的处理方法,obj代表新值
                handler(obj){
                    console.log("name="+obj.name+",age="+obj.age);
                }
            }
        }
    });
</script>
</body>
</html>

效果：
你的监控也是在浏览器看的
在这里插入图片描述

相关文章