指令

一、事件监听：v-on指令

监听用户发生的事件，比如点击、拖拽、键盘事件等等，以便和用户交互。使用v-on指令

v-on介绍

• 作用：绑定事件监听器
• 缩写：@
• 预期： Function Inline Statement Object
• 参数：event

v-on的基本使用

<div id="app">
  <h2>{{counter}}</h2>
  <button @click="increment">+</button>
  <button @click="decrement">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
  el: "#app",
  data: {
    counter: 1
  },
  methods: {
    increment: function () {
      return this.counter++
    },
    decrement: function () {
      return this.counter--
    }
  }
})
</script>

v-on的参数传递问题

• 第一种 无参数 正常输出字符串

  <button @click="btn1Click">按钮1</button>
   btn1Click () {
      console.log("btn1Click");
    },
  

• 第二种 需要参数时 会有三种情况

   <!--正常传入参数-->
   <button @click="btn2Click(123)">按钮2</button>
   <!--没有传参数-->
   <button @click="btn2Click()">按钮2</button>
   <!--省略了小括号 但是方法本身需要一个参数，这个时候，Vue会默认 
  将浏览器产生的event事件对象作为参数传入到方法-->
   <button @click="btn2Click">按钮2</button>
  
    btn2Click (event) {
      console.log('......', event);
    },
  

• 第三种 有参数，还需event对象

   <!--在事件定义时，我们需要event对象，同时有需要其他参数-->
   <!--手动获取浏览器参数的event对象:$event-->
   <button @click="btn3Click(abc,  $event)">按钮3</button>
  
    btn3Click (abc,event) {
      console.log('++++++', abc, event);
    }
  

v-on的修饰符使用

在某些情况下，我们拿到event事件的目的可能是进行一些事件处理

Vue提供了修饰符来帮助我们方便处理一些事件

• stop：调用event.stopPropagation()
• prevent：调用event.preventDefault()
• {keyCode|keyAlias}：只当事件是从特定键触发时才触发回调
• native：监听组件根元素的原生事件
• once：只触发一次回调

1.stop修饰符的使用

在不加.stop的时候，点击按钮时divClick事件也会触发，为了点击按钮时不触发div的事件，只触发按钮自己的事件，这时用.stop修饰符

<div @click="divClick">
click
<button @click.stop="btnClick">按钮</button>
</div>

divClick(){
  console.log("divClick");
},
btnClick(){
  console.log("btnClick");
}

2. .prevent修饰符的使用（阻止默认事件）

<form action="baidu">
  <input type="submit" value="提交" @click.prevent="submitClick">
</form>

submitClick(){
  console.log("submitClick");
}

3. 监听键盘某个按键按钮的点击

<!--3. 监听某个键盘的键帽 enter 只监听输入键-->
<input type="text" @keyup.enter="keyUp">

  keyUp(){
    console.log("keyUp");
  }

4. .once修饰符的使用

<!--使按钮只能触发一次，例如：投票 只能投一张-->

<button @click.once="btn2Click">按钮2</button>
 btn2Click(){
    console.log("btn2Click");
  }

二、条件判断

v-if的使用

<div id="app">
  <h2 v-if="isShow">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
  el: "#app",
  data: {
    message: "你好啊！",
    isShow: true
  }
})
</script>

v-if和v-else的结合使用

<div id="app">
  <h2 v-if="isShow">{{message}}</h2>
  <h1 v-else>false时，显示我</h1>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
  el: "#app",
  data: {
    message: "你好啊！",
    isShow: true
  }
})
</script>

v-if、v-else-if和v-else的结合使用

<div id="app">
  <h2 v-if="score>=90">优秀</h2>
  <h2 v-else-if="score>=80">良好</h2>
  <h2 v-else-if="score>=60">及格</h2>
  <h2 v-else="score<90">补考</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
  el: "#app",
  data: {
    score: 95
  }
})
</script>

不推荐上面这种写法，最好使用计算属性

<div>
  <h1>{{result}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
  el: "#app",
  data: {
    score: 95
  },
  computed: {
    result(){
      let showMessage = "";
      if (this.score>=90){
        showMessage = "优秀"
      }else if (this.score>=80){
        showMessage = "良好"
      }else if (this.score>=60){
        showMessage = "及格"
      }else {
        showMessage = "补考"
      }
      return showMessage
    }
  }
})
</script>

注：vue的input存在的小问题

