指令

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

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

v-on介绍

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

v-on的基本使用

  
{{counter}}
  +
  -

v-on的参数传递问题

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

  按钮1
   btn1Click () {
      console.log("btn1Click");
    },
  

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

   
   按钮2
   
   按钮2
   
   按钮2
  
    btn2Click (event) {
      console.log('......', event);
    },
  

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

   
   
   按钮3
  
    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修饰符

click
按钮


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

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

  


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

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

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

4. .once修饰符的使用

按钮2
 btn2Click(){
    console.log("btn2Click");
  }

二、条件判断

v-if的使用

  
{{message}}

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

  
{{message}}
  
false时，显示我

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

  
优秀
  
良好
  
及格
  
补考

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

  
{{result}}

注：vue的input存在的小问题

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

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

{{message}}

{{message}}

三、循环遍历

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

  
{{name}}



  

    {{index+1}}.{{name}}
  

v-for遍历对象

  
{{item}}




  

    {{value}}-{{key}}
  




  

    {{index}}.{{value}}-{{key}}
  

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

  
{{item}}

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

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

数组方法展示：

  

    
{{item}}
  
  按钮

非响应式.png

四、过滤器

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

td>{{item.price | showPrice}}

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

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

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

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

  

    
    {{message}}
  
  
  

2.v-model的原理

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

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

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

  
  上面是简单写法，下面为详细写法
  
  methods: {
    valueChange(event) {
      this.message = event.target.value;
      console.log("...");
    }
  }
  

总结

 
  等同于
 

3.v-model：radio

  男


  女

您选择的性别是：{{sex}}

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

4.v-model：checkbox

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

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

  
    同意协议
  
  
您选择的是：{{isAgree}}
  下一步

  

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

  篮球
  足球
  网球
  排球
  
您选择的是:{{hobbies}}

  

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

• 单选

注意：v-model的位置

  香蕉
  苹果
  橘子
  西瓜
  鸭梨

您选择的水果是：{{fruit}}

• 多选

使用multiple就可以多选了

  香蕉
  苹果
  橘子
  西瓜
  鸭梨

您选择的水果是：{{fruits}}

六、值绑定

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

  {{item}}

您选择的是:{{hobbies}}

七、修饰符

1.lazy修饰符：

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

  
  
  {{message}}
  
  
  
  

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

2.numbei修饰符

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

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

    
    
  {{age}}-{{typeof age}}
  

3.trim修饰符

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

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

   
   
您输入的名字：{{name}}