监听，判断，循环

一、v-on: 监听，可以监听dom的事件

1 这 里是监听button按钮的click事件，点击可以触发add方法。v-on事件监听的方法都是methods里面创建的方法

<button v-on:click="add">增加count</button>

2 v-on可以简写为@

<button @click="add">增加count1</button>

3 监听函数没有参数可以不写()，如果要传递参数需要把参数放入小括号。这里的小括号并不是立即运行函数

<span @click="dec(3)">递减</span>

 methods:{
   dec(num){ // 方法的简写,调用方法可以传递参数
       this.count-=num        
          }

4 如果需要函数的默认参数e并传递其他参数，需要用一个函数把e给传递过去如果需要函数的默认参数e并传递其他参数，需要用一个函数把e给传递过去

 <button @click="(e)=>handleClick(e,2)">点击事件2</button>

5 可以监听多个函数，多个函数则需要添加()

<div @click="add(),handleClick(1,2)">监听多个函数</div>

6 事件修饰符:v-on 指令提供了事件修饰符处理DOM事件的细节，比如阻止事件冒泡.stop等，事件修饰符可以链式

<div @click="click1">
    div1
    <!-- .stop 阻止事件冒泡 -->
    <div @click.stop="click2">div2</div>
    <!-- .prevent阻止a标签默认的跳转事件，同时阻止事件冒泡 -->
    <a @click.stop.prevent="click2" href="http://www.baidu.com">百度</a>
</div>

7 键盘事件修饰符,可以用键盘对应的英文字符修饰，表示对应的字符的按键按下才会触发对应事件

只有b字母键按下才会触发handleKeyDown事件

 <input @keydown.b="handleKeyDown">

二、条件语句

1 v-if指令：条件为true则渲染对应的dom，false则不渲染对应的dom

 <ul>
   <li v-if="score<60">不及格</li> 
   <li v-else-if="score>60 && scroe<80">优良</li>
   <li v-else>优秀</li>
 </ul>

  data(){
   return {
       count:1,
       idNumber:"id1",
       score: 40
           }

2 v-show: 通过改变css的display属性控制元素(true)显示或隐藏(false)

<ul>
    <li v-show="score<60">不及格</li>
    <li v-show="score>60 && scroe<80">优良</li>
    <li v-show="score>=90">优秀</li>
</ul>

  data(){
   return {
       count:1,
       idNumber:"id1",
       score: 40
          }

v-if和v-show都是控制元素的显示和隐藏，v-show是通过css属性控制，对于频繁的显示隐藏操作，效率比v-if高

三、循环语句指令 v-for

1 遍历数组: 需要把v-for放在需要遍历生成的dom上面，该dom元素及后代元素都是可以用遍历的变量

item是数组的元素，index是数组的索引

key属性是vue里面虚拟dom的diff算法的参考标识，遍历生成的dom需要有唯一的key值可以提高比较速度，只要是遍历生成的dom必须要绑定唯一key

<ul>
  //arr是数组名。必须要:key绑定一个唯一值，提高比较速度
   <li v-for="(item,index) in arr" :key="item.name"> 
       {{index}}-<span>姓名:{{item.name}}</span><em>年龄:{{item.age}}</em>
</li>

data(){
  return {
     arr:[{name:"a1",age:12},{name:"a2",age:13},{name:"a3",age:16}],
  }
}

2 遍历对象

key是对象属性，value是属性值，index是索引号

<div>
   <p v-for="(value,key,index) in people" :key="key">{{index}}-{{key}}-{{value}}</p>
</div>

data(){
  return {
    people:{
        name:"zhang1",
        age:22,
        address: "xxx"
      }
    }
  }

四、class属性绑定

<style>
    .box{
        width: 100px;
        height: 100px;
        border: 1px solid gray;
    }
    .green{
        background-color: green
    }
    .red{
        background-color: red;
    }
</sttyle>

1 可以把class类对象放data()的数据里面

<div :class="classState"></div> // 显示box类，不显示green类
data(){
    return {
        classState:{box:true,green:false},
    }
}

2 数组写法

<div :class="['box','red']"></div> //显示box类和red类

3 扩展，绑定属性可以和原生共存

<div class="box" :class="['green']"></div>

五、style属性绑定

1 对象形式绑定style样式

<div :style="{color:'red',fontSize:'18px',border:'1px solid gray',height:'100px'}"></div>

2 数组对象的方式的方式

<div :style="[style1,style2]"></div>

data(){
    return {
        style1:{color:'red',fontSize:"22px"},
        style2:{backgroundColor:'green',height:'50px'}
    }
}

<div :style="[style1,style2]"></div>

data(){
    return {
        style1:{color:'red',fontSize:"22px"},
        style2:{backgroundColor:'green',height:'50px'}
    }
}