Vue指令

最新推荐文章于 2022-11-05 19:42:21 发布

11adaacc

最新推荐文章于 2022-11-05 19:42:21 发布

阅读量321

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/Rayshaan/article/details/113204617

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

文章目录

01.v-if和v-show

v-if控制的是标签是否存在 true存在 false的时候是不存在
v-show控制的是标签的显示隐藏 true显示 false的时候隐藏
如果变量作为的值的时候，不用加{{}}
如果只是单纯显示隐藏最好使用show 。效率高

<body>
	<div id="app">
		<button v-on:click="change()">按钮</button>
		{{msg}}
		<div v-if="msg"></div>
		<div v-show="msg"></div>
		<p>文字</p>
	</div>
	<script src="js/vue.js"></script>
	<script>
		new Vue({
			el:'#app',
			data:{
				msg:true
			},
			methods:{
				change(){

					this.msg=!this.msg;
				}
			}
		})
	</script>
</body>

在这里插入图片描述

02.v-for

v-for可以用来动态追加标签item代表的是数组元素。index代表的是数组下边
哪一个标签需要动态创建，直接增加v-for即可 v-for="(item,index) in 变量"

<body>
    <div id="app">
        <ol>
            <li v-for="(item,index) in list">
                <h1>{{item.author}}</h1>
                <p>{{item.content}}</p>
            </li>
        </ol>
    </div>

    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                list:[
                    {
                        author:'123',
                        content:'内容'
                    },
                    {
                        author:'123',
                        content:'内容'
                    }
                ]
            }
        })
    </script>
</body>

在这里插入图片描述

03.v-model

v-model="变量" 变量存储的是input的值
双向数据绑定
表单的值有变化，会促使msg的值有变化
msg的值有变化，会促使表单的值有变化

<body>
	<div id="app">
		<textarea name="" id="" v-model="val" cols="30" rows="10"></textarea>
		<input type="text" v-model="msg">
		{{val}}
		{{msg}}
		<button v-on:click="change()">按钮</button>
	</div>

	<script src="js/vue.js"></script>
	<script>
		new Vue({
			el:'#app',
			data:{
				msg:'hello',
				val:''
			},
			methods:{
				change(){
					this.msg+=1;
				}
			}
		})
	</script>
</body>

在这里插入图片描述
更改值

04.v-bind

标签属性：所有可以放在在标签后面的内容，都可以称为属性 id class value src

v-bind:如果属性的值是变量在属性的前面加v-bind,就会去data中寻找相应的变量

使用v-bind将标签属性变为变量

<body>
    
    <div id="app">
        <img v-bind:src="msg" alt="">
    </div>

    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:'http://pic1.nipic.com/2008-10-24/20081024204140993_2.jpg'
            }
        })
    </script>
</body>

在这里插入图片描述
如果变量以数组的形式存在，说明变量数组元素对应的类名

<body>   
    <div id="app">
        <div v-bind:class="[a,b,c]"></div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                a:'AA',
                b:"BB",
                c:"CC"
            }
        })
    </script>
</body>

在这里插入图片描述
如果数组元素加上引号，说明该元素是一个常量。对应的类名就是该常量。此处的c就是类名不是变量
<div v-bind:class="[a,b,'c']"></div>

如果数组元素以{k:v}的形式存在，如果v是true则存在，false则不存在
<div v-bind:class="{a:true,b:false,c:false}"></div>
在这里插入图片描述

05.v-cloak

cloak保持在元素身上，直到代码编译结束。可以解决刷新页面看到{{}}问题。但是在一些浏览器中，浏览器已经自己解决该问题

<head>
<style>
	[v-cloak]{
		display: none;
	}
</style>
</head>
<body>
	<div id="#app" v-cloak>
	</div>
</body>

06.v-once和v-pre

v-once只渲染一次{{}}，后期数据变化也不再重新渲染
v-pre不渲染{{}}，直接以插值表达式形式显示。

<body> 
    <div id="app">
       <p v-once>v-once:{{msg}}</p>
       <p v-pre>v-pre:{{msg}}</p>
       msg:{{msg}}
       <button v-on:click="change()">按钮</button>
    </div>

    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:'abcd'
            },
            methods:{
                change(){
                    this.msg+=1;
                }
            }
        })
    </script>
</body>

在这里插入图片描述

修改msg的值
在这里插入图片描述
特殊情况：随机数

