Vue.js提供了哪些内置指令,至少写出五个。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js提供了哪些内置指令,至少写出五个。相关的知识，希望对你有一定的参考价值。
参考技术A 5.1 基本指令5.1.1 v-cloak一般与display：none进行结合使用
作用：解决初始化慢导致页面闪动的最佳实践
5.1.2 v-once
定义它的元素和组件只渲染一次
5.2 条件渲染指令
5.2.1 v-if, v-eles-if ,v-else
用法： 必须跟着屁股走
v-if后面的等号必须是布尔值
v-if的弊端 :
Vue 在渲染元素时 ，出于效率考虑，会尽可能地复用已有的元素而非重新渲染， 因此会出现乌龙
只会渲染变化的元素，也就是说，input元素被复用了
Vue.js实战 章五：内置指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- <script src="https://vuejs.org/js/vue.js"></script> -->
<script src="Vue.2.6.10.js"></script>
</head>
<style>
[v-cloak]{
display: none;
}
</style>
<body>
<div id="app1" v-cloak>
{{ message }}
</div>
<div id="app2">
<input type="text" v-model=‘message‘>
<span> {{ message }} </span>
<span v-once> {{ message }} </span>
</div>
<br>
<div id="app3">
<input type="text" v-model=‘message‘ v-model=‘odevity‘>
<p v-if = "message == 1">一</p>
<p v-else-if = "message == 2">二</p>
<p v-else>其他</p>
<template v-if = "odevity == ‘大于100‘">
<p>大于100</p>
<p>是真的，真的大于100</p>
<!-- 一次判断多个元素时这样安排 -->
</template>
</div>
<div id="app4">
<template v-if = "type === ‘name‘">
<label>用户名</label>
<input type="text" placeholder="用户名">
</template>
<template v-else >
<label>密码</label>
<input type="text" placeholder="密码">
</template>
<button @click = "toggleType">切换输入类型</button>
</div>
<div id="app5">
<p v-show=‘show == true‘>为true时显示改行</p>
<button @click = "toggleShow">切换显示状态</button>
</div>
<!-- 列表渲染指令 -->
<div id="app6">
<!-- 遍历数组 -->
<ul>
<template v-for = "(book,index) in books">
<li>{{ index+1 }} - {{ book.name }},{{ book.author }}</li>
<!-- <span v-for = ‘value in author‘>{{ value }}</span> 如果写在这里，相当于遍历中嵌了一个遍历-->
</template>
<br>
<!-- 遍历对象 -->
<li v-for = ‘(value,key,index) in author‘>{{ index }} - {{ key }}:{{ value }}</li>
</ul>
</div>
<div id="app7">
<!-- 数组更新及方法 -->
</div>
<div id="app8">
<!-- 方法与事件 -->
点击次数：{{ counter }}
<button @click = "counter++">+1</button>
<button @click = "add">+1</button>
<button @click = "add(10)">+10</button>
</div>
<div id="app9">
<a href="https://www.4399.com" @click = "handleClick(‘禁止打开哈‘,$event)">无法被打开的链接</a>
</div>
<div id="app10">
<!-- 使用修饰符简化操作 -->
<a href="#" @click.stop = "handle">阻止单击事件冒泡</a>
<form action="#" @submit.prevent = "handle">提交事件不再重载页面</form>
<form action="#" @submit.prevent>提交事件不再重载页面（仅有修饰符而无回调函数）</form>
<a href="#" @click.stop.prevent = "handle">串联修饰符</a>
<a href="#" @click.capture = "handle">添加事件侦听器时，使用事件捕获模式</a>
<a href="#" @click.self = "handle">只当事件在元素本身触发时触发</a>
<a href="#" @click.once = "handle">只触发一次</a>
</div>
</body>
<script>
// console.log(new Vue());
//v-cloak 无需表达式 会在Vue实例结束编译后从绑定的html元素上移除，常和display：none结合使用
var app1 = new Vue({
el:"#app1",
data:{
message:‘这是一段文本~‘//防止在网速较慢是页面上会出现{{ message }}的字样
}
});//解决初始化慢导致页面闪动
var app2 = new Vue({
el:"#app2",
data:{
message:‘test‘//v-once 定义它的元素/组件只渲染一次 以后将视为静态内容
}
});
var app3 = new Vue({
el:"#app3",
data:{
message:‘‘,
},
computed: {
odevity:function(){
if(this.message > 100){
return "大于100";
}else{
return "小于100";
};
},
},
});
var app4 = new Vue({
el:"#app4",
data:{
type:‘name‘
},
methods: {
toggleType:function(){
this.type = this.type === ‘name‘ ? ‘mail‘:‘name‘;
}
},
//虽然DOM改变了，但是之前键入的内容并没有改变，<input>元素被复用了
//不想这样做？在不希望被复用的<input>元素中添加key属性 key的值必须是唯一的
});
var app5 = new Vue({
el:"#app5",
data:{
show:true
},
methods:{
toggleShow:function(){
// console.log(show,this.show);//未定义的show
console.log(this.show);//
show = !this.show;//错误的写法，会重新定义一个收未变量
console.log(show,this.show);
this.show = !this.show;
console.log(this.show);
}
}
});
var app6 = new Vue({
el:"#app6",
data:{
books:[
{name:‘book1‘,author:‘1‘},
{name:‘book2‘,author:‘2‘},
{name:‘book3‘,author:‘3‘},
{name:‘book4‘,author:‘4‘},
{name:‘book5‘,author:‘5‘}
],
author:{
name:‘Harold‘,
gender:‘男‘,
age:‘20‘
}
}
});
var app7 = new Vue({
});
var app8 = new Vue({
el:"#app8",
data:{
counter:0
},
methods:{
add:function(count){
count = count || 1;
this.counter += count;
console.log(count);
//（不带括号打印count）MouseEvent {isTrusted: true, screenX: 211, screenY: 612, clientX: 152, clientY: 456, …}
// 10
//如果以不带()的形式供@click调用，且后该方法有参数，则会默认将原生时间对象event传入 即第二个按钮不会+1
}
}
});
var app9 = new Vue({
el:"#app9",
data:{
},
methods: {
handleClick:function(message,event){
alert(message);
event.preventDefault();
}
},
});
</script>
</html>
以上是关于Vue.js提供了哪些内置指令,至少写出五个。的主要内容，如果未能解决你的问题，请参考以下文章