2018-09-14
什么是Vue的指令？Vue的指令有哪些？其实这些这些看着繁琐的指令，他总共分为两大块（内置指令和自定义指令）。今天我们就先说说内置指令。
QAQ:只有元素可以设置样式。
①v-for
循环指令（遍历,其意义在于检查集合中的元素并做处理）根据一组数据的选项列表进行渲染。
eg:<li v-for="(item,index) in arbj">{{item}}</li>
②v-model
数据双向绑定，用于表单元素;他的指令在<input>,<textarea>,<select>元素上创建数据双向绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
eg:<input type="text" v-model="message">
<p>{{message}}</p>
③v-on
绑定事件监听器,事件类型由参数指定。表达式为：v-on：事件名="函数名"(事件名与Js不同，使用时没有on)。
eg:<button v-on:click="funcname"></button>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='exchange'>
<p>{{value}}</p>
<button v-on:click="exchanged">切换</button>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#exchange',
data:{
value:'hello word',
// txt:'hello vue',
blur:true
},
methods:{
exchanged:function(){
// this.value=this.txt
if(this.blur==true){
this.value='hello vue',
this.blur=false
}else{
this.value='hello word'
this.blur=true
}
}
}
})
//添加 push()
//删除 splice(index,n) //从哪开始 删除几个
</script>
</body>
</html>
效果图：
exchang-01.png
exchange-02.png
QAQ：数组元素的添加与删除（添加：push(),删除：splice(index,n)=》》 （从哪个开始删，删几个））。
④v-bind
动态的绑定一个或多个特性，或一个组件prop到表达式。在绑定class或style特性时，支持其他特性的值，如数组或对象。
(在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象)。表达式：v-bind:属性名="值",<script></script>中用methods（方式，方法）：{function(){}}切记只有函数调用时函数方可执行。
eg:<img v-bind:src="imageSrc">
QAQ：v-bind的属性名称驼峰化。
⑤v-show
控制元素显示影藏。不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
⑥v-if
隐藏属性=》》直接删了visibility:hidden;
QAQ:v-show，v-if的区别：
1 .v-if当值为 true时，显示div ，当值为false时，该元素消失，代码也会消失，相当于将代码删除了，当在为true时，页面会重新渲染div;
而v-show 控制的隐藏出现，只是将css属性设为了display：none 或block;
⑦v-else，v-else-if
不需要表达式，前一兄弟必须有v-if或v-else-if
if(){}
if(条件){1}else{2}
else...if 多重条件语句
if(){
}else if(){
}else if(){
}else{
}
v-if,v-else,v-else-if随机数效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<p v-if='num==0'>00000000000</p>
<p v-else-if='num==1'>1111111111</p>
<p v-else-if='num==2'>22222222</p>
<p v-else='num==5'>555555555555</p>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
// num:Math.floor(Math.random()*(max-min+1)+min)
num:Math.floor(Math.random()*(5-0+1)+0)
}
})
</script>
</body>
</html>
效果图:
num-01.png
num-02.png
num-03.png
v-for，v-model，v-on综合应用(添加列表)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<input type="text" v-model='txt'> <button v-on:click='add'>添加</button>
<ul>
<li v-for="(value,index) in arr">
{{value}}
<button v-on:click='delt(index)'>删除</button>
</li>
</ul>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el: '#itany',
data: {
arr: ['吃饭', '睡觉', '打游戏'],
txt: ''
},
methods: {
add: function() {
this.arr.push(this.txt),
this.txt = ''
},
delt: function(ind) {
this.arr.splice(ind, 1)
}
}
})
</script>
</body>
</html>
效果图：
add-list.png
图片来回效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul {
overflow: hidden;
}
li {
margin-left: 50px;
width: 60px;
border: 1px solid #000;
float: left;
text-align: center;
list-style: none;
}
</style>
</head>
<body>
<div id='itany'>
<img v-bind:src="url" alt="">
<ul>
<li v-for="(value,index) in list" v-on:click='chg(index)'>{{index+1}}</li>
</ul>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el: '#itany',
data: {
url: 'images/03.jpg',
// num:[1,2,3,4,5]
list: ['images/03.jpg', 'images/06.jpg', 'images/07.jpg']
},
methods: {
chg: function(ind) {
this.url = this.list[ind]
}
}
})
</script>
</body>
</html>
效果图：
jj-01.png
jj-02.png
jj-03.png
网友评论