vue指令

v-text（写在标签内部）简写{{}}

这个指令的作用是：设置标签的内容（textContent）

默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容

内部支持写表达式

 

v-html(写在标签内部)

这个指令的作用是：设置元素的innerHTML

内容中有HTML结构会被解析为标签

v-text指令无论内容是什么，只会被解析为文本

解析文本使用v-text，需要解析HTML结构使用v-html

 

v-no

  • 作用是：为元素绑定事件

  • 事件名不需要写on

  • 指令可以简写为@

  • 绑定的方法定义在methods属性中

  • 方法内部通过this关键字可以访问定义在data中的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>data:shiyi</title>
</head>
<body>
    <div id="app">
        <input type="button" value="v-no指令" v-on:click="doIt"><!--单击生效-->
        <input type="button" value="v-no指令" v-on:dblclick="doIt">  <!--双击生效-->
        <input type="button" value="v-no指令" v-on:mouseenter="doIt">  <!--鼠标放到上面就生效生效-->
        <input type="button" value="v-no指令" @click="doIt"> <!--@等于v-on:-->>
        <h1 @click="changeFood">{{food}}</h1>  
    </div>
    <!--导入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            food:"成绩单"
        },
        methods:{        //函数就是这个样子，methods不变，function不变，
            doIt:function(){
                alert("做It");    //显示这句话
            },
            changeFood:function(){
                console.log(this.food);    //显示
            //    this.food+="完蛋"  //点一下加一个完蛋
            }
        }
    })
</script>

 

 

 

v-show指令的作用是

  • 根据真假切换元素的显示状态

  • 原理是修改元素的display，实现显示隐藏

  • 指令后面的内容，最终都会解析为布尔值

  • 值为true元素显示，值为false元素隐藏

  • 数据改变之后，对应元素的显示状态会同步更新

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>data:shiyi</title>
</head>
​
<div id="app">
    <img v-show=isShow src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/05/02/ChMkJ1bxAUOIT8yNAAUogt9CQ0YAAOTVAGAWQkABSia466.jpg" alt="">
    <input type="button" value="是否显示图片" @click="changeIsShow">
    <img v_show="age>=18" src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/05/02/ChMkJ1bxAUOIT8yNAAUogt9CQ0YAAOTVAGAWQkABSia466.jpg" alt="" >
    <input type="button" value="累加一" @click="addAge">
</div>
 <!--导入vue-->
 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
​
 <script>
     var vm = new Vue({
         el:"#app",
         data:{
                isShow:false,
                age:15
         },
         methods:{
            changeIsShow:function(){
              //  changeIsShow=!changeIsShow;
              this.isShow=!this.isShow;
            },
            addAge:function(){
                this.age++;
            }
         }
     })
 </script>

 

 

v-if

  • 作用是：根据表达式的真假切换元素的显示状态

  • 本质是通过操作dom元素来切换显示状态

  • 表达式的值为true，元素存在于dom树中，为false从dom树移除

  • 频繁的切换v-show，反之使用v-if，前者的切换消耗小

 

 

v-bind(v-bind:属性名=表达式)

(这是绑定属性，v-on是事件绑定)

设置元素的属性（如：src（图片地址），title（设置鼠标悬停的文本），class（类））

  • 作用是为元素绑定属性

  • 完整的写法是v-bind:属性名

  • 简写的话可以直接省略v-bind，只保留:属性名

  • 需要动态的增删class建议使用对象的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
    <style>
        .active{
            border: 1px solid rgb(153, 0, 255);
        }
    </style>
<!--上面是将图片外面加一圈框-->
</head>
<div id="app">
    <!-- <img v-bind:src="imgSrc" alt="" v-bind:class="isActive?'active':''" @click="imgSt"> -->
    <img v-bind:src="imgSrc" alt="" v-bind:class="{active:isActive}" @click="imgSt">
<!--推荐使用第二种，对象的形式,active函数名是否存在，取决于isActive-->>
<!--第一种是三元表达式比较繁琐，不适合用-->>
    <br>
    <img v-bind:src="imgSrc" v-bind:title="imgTitle+'!!!'">  <!--字符串拼接，双括号里面只可以是单括号-->
</div>
​
​
​
 <!--导入vue-->
 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            imgSrc:"http://i3.sinaimg.cn/ent/m/f/2012-08-30/U6697P28T3D3726845F329DT20120830174239.jpg",
            imgTitle:"蝙蝠侠",
            isActive:false
        },
        methods:{
            imgSt:function(){
                this.isActive=!this.isActive;
            }
        }
    })
</script>

 

v-for

  • 作用是：根据数据生成列表结构

  • 数组经常和v-for结合使用

  • 语法是（item,index）in 数据

  • item和index可以结合其他指令一起使用

  • 数组长度的更新会同步到页面上，是响应式的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
</head>
<div id = "app">
    <ul>
        <li v-for="(item,index) in arr">
          {{index+1}}  这是:{{item}}
        </li>
    </ul>
    <!--ul和li这是无序的列表-->
    <h1 v-for="happer in food" v-bind:title="happer.name">
        {{happer.name}}
    </h1>
    <input type="button" value="增加" @click="add" >
    <input type="button" value="移除" @click="removn" >
</div>
</div>
​
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            arr:["贵州","贵阳","铜仁","思南"],
            food:[
                {name:"哈哈哈"},
                {name:"嘿嘿嘿"}
            ]     
        },
        methods:{
            add:function(){
                this.food.push({name:"啦啦啦"})  //增加一个对象，这里对象写死了
            },
            removn:function(){
                this.food.shift();  //移除，从上面，或者左边开始
            }
        }
    })
</script>

 

v-no补充

  • 事件绑定的方法写成函数调用的形式，可以传入自定义参数

  • 定义方法时需要定义形参来接收传入的实参

  • 事件后面跟上.修饰符可以对事件进行限制

  • .enter可以限制触发的按键为回车

  • 事件修饰符有多种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>data:shiyi</title>
</head>
<body>
    <div id="app">
        <input type="button" value="v-no单击指令" v-on:click="doIt(666,'老铁')"><!--单击生效-->
        <input type="text" value="" v-on:keyup.enter="changeFood">
    </div>
    <!--导入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            food:"成绩单"
        },
        methods:{       
            doIt:function(p1,p2){
                alert("做It");   //这是弹窗
                console.log(p1);//这是在元素那个显示
                console.log(p2)
            },
            changeFood:function(){
               alert("哈哈哈哈");
            }
        }
    })
</script>
 
posted @ 2022-08-01 08:23  锦书南辞  阅读(18)  评论(0)  编辑  收藏  举报