当我们在输入框中输入后，再切换登陆方式时，输入的内容还保存着
因为vue底层有虚拟DOM会把即将显示的东西放到内存中，会优先复用已存在的input
如果不想在切换后仍然显示，那么可以给input加key,起到标识的作用
key是vue内置属性

v-show的使用以及和v-if的区别

<!--v-if：当条件为false时，包含v-if指令的元素，根本不会存在dom中-->
<h2 v-if="isShow">{{message}}</h2>
<!--v-show：当条件为false时，v-show只是给元素添加一个行内样式：display：none-->
<h2 v-show="isShow">{{message}}</h2>

三、循环遍历

-v-for遍历数组 语法：v-for="items in item"

<div id="app">
<!--1.在遍历的过程汇总，没有使用索引值（下标值）-->
<ul>
  <li v-for="name in names">{{name}}</li>
</ul>
<!--2.在遍历的过程中，显示索引值-->
<ui>
  <li v-for="(name,index) in names">
    {{index+1}}.{{name}}
  </li>
</ui>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
  el: "#app",
  data: {
    names: ["why","james","kobe","curry"]
  }
})
</script>

v-for遍历对象

<div id="app">
<!--1.在遍历对象时，如果只是获取一个值，那么得到的就是value-->
<ul>
  <li v-for="item in info">{{item}}</li>
</ul>

<!--2.获取key和value 格式：(value,key)-->
<ui>
  <li v-for="(value,key) in info">
    {{value}}-{{key}}
  </li>
</ui>

<!--3.获取value，key，index 格式：(value,key,index)-->
<ul>
  <li v-for="(value,key,index) in info">
    {{index}}.{{value}}-{{key}}
  </li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
  el: "#app",
  data: {
    info: {
      name: "hello",
      age:  38,
      height: 1.69
    }
  }
})
</script>

v-for绑定和非绑定key的区别

<ul>
  <li v-for="item in letters" :key="item">{{item}}</li>
</ul>

官网推荐我们在使用v-for时，给对应的元素或组件添加一个key属性，为了更好的复用
splice：在数组中插入数据 splice（2，0，'1'） 在第二位 后一位加入1 性能低
使用key：可以有效插入元素
https://www.bilibili.com/video/BV15741177Eh?p=37

扩展：哪些数组的方法是响应式的

数组方法展示：

<div id="app">
  <ul>
    <li v-for="item in letters">{{item}}</li>
  </ul>
  <button @click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      letters: ['A','B','C','D','E']
    },
    methods: {
      btnClick () {
        1.push()：在数组最后面添加元素 可以添加一个或多个
        this.letters.push('m','n','l')

        2.pop()：删除数组中的最后一位元素
        this.letters.pop();

        3.shift()：删除数组中的第一个元素
        this.letters.shift();

        4.unshift()：在数组最前面添加元素 可以添加一个或多个
        this.letters.unshift('aa','bb','cc');

        5.splice()：删除元素/插入元素/替换元素
        //第一个参数是你要从第几位开始操作数组
        删除元素：第二个参数传入你要删除几个元素（如果没有传，就删除后面所有的元素）
        this.letters.splice(1,2)
        替换元素：第二个参数，表示我们要替换几个元素，后面是用于替换前面的元素（也可以理解为删除几个元素后，再插入元素）
        this.letters.splice(1, 4,'m','n','l')
        插入元素：第二个参数，或者不写第二个参数,后面跟上要插入的元素
        this.letters.splice(1,0,'m','n','l')

        6.sort()：排序
        this.letters.sort();

        7.reverse()：内容反转
        this.letters.reverse();

        注意：通过索引值改变数组中的元素是非响应式的，上面的方法都是响应式的
        this.letters[0] = 'a'
        //而想要达到上面的效果，有以下两种方式
        1.this.letters.splice(0,1,'a')
        2.set(要修改的对象，索引值，修改后的值) vue内部方法，是响应式的
        vue.set(this.letters, 0, 'a')
      }
    }
  })
</script>

非响应式.png

四、过滤器

可以对数据进行预处理 85——￥85.00

td>{{item.price | showPrice}}</td>

filters: {
  showPrice(price) {
    return '￥' + price.toFixed(2)
  }
}

五、表单绑定 v-model（双向绑定）

1.v-mdoel的基本使用：实现双向绑定

双向绑定：即输入框和message信息改变其中任意一个，另一个就会随之改变

  <div id="app">
    <input type="text" v-model="message">
    {{message}}
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "你好啊！"
      }
    })
  </script>

