Vue指令

最新推荐文章于 2022-12-26 19:57:17 发布

不可爱仙女

最新推荐文章于 2022-12-26 19:57:17 发布

阅读量191

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/rraxx/article/details/113943621

版权

vue指令

1.引入vue.js

<script src="./js/vue.js"></script>

{{}}的作用是读取data中的值,将数据渲染出来，文本插值，vue最简单，最常用的一种渲染方式

<body>
    <!-- view--->
    
    <div id="app">
        <p>{{message}}</p>
        <p>{{info}}</p>
        <p>{{8*8}}</p>
    </div>
    <script>
        //model
        //new一个vue的对象
        new Vue({
            el:'#app', //id选择器，选中id为app的控件，实现了vue对象和div控件的绑定
            data:{
                message:'第一个Vue程序',
                info:'今年是2021年'
            }
        })
    </script>
</body>

在这里插入图片描述

2.带有v-前缀的特殊属性，通过属性来操作元素

(1)v-show：通过设置表达式的真假值，来显示和隐藏元素

    <div id="app">
        <p>你好</p>
        <p v-show="temp">射雕英雄传</p>
        <p v-show="ok">你喜欢武侠剧吗</p>
    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                temp:true,
                ok:false
            }
        });
        //设置定时器，1000ms让页面刷新一次(即“你喜欢武侠剧吗“每隔一秒显示一次，隐藏一次)
        window.setInterval(function(){
            vm.ok = !vm.ok;
        },1000)

(2)v-html:插入标签

    <div id="app">
        <input type="checkbox">橘子
        <input type="checkbox">苹果
        <input type="checkbox">香蕉
        <input type="checkbox">橙子
        <input type="checkbox" @click="other">其他<!--@click给标签绑定一个click事件-->
        <div v-html="htmlstr" v-show="test"></div>
        
    </div>
    <script>
        /*Vue对象的属性：
            el:vue对象绑定的控件（通过选择器来选择--id,class,标签名选择器）
            data:用来设置Vue对象绑定的变量的值
            methods:用来定义vue对象绑定的事件处理函数
        */
        new Vue({
            el:"#app",
            data:{
                test:false,
                htmlstr:'<textarea></textarea>'
            },
            methods:{
                other:function(){
                    //this代表当前的vue对象
                    this.test = !this.test
                }
            }
        })
    </script>

(3)v-text在元素之间插入值

<body>
    <div id="app">
        <h1 v-text='msg'></h1>
        <h1 v-html='hd'>fast</h1>
        
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:'你好',
                hd:'<button>提交</button>'
            }
        });
    </script>
</body>

(4)v-of和v-else:根据表达式的真假来动态插入和移除元素

    <div id="app">
        <div v-if="role == 'lucky'">
            <h1>欢迎lucky</h1>
        </div>
        <div v-else-if="role == 'Bob'">
            <h1>欢迎Bob</h1>
        </div>
        <div v-else>
            <h1>滚蛋~~</h1>
        </div>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                role:'Bo1b'
            }
        })
    </script>

(5)v-if和v-show的区别

v-if底层采用的是appendChild来实现的
v-show通过样式display控制标签的显示
v-if加载速度比v-show快
v-if切换开销大于v-show
v-if是惰性的,它是真正的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当的被销毁车重建
v-show是惰性的,如果在初始渲染时条件为false,则什么也不做,直到条件变为true,才开始渲染条件块
v-show–频繁切换
v-if运行时条件改变很少

(6)v-for:根据变量的值循环渲染元素

    <div id="app">
        <ul>
            <!-- index：arr的索引值 -->
            <li v-for="(item,index) in arr">
                {{index}}:{{item}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                arr:['Java','JavaScript','Python','C++','Vue','React']
            }
        })
    </script>

vue渲染一个表格

        <table border="1">
            <tr>
                <th width="100">编号</th>
                <th width="100">姓名</th>
                <th width="100">性别</th>
                <th width="100">年龄</th>
            </tr>
            <tr v-for="item in objs" align="center">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.sex }}</td>
                <td>{{ item.age }}</td>
            </tr>
        </table>

在这里插入图片描述

(7)v-bind:绑定元素的属性并设置样式

    <style>
        .info{
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <a v-bind:href="link" v-bind:class="{info:flag}">百度</a>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                link:'http://www.baidu.com',
                flag:true
            }
        })
    </script>
</body>

在这里插入图片描述

可以简写

<a v-bind:href="link" v-bind:class="{info:flag}">百度</a>

相当于 <a :href="link" :class="{info:flag}">百度</a>

(8)v-on:

v-on:事件名称=“事件触发后的处理程序”

多个事件的绑定:

v-on={
	事件名称1="事件触发后的处理程序函数名1",
	事件名称2="事件触发后的处理程序函数名2",
}

<div id="app">
        <a :href="link" :class="{info:flag}" v-on:click="myclick">百度</a>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                link:'http://www.baidu.com',
                flag:true
            },
            methods:{
                myclick:function(){
                    alert('您点击了超链接')
                }
            }
        })
    </script>

(9)demo

当鼠标放上去,图片变换,鼠标离开后又切换回来

    <style>
        img{
            width: 300px;
        }
        #app{
            width: 300px;
            height: 240px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="app" v-on='{mouseenter:myone,mouseleave:mytwo}'>
        <img src="../img/one.jpg" alt="" v-show="one">
        <img src="../img/two.jpg" alt="" v-show="two">
    </div>

    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                one:true,
                two:false
            },
            methods:{
                myone:function(){
                    vm.one = false;
                    vm.two = true;
                },
                mytwo:function(){
                    vm.one = true;
                    vm.two = false;
                }
            }
        })
    </script>
</body>

