Vue框架学习——v开头的相关本地应用_vue中以v-开头的组件是什么-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_51561585/article/details/113752352

前言：

以下内容为B站视频所学，自己的学习加练习和大家分享

Vue本地应用

1. v-text
2. v-html
3. v-on
4. v-show
5. v-if
6. v-for
7. v-bind
8. v-model

1. v-text

指令作用：设置标签内容(textContent)
默认写法会替换全部内容，使用差值表达式{{}}可以替换制定的内容
内部支持表达式

<body>
    <div id="app">
        <h2 v-text="message">这里的内容将被覆盖</h2>
        <h2>{{message}}</h2> 
        <h2 v-text="message+'...'"></h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app= new Vue({
            el:"#app",
            data:{
                message:"Hello! Vue",
            }
        })
    </script>
</body>

在这里插入图片描述

2. v-html

作用：设置标签的innerHTML
内容如果有html结构会被解析为标签，如果不是html结构则直接显示文本
v-text指令无论内容是什么，只会解析为文本

<body>
    <div id="app">
        <h2 v-text="url"></h2>
        <h2 v-html="url"></h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app= new Vue({
            el:"#app",
            data:{
                url:"<a href='http://www.baidu.com'>百度</a>",
            }
        })
    </script>
</body>

在这里插入图片描述

3. v-on

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

<body>
    <div id="app">
        <input type="button" value="事件绑定1" v-on:click="doit1"></input>
        <input type="button" value="事件绑定2" @click="doit2"></input>
        <input type="button" value="事件绑定3" @click="doit3(message)"></input>
        <input type="button" value="事件绑定4" @click="doit4"></input>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app= new Vue({
            el:"#app",
            data:{
                message:"Hello! Vue",
            },
            methods:{
                doit1:function(){
                    alert("11111")
                },
                doit2:function(){
                    alert("22222")
                },
                doit3:function(p1){
                    alert(p1)
                },
                doit4:function(){
                    alert(this.message)
                }
            }
        })
    </script>

注意：这四个按钮的输出结果都相同;代码中的click实践可替换成别的事件，如dblclick(双击事件) 在这里插入图片描述

4. v-show

作用：根据表达式的真假，切换元素的显示和隐藏
原理是修改元素的display，实现显示隐藏
指令后面的内容最终都会解析成布尔值，可以直接用布尔值，也可以是变量，也可以是表达式。
值为true元素显示，值为false元素隐藏
数据改变之后，对应元素的显示状态会同步更新

<body>
    <div id="app">
        <h2 v-show="true">{{ message+'111' }}</h2>
        <h2 v-show="num>0">{{ message+'222' }}</h2>
        <h2 v-show="num<0">{{ message+'333' }}</h2>
        <input type="button" value="隐藏/显示" v-on:click="doit"></input>
        <h2 v-show="isshow">{{ message }}</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app= new Vue({
            el:"#app",
            data:{
                isshow:false,
                message:"Hello! Vue",
                num:1,
            },
            methods:{
                doit:function(){
                    this.isshow=!this.isshow;
                }
            }
        })
    </script>
</body>

备注：由于num>0,所以message+‘333’ 结果不显示；点击按钮，可以控制其后面一行的显示与隐藏
在这里插入图片描述

5. v-if

作用：根据表达式的真假，切换元素的显示和隐藏（操纵dom元素）（效果和v-show类似，但实现的措施不一样）
本质是通过操纵dom元素来切换显示状态
表达式的值为true，元素存在于dom树中，为false，从dom树中移除(与v-show区别，v-show修改元素的display)
频繁切换建议使用v-show，否则可以使用v-if，因为前者的切换消耗小

6. v-for

作用：根据数据生成列表结构
数组经常和v-for结合使用
语法是(item,index) in 数据
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的

<body>
    <div id="app">
        <input type="button" value="添加数据" @click="doit">
        <ul>
            <li v-for="item in arr">
                我想吃：{{ item }}
            </li>
        </ul>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app= new Vue({
            el:"#app",
            data:{
                arr:["苹果","梨","草莓","葡萄","香蕉"]
            },
            methods:{
                doit:function(){
                    this.arr.push("樱桃")
                }
            }
        })
    </script>
</body>

注意：樱桃那一行是点击按钮后得到的
在这里插入图片描述

7. v-bind

作用：为元素绑定属性（比如：src，title，class）
完整写法是v-bind:属性名
简写的话可以直接省略v-bind，只保留 :属性名
需要动态增删的class建议使用对象的方式

<body>
    <div id="app">
        <img v-bind:src="image">
        <img :src="image" :title="imagetitle" :class="isactive">
    </div>
    <style>
        .active{
            border: 1px solid red;
        }
    </style>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app= new Vue({
            el:"#app",
            data:{
                image:"图片.jpg",
                imagetitle:"图片",
                isactive:"active",
            },
            methods:{
                doit:function(){
                    this.isshow=!this.isshow;
                }
            }
        })
    </script>
</body>

在这里插入图片描述

8. v-model

作用：便捷的获取和设置表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据与表单元素的值双向绑定

<body>
    <div id="app">
        <input type="text" v-model="message" @keyup.enter="doit">
        <h2>{{message}}</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app= new Vue({
            el:"#app",
            data:{
                message:"Hello! Vue"
            },
            methods:{
                doit:function(){
                    alert(this.message);
                }
            }
        })
    </script>
</body>