2.v-model的原理

v-model其实是一个语法糖，它的背后本质上包含两个操作

• ①.v-bind绑定一个value元素

  <input type="text" v-bind:value="message">
  

• ②.v-on指令给当前元素绑定input事件

  <input type="text" @input="message = $event.target.value">
  上面是简单写法，下面为详细写法
  <input type="text" v-on:input="valueChange">
  methods: {
    valueChange(event) {
      this.message = event.target.value;
      console.log("...");
    }
  }
  

总结

 <input type="text" v-model="message">
  等同于
 <input type="text" :value="message" @input="message = $event.target.value">

3.v-model：radio

<div id="app">
<label for="male">
  <input type="radio" id="male" value="男" v-model="sex">男
</label>
<label for="female">
  <input type="radio" id="female" value="女" v-model="sex">女
</label>
<h1>您选择的性别是：{{sex}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
  el: "#app",
  data: {
    sex: "男"
  }
})
</script>

其中sex和radio通过v-model实现了双向绑定

4.v-model：checkbox

单选框：协议选择 v-model是布尔值

label好处：块级作用域，点击文字即可选择

<div id="app">
  <label for="agree">
    <input type="checkbox" id="agree" v-model="isAgree">同意协议
  </label>
  <h2>您选择的是：{{isAgree}}</h2>
  <button :disabled="!isAgree" @click="btnClick">下一步</button>
</div>
  <script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      isAgree: false
    },
    methods: {
      btnClick(){
        console.log("您已同意协议");
      }
    }
  })
</script>

复选框：复选框与数组绑定

<div id="app">
  <input type="checkbox" value="篮球" v-model="hobbies">篮球
  <input type="checkbox" value="足球" v-model="hobbies">足球
  <input type="checkbox" value="网球" v-model="hobbies">网球
  <input type="checkbox" value="排球" v-model="hobbies">排球
  <h2>您选择的是:{{hobbies}}</h2>
</div>
  <script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      hobbies: []
    },
  })
</script>

5.v-model：select（不常用）

• 单选

注意：v-model的位置

<div id="app">
<select name="" id="" v-model="fruit">
  <option value="香蕉">香蕉</option>
  <option value="苹果">苹果</option>
  <option value="橘子">橘子</option>
  <option value="西瓜">西瓜</option>
  <option value="鸭梨">鸭梨</option>
</select>
<h2>您选择的水果是：{{fruit}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
  el: "#app",
  data: {
    fruit: '香蕉'
  }
})
</script>

• 多选

使用multiple就可以多选了

<div id="app">
<select name="" id="" v-model="fruits" multiple>
  <option value="香蕉">香蕉</option>
  <option value="苹果">苹果</option>
  <option value="橘子">橘子</option>
  <option value="西瓜">西瓜</option>
  <option value="鸭梨">鸭梨</option>
</select>
<h2>您选择的水果是：{{fruits}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
  el: "#app",
  data: {
    fruit: '香蕉',
    fruits: []
  }
})
</script>

六、值绑定

所谓的值绑定，本质就是v-bind的应用

<div id="app">
<label v-for="item in originHobbies" :for="item">
  <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
</label>
<h2>您选择的是:{{hobbies}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
  el: "#app",
  data: {
    hobbies: [],
    originHobbies: ['篮球','足球','网球','排球']
  }
})
</script>

七、修饰符

1.lazy修饰符：

• 默认情况下：v-model是在input事件中同步输入框的数据，也就是说，一旦数据发生改变对应的data中的数据就会自动发生改变

  <div id="app">
  <input type="text" v-model.lazy="message">
  <h2>{{message}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "你好啊！"
      }
    })
  </script>
  

• lazy修饰符可以让数据在失去焦点或者回车时才会更新

2.numbei修饰符

• 默认情况下，输入框中无论输入的是字母还是数字，v-model都会将其当作字符串进行处理，但是如果希望处理的是数字类型，那么最好直接将内容当作数字处理

• number修饰符可以让在输入框中输入的内容自动转成数字类型

    <input type="number" v-model.number="age">
    <h2>{{age}}-{{typeof age}}</h2>
  

3.trim修饰符

• trim修饰符可以过滤内容左右两边的空格

mustache语法会自动去除左右空格

   <input type="text" v-model.trim="name">
   <h2>您输入的名字：{{name}}</h2>