Vue03_Vue指令

最新推荐文章于 2024-07-25 22:09:02 发布

m1729

最新推荐文章于 2024-07-25 22:09:02 发布

阅读量132

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m1729/article/details/127902780

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.v-text:设置标签的文本值（textContent）

2.v-html：设置标签的innerHtml属性

3.v-on指令：为元素绑定事件

传参与事件修饰符

小例子：通过绑定来写一个计数器

4.v-show：根据表达式的真假，切换元素的显示和隐藏

5.v-if:根据表达式的真假，切换元素的显示或隐藏（操作dom元素）

v-show和v-if的区别(频繁切换v-show，反之v-if)

6.v-bind：设置元素的属性（比如：src，title，class）

7.v-for：根据数据生成列表结构

8.v-model：获取和设置表单元素的值（双向数据绑定）

1.v-text:设置标签的文本值（textContent）

1.默认写法会替换全部内容，部分替换还是需要写成差值表达式{ { } }写法

2.支持写内部表达式

<body>
<div id="app">
    <h2 v-text="message">大马</h2>
    <h2 v-text="cook">大马</h2>
    <h2 >{{message}}大马</h2>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            message:"老马之路",
            cook:"鱼香茄子"
        }
    })
</script>

</body>

2.v-html：设置标签的innerHtml属性

内容中的html会被解析为标签

<body>
<div id="app">
    <h2 v-html="content"></h2>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            content:"<a href='http://www.baidu.com'>百度下</a>"
        }
    })
</script>
</body>

3.v-on指令：为元素绑定事件

绑定的方法写在methods中，记得一定要加s

<body>
<div id="app">
<!--    单击事件-->
    <input type="button" value="v-on指令" v-on:click="hello">
<!--    简写-->
    <input type="button" value="v-on简写" @click="hello">
<!--    双击事件-->
    <input type="button" value="双击事件" @dblclick="hello">
<!--    用方法做data数据的改变-->
    <h2 @click="changeDrink">{{drink}}</h2>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
          drink:"农夫山泉"
        },
        methods:{
            hello:function () {
                alert("Hello World")
            },
            changeDrink:function () {
                this.drink+="very good"
            }
        },
    })
</script>
</body>

传参与事件修饰符

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

<div id="app">
    <!--vue-on的传参-->
    <input type="button" value="传参" @click="so(123)">
<!--    输入框输入，按下回车触发弹窗-->
    <input type="text" @keyup.enter="hi">

</div>
<script>
    var app = new Vue({
        el:"#app",
        methods:{
            so:function(p){
                console.log("yes")
                console.log(p)

            },
            hi:function () {
                alert("hi")
            }
        }
    })
</script>
</body>

小例子：通过绑定来写一个计数器

<body>
<div id="app">
<input type="button" value="-" @click="sub">
    <span>{{num}}</span>
<input type="button" value="+" @click="add">
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            num:1
        },
        methods:{
            add:function (){
                if(this.num<10){
                    this.num+=1;
                }else{
                    alert("超过规定值")
                }

            },
            sub:function () {
                if(this.num>0){
                    this.num-=1;
                }else{
                    alert("小于规定值")
                }

            }
        }
    })
</script>
</body>

4.v-show：根据表达式的真假，切换元素的显示和隐藏

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

指令后面的内容都会解析成为布尔值

<body>
<div id="app">
    <input type="button" value="切换" @click="change">
    <input type="button" value="年龄增加" @click="add">
    <input type="button" value="年龄减少" @click="sub">
    <img src="th.jpg"v-show="isShow">
    <img src="th.jpg"v-show="age>=19">

</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            isShow:false,
            age:18
        },
        methods:{
            change:function () {
                this.isShow = !this.isShow
            },
            add:function () {
                this.age++
            },
            sub:function () {
                this.age--
            }
        }
    })
</script>

</body>

5.v-if:根据表达式的真假，切换元素的显示或隐藏（操作dom元素）

<body>
<div id="app">
    <input type="button" value="切换" @click="change">
    <p v-if="isShow">我真帅</p>

</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            isShow:false
        },
        methods:{
            change:function () {
                this.isShow = !this.isShow;
            }
        }
    })
</script>
</body>

v-show和v-if的区别(频繁切换v-show，反之v-if)

控制手段：v-show隐藏则是为该元素添加css--display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除

编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换

编译条件：v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染

v-show 由false变为true的时候不会触发组件的生命周期
v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestory、destoryed方法

性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

6.v-bind：设置元素的属性（比如：src，title，class）

正式格式：v-bind:属性名=表达式，简写只保留 :属性名

<body>
<style>
    .active{
        border: 10px solid red;
    }
</style>
<div id="app">
    <img v-bind:src="imgSrc" alt="">
    <br>
<!--    简化版本-->
<!--    Title为图片描述 -->
<!--    class为三目表达式-->
    <img :src="imgSrc" alt="" :title="imgTitle+'123'" :class="isActive?'active':''" @click="is">
<!--    class简化版本 使用对象的方式-->
    <img :src="imgSrc" alt="" :title="imgTitle+'123'" :class="{active:isActive}" @click="is">
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            imgSrc:"https://img-xhpfm.zhongguowangshi.com/News/202105/20210529220137_0806.jpg?x-oss-process=image/resize,w_1000/auto-orient,1/quality,Q_80",
            imgTitle:"火箭发射",
            isActive:true
        },
        methods:{
            is:function (){
                this.isActive = !this.isActive
            }
        }
    })
</script>
</body>

7.v-for：根据数据生成列表结构

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

语法：（item,index）in 数据，item和index可以结合其他指令一起使用

<body>
<div id="app">
    <input type="button" value="添加" @click="add">
    <input type="button" value="删除" @click="remove">
    <ul>
        <li v-for="item in arr">
            我爱吃:{{item}}
        </li>
    </ul>
    <h2 v-for="item in vegetable" :title="item.name">
        {{item.name}}
    </h2>

</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            arr:["苹果","香蕉","梨"],
            vegetable:[
                {name:"洋葱"},
                {name:"白菜"}]
        },
        methods:{
            add:function () {
                this.vegetable.push({name:"花菜"})
            },
            remove:function (){
                this.vegetable.shift()
            }
        }
    })
</script>

</body>

8.v-model：获取和设置表单元素的值（双向数据绑定）

<body>
<div id="app">
<!--    双向绑定的传值-->
    <input type="text" v-model="message" @keyup.enter="getM">
<!--    修改message的值-->
    <input type="button" value="修改" @click="setM">
    <h1 v-text>{{ message }} </h1>

</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"大马之路"
        },
        methods:{
            getM:function (){
                alert(this.message)
            },
            setM:function () {
                this.message="老马之路"
            }
        }
    })
</script>

</body>