Vue指令概念
指令的本质就是自定义属性,指令格式:以v-开始(比如v-cloak)
Vue指令汇总
v-cloak
插值表达式存在问题“闪动”,可以使用v-cloak解决这个问题,解决该问题的原理:先隐藏,替换好之后再显示最终的值
<!DOCTYPE html>
<head>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="hello">
<p v-cloak>{{msg}}</p>
</div>
<script>
new Vue({
el:'#hello',
data() {
return {
msg:'hi winter',
}
}
})
</script>
</body>
</html>
v-pre,v-text,v-html
- v-text填充纯文(相比插值表达式更简单,没有闪动问题)
- v-html填充html片段(存在安全问题,本网站内部数据可以使用,来自第三方的数据不可以使用)
- v-pre填充原始信息(显示原始信息,跳过编译过程)
<!DOCTYPE html>
<head>
<style></style>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="hello">
<p v-text="msg1">{{msg}}</p>
<p v-html="msg1"></p>
<p v-pre="msg">{{msg}}</p>
</div>
<script>
new Vue({
el:'#hello',
data() {
return {
msg1:'<h1>hi winter1</h1>',
msg:'<h1>hi winter</h1>',
}
}
})
</script>
</body>
</html>
v-once
只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
v-model
在表单控件或者组件上创建双向绑定,所谓双向绑定就像下面的图,v-model的底层原理就是:属性绑定+事件绑定
<input v-bind:value="msg" v-on:input="msg=$event.target.value">
Vue使用mvvm我们不需要关注viewModel是怎么实现的,他是Vue自己实现的,我们只要关注view和Model(负责存储数据)
所以在vue中数据(model)变化了,视图(view)就会改变,这个实现是vm层做的,vue会监听到数据变化映射到视图层
<!DOCTYPE html>
<head>
<style></style>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="hello">
<p>{{msg}}</p>
<input type="text" v-model="msg">
</div>
<script>
Vue.config.devtools = true;
var vm = new Vue({
el:'#hello',
data:{
msg:"ssss"
}
});
</script>
</body>
</html>
v-click
- 绑定事件监听器
<!DOCTYPE html>
<head>
<style></style>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="hello">
<p @click='num++'>{{num}}</p>
<p >{{num}}</p>
<!--
v-on:click可以简写为@click
v-on:click='handleClick' 直接绑定事件函数名称,默认第一个参数是event(事件对象,隐式传递)
v-on:click='handleClick()' 调用函数,可以传入参数,最后一个参数就是event(事件对象,显式传递)
--->
<button v-on:click='handleClick'>点击数字增加</button>
<button @click='handleClick()'>点击数字增加</button>
<button @click='handleClick(123,123,$event)'>点击数字增加</button>
</div>
<script>
Vue.config.devtools = true;
var vm = new Vue({
el:'#hello',
data:{
num:1
},
methods:{
handleClick:function(){
this.num++; // this就是vm(vue的实例对象)
},
handleClick:function(p,p1,event){
console.log(p,p1,event.target.tagName); // 获取事件对象
}
}
});
</script>
</body>
</html>
- 事件修饰符
- .stop:阻止冒泡
- .prevent:阻止默认行为
<!DOCTYPE html>
<head>
<style></style>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="hello">
<div @click="handleDivClick">{{divValue}}
<p @click="handlePClick">{{pValue}}
<div v-on:click.stop="handleSpanClick">{{spanValue}}</div>
</p>
<!--
利用v-on:click.prevent阻止默认行为发生
-->
<a href="http://www.baidu.com" v-on:click.prevent>百度</a>
</div>
</div>
<script>
Vue.config.devtools = true;
var vm = new Vue({
el:'#hello',
data:{
divValue:'div',
pValue:'p',
spanValue:'span'
},
methods:{
handleDivClick:function(){
console.log(this.divValue);
},
handleSpanClick:function(){
console.log(this.spanValue);
},
handlePClick:function(){
console.log(this.pValue);
}
}
});
</script>
</body>
</html>
- 按键修饰符
- .delete:删除键
- .enter:回车键
<!DOCTYPE html>
<head>
<style></style>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="hello">
<p>name<input type="text" v-model="name" v-on:keyup.enter='submit' v-on:keyup.delete='clear'></p>
<p>password<input type="text" v-model="password" v-on:keyup.enter='submit' v-on:keyup.delete='clear'></p>
<button type="submit" @click='submit'>提交</button>
</div>
<script>
Vue.config.devtools = true;
var vm = new Vue({
el:'#hello',
data:{
name:'',
password:''
},
methods:{
submit:function(){
console.log(this.name,this.password);
},
clear:function(){
this.name = "";
this.password = "";
}
}
});
</script>
</body>
</html>
- 自定义按键修饰符
- Vue.keyCodes对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义按键修饰符</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-on:keyup.aaa='handle' v-model='info'>
</div>
<script type="text/javascript">
/*
事件绑定-自定义按键修饰符
规则:自定义按键修饰符名字是自定义的(aaa),但是对应的值必须是按键对event.keyCode的值
*/
Vue.config.keyCodes.aaa = 65
var vm = new Vue({
el: '#app',
data: {
info:'hello'
},
methods: {
handle:function(event){
console.log(event.keyCode)
}
}
})
</script>
</body>
</html>
v-bind
- 属性绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-bind属性绑定</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
/*
v-bind:href可以缩写为 :href
*/
<a :href="url">{{urlName}}</a>
<a v-bind:href="url">{{urlName}}</a>
<button @click="handleClick">点击修改url</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
url:"http://www.baidu.com",
urlName:"百度"
},
methods: {
handleClick:function(){
this.url = "http://www.hao123.com"
this.urlName="好123"
}
}
})
</script>
</body>
</html>
- class样式绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-bind属性绑定</title>
<style>
.active {
width:100px;
height: 100px;
background-color: yellowgreen;
}
.error{
color: red;
}
</style>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
/*
利用对象
*/
<div v-bind:class="{active:isActive,error:isError}">test</div>
/*
利用数组
*/
<div v-bind:class="[activeClass,errorClass]">test</div>
<button @click="handleClick">切换属性是否展现</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
/*
利用isActive的值在true和false之间进行切换
*/
isActive:true,
isError:true,
activeClass:"active",
errorClass:"error"
},
methods: {
handleClick:function(){
this.isActive=!this.isActive;
this.isError=!this.isError;
this.activeClass == ""? this.activeClass ='active':this.activeClass ="";
this.errorClass == ""? this.activeClass ='error':this.errorClass =""
}
}
})
</script>
</body>
</html>
- style样式处理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-bind样式绑定</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-bind:style="{width:widthStyle,height:heighStyle,backgroundColor:colorStyle}">test</div>
<div v-bind:style="objStyle">test</div>
<button @click="handleClick">修改样式</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
widthStyle:'100px',
heighStyle:'100px',
colorStyle:'red',
objStyle:{
width:"100px",
height:"100px",
backgroundColor:"red"
}
},
methods: {
handleClick:function(){
this.widthStyle = "200px";
this.objStyle.width="200px"
}
}
})
</script>
</body>
</html>
v-show,v-if,v-else-if,v-else
v-if和v-show的区别:
- v-if控制元素是否渲染到页面(visibility:hidden)
- v-show控制元素是否展示(display:none)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-bind属性绑定</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-if='score>90'>优秀</div>
<div v-else-if='score<=90 && score>=80'>良好</div>
<div v-else-if='score<=80 && score>60'>及格</div>
<div v-else>不及格</div>
<div v-show="isShow">v-show</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
score:50,
isShow:false
}
})
</script>
</body>
</html>
v-for
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-bind属性绑定</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--
v-for = 'item in list'
-->
<li v-for='item in list'>{{item}}</li>
<!--
v-for = '(item,index) in list'
-->
<li v-for='(item,index) in student'>{{item.cname}}+'---'+{{index}}</li>
<!--
:key='item.id' v-for='(item,index) in list'
-->
<li :key='item.id' v-for='(item,index) in list'>{{item}}+'---'+{{index}}</li>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
list:["nianyuyu","winter"],
student:[{
ename:'apple',
cname:'苹果'
},{
ename:'banana',
cname:'香蕉'
}]
}
})
</script>
</body>
</html>