方法2

<!--
        1、标签：<img src=''>：为src属性绑定变量
        2、事件：
           mouseover:鼠标悬停事件
           mouseout:鼠标离开
    -->
    
    <div id="app04">
        <img :src="imgurl" width="300" height="240" v-on="{
            mouseover:mouseOver,
            mouseout:mouseOut
        }">
    </div>

    <script>
        new Vue({
            el:'#app04',
            data:{
                imgurl:'../images/1.png'
            },
            methods:{
                mouseOver:function(){
                    this.imgurl = '../img/one.png'
                },
                mouseOut:function(){
                    this.imgurl = '../img/two.png'
                }
            }
        });
    </script>

(10)v-model:将input的值和变量进行绑定

最典型的数据双向绑定

    <div id="app">
        <p>请选择性别</p>
        <input type="radio" value="男" v-model="gender">男
        <input type="radio" value="女" v-model="gender">女
        <br><br>
        性别:{{gender}}
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                gender:''
            }
        })
    </script>

在这里插入图片描述

下拉列表框进行绑定

最终得到的值是value中的值,所以value必须写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>请选择性别</p>
        <input type="radio" value="男" v-model="gender">男
        <input type="radio" value="女" v-model="gender">女
        <br><br>
        性别:{{gender}}

        <p>请选择女朋友</p>
        <select v-model="girlfriends">
            <option value="虞书欣">虞书欣</option>
            <option value="刘雨昕">刘雨昕</option>
            <option value="孔雪儿">孔雪儿</option>
        </select>
        <br><br>
        女朋友是：{{girlfriends}}
        <br>
        <textarea cols="30" rows="5" v-model="text"></textarea>
        {{text}}
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                gender:'女',
                girlfriends:'虞书欣',
                text:'Vue.js的指令'
            }
        })
    </script>
</body>
</html>

(11)v-once:让元素或组件只渲染一次,一旦绑定,数据就不会改变

<div id="app">
        <input type="text" v-model="context">
        <br><br>
        <p>{{context}}</p>
        <p v-once>{{context}}</p>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                context:'德云IT'
            }
        })
    </script>

在这里插入图片描述

（12）v-pre指令用于跳过这个元素，以及它的子元素的编译过程

对于大量没有指令的节点使用v-pre指令可以加快编译速度

（13）v-cloak插值表达式存在闪动的问题，即页面抖动。

（14)自定义指令

Vue.directive({})注册全局指令或者directives:{}来定义指令

    <div id="app">
        v-focus是自定义指令
        <p>当页面载入时，input控件自动获得焦点</p>
        <input type="text" v-focus>
    </div>
    <script>
        //定义一个全局指令docus
        //Vue.directive('指令名称',对象)
        Vue.directive('focus',{
        //    inserted 当把被绑定的对象插入到DOM中时，执行定义的函数
        //    el 被绑定的对象
            inserted:function(el){
                el.focus();//让被绑定的对象获得焦点
            }
        })

        new Vue({
            el:"#app"
        })
    </script>

局部：

    <div id="app">
        v-focus是自定义局部指令
        <p>当页面载入时，input控件自动获得焦点</p>
        <input type="text" v-focus>
    </div>
    <script>
        new Vue({
            el:"#app",
            directives:{
                focus:{
                    inserted:function(el){
                        el.focus()
                    }
                }
            }
        })
    </script>

(15)VUE指令中的两个简写

绑定变量指令v-bind的简写

<a v-bind:href="link">学习Vue</a>
<a :href="link">学习Vue</a>

绑定事件指令v-on的简写

<button v-on:click="myClick"></button>
<button @click="myClick"></button>

(16)下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        body{
        width: 600px; 
        }
        a{ 
            text-decoration: none; 
            display: block; 
            color: #fff; 
            width: 120px; 
            height: 40px;
            line-height: 40px; 
            border: 1px solid #fff; 
            border-width: 1px 1px 0 0; 
            background: #255f9e; 
        }
        li{ 
            list-style-type: none; 
        }
        #app > li{ 
            list-style-type: none; 
            float: left; 
            text-align: center; 
            position: relative; 
        }
        #app li a:hover{ 
            color: #fff; 
            background: #ffb100; 
        }
        #app li ul{ 
            position: absolute; 
            left: -40px; 
            top: 40px; 
            margin-top: 1px; 
            font-size: 12px; 
        }
        [v-cloak]{ 
            display: none; 
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <li v-for="menu in menus" @mouseover="menu.show = !menu.show" @mouseout="menu.show = !menu.show">
           <a href="menu.url">{{menu.name}}</a>
           <ul v-show="menu.show">
               <li v-for="subMenu in menu.subMenus">
                   <a href="subMenu.url">{{subMenu.name}}</a>
               </li>
           </ul> 
        </li>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                menus:[
                    {
                        name:"C++",
                        url:"#",
                        show:false,
                        subMenus:[
                            {
                                name:"C++简介",
                                url:"#"
                            },
                            {
                                name:"C++语法",
                                url:"#"
                            }
                        ]
                    },
                    {
                        name:"JavaScript",
                        url:"#",
                        show:false,
                        subMenus:[
                            {
                                name:"JavaScript简介",
                                url:"#"
                            },
                            {
                                name:"JavaScript语法",
                                url:"#"
                            }
                        ]
                    },
                ]
            }
        })
    </script>
</body>
</html>

不可爱仙女

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue指令

vue指令1.引入vue.js<script src="./js/vue.js"></script>{{}}的作用是读取data中的值,将数据渲染出来，文本插值，vue最简单，最常用的一种渲染方式<body>  <div id="app"> <p>{{message}}</p> <p>{{info}}</p>
复制链接

扫一扫