vue的指令:
带有v-前缀的特殊属性,指令在于在表达式的值改变时,将某些行为应用到DOM上。
v-bind:绑定属性,简写: v-bind == : ==
<div id="app">
<img v-bind:src="imgURL" alt=""></img>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
name : "web前端开发之JavaScript(js)精英课堂",
imgUrl: "https://dss0.bdstatic.com/6Ox1bjeh1BF3odCf/it/u=3533778697,2586993014&fm=74&app=80&f=PNG&size=f121,121?sec=1880279984&t=1dbed90be2871a78074bf731b6872ed0"
},
})
</script>
v-bind绑定多个类名:数组[],对象[],三元表达式: ? :
//单个类名
:class = "name1"
//多个类名
:class = "[name1,name2]"
//判断是否添加
:class = "{red : true}"
//如果red后跟的是true则添加该类名到元素中,如果为false则不进行添加;该操作不会影响之前已有的类名
v-bind绑定元素的样式: 数组[] 对象{}
//对象
:style = "{background-color:red}"
//数组
:style = "[{background-color:red},{height:divheight}]"
v-on:绑定事件简写: @
<button @:type="script代码或者函数名称">
//时间对象$event
v-if 和 v-show
v-if:控制元素的显示与隐藏
v-show:控制员素的显示与隐藏
<div v-if="true"></div>
//显示
<div v-if="false"></div>
//隐藏
<div v-show="true"></div>
//显示
<div v-show="true or false"></div>
//隐藏
v-if与v-show的区别:
v-if:控制增删DOM元素,实现显示与隐藏的效果;
v-show:通过设置DOM员素的display属性的值,实现显示与隐藏的效果;
v-show:不能在template上使用;
v-for
循环数组:
<ul>
<li v-for="(item,index) in array">{{item}}</li>
//item:数组中的值;index:数组中的下标
</ul>
循环对象:
<ul>
<li v-for="(value,key,index) in array">{{item}}</li>
//item:对象中的值;key: 对象的键; index:对象中的下标
</ul>
循环数字:
<ul>
<li v-for="item in 10">{{item}}</li>
//item:1到10
</ul>
循环字符串:
<ul>
<li v-for="item in 'Hello'">{{item}}</li>
//item:字符串中的每一项
</ul>
==注意:在使用v-for时最好加上一个key值,这样在对数组进行操作时,如果key值和原来的值一样,则不操作dom,直接对之前的dom元素进行复用 ==