随机数，检测到页面刷新，会重新执行代码。每次刷新页面，随机数都会有变化
其余数据有变化，会促使随机数执行发生变化

<div id="app">
     <p v-once>v-once:{{msg}}</p>
     <p v-pre>v-pre:{{msg}}</p>
     msg:{{msg}}
     <p v-once>v-once:{{Math.random()}}</p>
	{{Math.random()}}
     <button v-on:click="change()">按钮</button>
</div>

首次加载页面
在这里插入图片描述

修改msg的数据
在这里插入图片描述
再次加载页面：

07 .prevent和.stop

.prevent：阻止默认行为(a标签跳转，表单提交等)
.stop：阻止事件冒泡(点子触发父事件)

阻止默认行为：
<a v-on:click.prevent href="https://www.baidu.com">百度</a>

阻止事件冒泡

<body> 
    <div id="app">
       <div v-on:click="f()">
            <p v-on:click.stop="s()"></p>
       </div>
    </div>

    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:'abcd'
            },
            methods:{
                f(){
                    console.log('我是父元素')
                },
                s(){
                    console.log('我是子元素')
                }
            }
        })
    </script>
</body>

在这里插入图片描述
点击子元素：

08.watch和computed

watch放置的是所要监听的数据，发生变化的时候，会执行代码，效率较低
computed计算属性。一般多个数据进行计算的时候使用。效率比较高。数据存储在缓存内部，如果没有变化，直接读取缓存数据。

watch:

<body>
    <div id="app">
        <button v-on:click="change()">修改数据</button>
			{{msg}}
			<br><br>
			{{num}}
			<br><br>
			{{a}}
            <br><br>
            {{msg+num+Math.random()}}
			<br><br>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:'hello',
                num:100,
                a:'Vue'
            },
            watch:{
                num(){
                    console.log('num增加了')
                }
            },
            methods:{
                change(){
                    this.num++;
                }
            }
        })
    </script>
</body>

在这里插入图片描述
修改num的值：触发watch里的代码

computed:

<body>
    <div id="app">
        <button v-on:click="change()">修改数据</button>
			{{msg}}
			<br><br>
			{{num}}
			<br><br>
			{{a}}
            <br><br>
            {{msg+num+Math.random()}}
            <br><br>
            {{pre}}
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:'hello',
                num:100,
                a:'Vue'
            },
            watch:{
                num(){
                    console.log('num增加了')
                }
            },
            computed:{
                pre(){
                    return this.msg+this.num;
                }
            },
            methods:{
                change(){
                    this.num++;
                }
            }
        })
    </script>
</body>

在这里插入图片描述
如果computed里的方法和data中的数据重名，则会执行data中的的数据

09.自定义全局指令

自定义全局指令 Vue.directive('指令名字',{钩子函数bind/inserted/update/unbind})
钩子函数，相当于提供一个对外的接口，可以在函数里面进行操作

钩子函数：

bind 指令绑定到标签身上的时候执行
inserted 标签插入到页面中的时候执行，el 当前标签 obj 可以获取一些参数
update 数据更新的时候执行
unbind 解除绑定的时候执行

Vue.directive('color',{
	bind(){
		console.log('bind')
	},
	inserted(el,obj){
		console.log('inserted');
	},
	update(){
		console.log('update')
	},
	unbind(){
		console.log('unbind')
	}
})

10.自定义局部指令

new Vue({
	el:'#box',
	// 自定义局部指令directives
	directives:{
		// 指令名字{
		// 	钩子函数  bind  inserted update unbind
		// }
		color:{
			inserted(el,obj){
				if(obj.arg){
					el.style.color=obj.arg
				}else if(obj.value){
					el.style.color=obj.value;
				}else{
					el.style.color='red'
				}
			}
		}
	}
})

2021.01.27 00:21
2021.01.28 20:39

11adaacc

关注

0
点赞
踩
1

收藏

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

文章目录01.v-if和v-show02.v-for03.v-model04.v-bind05.v-cloak06.v-once和v-pre07 .prevent和.stop08.watch和computed01.v-if和v-showv-if控制的是标签是否存在 true存在 false的时候是不存在v-show控制的是标签的显示隐藏 true显示 false的时候隐藏如果变量作为的值的时候，不用加{{}}如果只是单纯显示隐藏最好使用show 。效率高<body> <d
复制链接

扫一扫

专栏目录