Vue基础：Vue指令

最新推荐文章于 2022-08-15 15:38:33 发布

zmt0104

最新推荐文章于 2022-08-15 15:38:33 发布

阅读量246

点赞数

分类专栏： web前端文章标签： vue

本文链接：https://blog.csdn.net/qq_40845019/article/details/107894167

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、v-text指令

作用： 设置标签的文本值
默认写法会替换全部内容，使用差值表达式{{}}会替换指定的内容
内容支持写表达式。
在v-text中使用单引号（''）；在差值表达式中既可以使用单引号又可以使用双引号。

<body>
    <div id="app">
        <h2 v-text="message+'!!'"></h2>
        <span v-text="info+'!!'">深圳</span>
        <h3>天津：{{message+"!!"}}</h3>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "联想云",
                info: "求生欲"
            }
        })
    </script>
</body>

2、v-html

作用： 设置元素的innerHTML
内容中有html结构会被解析为标签
v-text指令无论内容是什么，只会解析成文本

<body>
   <div id="app">
       <p v-html="content"></p>
       <p v-text="content"></p>
   </div>
   <script>
       var app = new Vue({
           el: "#app",
           data: {
       // content: "百度一下，你就知道"  普通文本，v-html与v-text没有区别
       content: "<a href='https://www.baidu.com'>百度一下，你就知道</a>"
       //对于带有渲染格式的内容，使用v-html可以自动进行渲染
           }
       })
   </script>
</body>

3、v-on

3.1 基本用法

作用：为元素绑定事件
事件名不需要写on
v-on：可以简写为@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中的数据

语法：

<div id="app">
    <input type="button" value="事件绑定" v-on:事件名="方法"/>
    <!--相当于-->
     <input type="button" value="事件绑定" @事件名="方法"/>
</div>

<script>
  var app = new Vue({
    el:"#app",
    methods:{
      方法:function(){
       //逻辑
      }
    }
  })
</script>

实例：

<body>
    <div id="app">
        <!-- 绑定单击事件 -->
        <input type="button" value="v-on指令" v-on:click="doWork"/>
        <input type="button" value="v-on指令2" @click="doWork"/>
        <!-- 绑定双击事件 -->
        <input type="button" value="绑定双击事件" @dblclick="doWork"/>
        <!-- 在vue中，改变内容<==>改变数据 -->
        <input type="button" @click="changeName" value="changeName"/>
        <p>{{name}}</p>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                name: "小明",
            },

            methods:{
                doWork:function(){
                    alert("写代码");
                },

                changeName: function(){
                    console.log(this.name);
                    //通过this可以获取当前页面中data中的内容
                    this.name += "123";
                }
            }
        })
    </script>
</body>

3.2 传递自定义参数，事件修饰符

3.2.1 传递参数

<body>
    <div id="app">
      <!-- 参数传递：方法中可以写多个参数 -->
      <input type="button" value="参数传递" @click="doIt(1,'学Java')"/>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            methods:{
            //在此处获取要传递的参数
                doIt:function(parm1,parm2){
                    alert(parm1+"、"+parm2);
                },
            }
        })
    </script>   
</body>

3.2.2 绑定事件修饰符

参考：https://blog.csdn.net/qq_40845019/article/details/107894964

<body>
   <div id="app">
     <!-- 自定义事件修饰符绑定 -->
     <input type="text" @keyup.enter="sayHello"/>
   </div>
   <script>
       var app = new Vue({
           el: "#app",
               sayHello:function(){
                   alert("hello,你吃了吗？")
               }
           }
       })
   </script>
</body>

4、案例-计数器

链接：https://blog.csdn.net/qq_40845019/article/details/107894509

5、v-show

作用：根据表达值的真假，切换元素的显示与隐藏
原理是修改元素的display，实现显示与隐藏
指令后面的内容，最终都会被解析成布尔值
值为true元素显示，值为false元素隐藏。默认值为true。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-show指令</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="点击切换显示状态" @click="changeShow"/>
        <img src="img/9.jpg" v-show="isShow"/>
        <input type="button" value="年龄递增" @click="myAge"/>
        <img src="img/9.jpg" v-show="age>18"/>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: false,
                age: 18
            },
            methods: {
                changeShow: function(){
                    this.isShow = !this.isShow;
                },
                myAge: function(){
                    this.age++;
                }
            }
        })
    </script>
</body>
</html>

6、v-if

在这里插入图片描述

<body>
    <div id="app">
        <input type="button" value="v-if切换显示" @click="toggleIsShow"/>
        <p v-if="isShow">显示一行- v-if指令</p>
        <p v-show="isShow">显示一行- v-show指令</p>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: false,
            },
            methods:{
                toggleIsShow: function(){
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>
</body>

7、v-bind

v-bind指令的作用：为元素绑定属性
完整写法v-bind:属性名
简写可以直接省略v-bind，只保留:属性名
如果是class属性，推荐使用:class=属性名:属性值的方式

<body>
    <div id="app">
        <img v-bind:src="imgSrc"v-bind:title="imgTitle"/>
        <hr>
        <!-- 推荐方式 -->
      <!-- <img :src="imgSrc" :title="imgTitle" @click="toggleIsActive" 
:class="{active:isActive}"/> -->
        <!-- 三元表达式的方式 -->
        <img :src="imgSrc" :title="imgTitle" @click="toggleIsActive" :class="isActive?'active':''"/>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data:{
              imgSrc: "img/head.png",
              imgTitle: "新鲜又好吃的柚子",
              isActive:false,
            },
        methods: {
            toggleIsActive:function(){
                this.isActive = !this.isActive;
            }
        }
        })
    </script>
</body>

8、案例-图片切换

链接：https://blog.csdn.net/qq_40845019/article/details/107894713

9、v-for

作用：绑定数组的数据来渲染一个项目列表
数组经常和v-for使用
语法是(item,index) in 数组，其中item表示数组中的数据对象，index表示索引
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>v-for指令</title>
</head>
<body>
    <div id="app">
        <!-- 显示对象数组的内容 -->
        <ol>
            <li v-for="todo in todos">
                {{todo.text}}
            </li>
        </ol>
        <hr>
        <input type="button" value="往普通数组中添加元素" v-on:click="add"/>
        <input type="button" value="移除普通数组中最左边元素" @click="removeLeft"/>
         <!-- 显示普通数组的内容 -->
        <ul>
            <!-- <li v-for="address in arr"> -->
            <li v-for="(address,index) in arr">
                {{index+1}}{{"、"+address}}
            </li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                //对象数组
                todos:[
                    {text:"学习JavaScript"},
                    {text:"学习Java"},
                    {text:"学习MySQL"},
                    {text: "学习vue.js"},
                    {text: "学习node.js"},
                ],
                arr:[
                    "上海市","天津市","北京市","重庆市"
                ]
            },
            methods:{
                //添加元素
                add:function(){
                    this.arr.push("深圳市")
                },
                //移除最左边的元素
                removeLeft:function(){
                    this.arr.shift();
                }        
            }
        })
    </script>
</body>
</html>