自学vue第二天

指令修饰符

通过’.'运算符指名一些指令后缀，不同后缀封装了不同的处理操作 ->简化代码

按键修饰符

@keyup.enter -> 键盘回车监听

@keyup 是对键盘的所有按键进行监听，通过后缀特指某个按键，从而满足某些特殊需求

v-model修饰符

v-model.trim .trim 去除首尾空格
v-model.number .number 转为数字

事件修饰符

@事件名.stop 阻止冒泡
@事件名.prevent 阻止默认行为

v-bind 操纵样式class

##   :class="对象"
<div :class="{类名1:布尔值,类名2:布尔值}"></div>
##   :class="数组"
<div :class="[类名1,类名2]"></div>

v-bind 操纵样式style

<div :style="{ css属性名1 : css属性值, css属性名2 : css属性值 }"></div>

注意style对象里的属性名支持小驼峰写法，不支持-
若要用- ，应该用" "引起来 ‘background-color’

v-model 应用于其他表单元素

默认绑定的标签的属性

输入框 input:text -> value
文本域 textarea -> value
复选框 input:checkbox -> checked
单选框 input:radio -> checked
下拉菜单 select -> value
…

<template>
  <div>
    <p>小黑学习网</p>
    姓名:
    <input type="text" v-model="username">
    <br>
    是否单身:
    <input type="checkbox" v-model="isSingle">
    <br>
<!--
  前置理解：
    name : 给单选框加上name属性，可以分组，name属性值相同的为同一组，各个选项互斥
    value: 给单选框加上value属性，用于提交给后台的数据
  结合vue使用  -> v-model
-->
    性别:
    <input v-model="gd" type="radio" name="gender" value="1">男
    <input v-model="gd" type="radio" name="gender" value="2">女

<!--
  前置理解：
    option 需要设置value值，提交给后台
    select 的value值，关联了选中的option的value值
  结合vue使用  -> v-model
-->
    <select v-model="cityId">
      <option value="101">北京</option>
      <option value="102">上海</option>
      <option value="103">成都</option>
      <option value="104">天津</option>
    </select>
    
  </div>

</template>

<script>
export default {
// eslint-disable-next-line vue/multi-word-component-names
  name: "Demo",
  data() {
    return {
      username :"",
      isSingle : true,
      gd: 2,
      cityId: 103
    }
  }
}
</script>

计算属性computed

基于现有的数据，计算出来的新属性

所以使用的时候当作属性来使用而不是函数调用

  <p>{{totalCount}}</p>
##<p>{{fn1()}}</p>  错误写法
....
data() {
    return {
     list:[
       {id:1,name:"篮球",num:3},
       {id:2,name:"玩具",num:1},
       {id:3,name:"铅笔",num:2}
     ]
    }
  },
  computed: {
     totalCount() {
    //   reduce 数组求和函数  reduce((阶段值,当前遍历数组项) => 累加逻辑),初始值)
      let total = this.list.reduce((sum,item) => sum + item.num  ,0)
      return total
    }
  }

计算属性computed相较于methods方法，更高效，具有缓存特性。
另外methods方法更专注于业务逻辑的处理，而计算属性更专注于对数据的封装处理

计算属性的完整写法

methods: {
  changeName (){
  	this.fullName = 'zdq'
  }
}
computed:{
	fullName: {
	      get() {
	        return this.firstName + this.lastName
	     	 },
	      # set函数的参数value值来自于对fullName属性的赋值
	      set(value) {
	      	#对字符串的分割 slice(起始,结束)
	        this.firstName = value.slice(0,1)
	        this.lastName = value.slice(1)
	    	  }
	
	    }
	 }