[JavaScript知识库]vue2 基础知识点学习日记的总结（2）

vue的其他指令：

(注意：content 表示 vue 实例中 data 的数据)

(1): v-bind

v-bind 动态为属性绑定变量? 例：

<img v-bind:src="imgURL">

语法糖（简写）：':' 一个冒号 例：

<img :src="imgURL">

v-bind也可以绑定类名class等，class的值可以是数组或者是对象，大部分是对象，对象中包括一组组键值对，类名就是对应的样式，也就是键；后边的值就是对应着增加和移除该类，取值是true和false；

<div :class="{类名1:true/false,类名2:true/false}"> {{message}}</div>

数组的形式用的很少，和直接写死的区别是，在[]数组中没有加单引号，vue会将其当成变量解析，如果直接加单引号，就会被当成类名的字符串，也可以写到methods方法中。
在这个vue实例中使用变量，要加上this.

<div :class="[类名1,类名2]">{{message}}</div>

(2): v-on

v-on 事件监听器

语法糖（简写）：@

基础用法：

1.在需要进行事件监听的地方绑定事件监听器；

<button @="btnClick">按钮<button>

?2.在vue实例中的methods里定义事件；

methods: {
btnClick() {
  console.log("btnClick点击了！")
 }
}

?参数传递问题：

1.事件调用方法没有参数那么以下两种写法效果一样。

<button @="btnClick">按钮<button>
<button @="btnClick()">按钮<button>

2.?在事件定义时，写方法时省略了小括号，但是方法本身是需要一个参数的，这个时候，Vue会默认将浏览器自己生成的event事件对象作为参数传入到方法中。

<button @="btnClick">按钮<button>

methods: {
btnClick(a) {
  console.log(a)  //这个a就是浏览器生成的 event 事件对象
 }
}

3.?方法定义时，我们需要event对象，同时又需要传入其他参数，在调用方法时，手动的获取到浏览器参数的event对象： $event

<button @click="btnClick('abc', $event)">按钮</button>

?v-on的常用修饰符：

1.? .stop 阻止事件冒泡，调用event.stopPropagation()

2.? .prevent 阻止默认事件，调用event.preventDefault()

3.? @keyup.enter? 监听回车键的弹起，同时也可以@keydown.esc监听esc键按下

4.? .native 监听组件根元素的原生事件

5.? .once 只触发一次回调

(3) v-for

基础格式： v-for="item in 对象/数组"

注意：vue官方推荐我们在使用 v-for 时，给对应的元素或组件添加上一个? :key属性? ?:key="item"

key的作用主要是为了高效的更新虚拟DOM

<p v-for="item in content" :key="item">{{item}}</p>

1.迭代普通数组

在 data 中定义普通数组

data:{
      list:[1,2,3,4,5,6]
 }

在html中使用 v-for 指令渲染

<p v-for="(item,i) in list">--索引值--{{i}}   --每一项--{{item}}</p>

?2.迭代对象数组

在 data 中定义对象数组

data:{
      listObj:[
        {id:1, name:'zs1'},
        {id:2, name:'zs2'},
        {id:3, name:'zs3'},
        {id:4, name:'zs4'},
        {id:5, name:'zs5'},
        {id:6, name:'zs6'},
      ]
}

?在html中使用 v-for 指令渲染

<p v-for="(user,i) in listObj">--id--{{user.id}}   --姓名--{{user.name}}</p>

3.迭代对象

在 data 中定义对象

data:{
      user:{
        id:1,
        name: '党航航',
        gender: '男',
        age: 19,
        height: 1.88
      }
}

??在html中使用 v-for 指令渲染

<p v-for="(val,key) in user">--键是--{{key}}--值是--{{val}}</p>

?4.迭代数字

<!-- 注意：如果使用v-for迭代数字的话，前面 count 的值从 1 开始-->
<p v-for="count in 10">这是第{{count}}次循环</p>

(4) v-model?

vue使用v-mode用于表单数据的双向绑定,?v-model本质上是一个语法糖。

如代码<input v-model="test">本质上是

<input :value="test" @input="test = $event.target.value">

1. v-bind绑定一个value属性

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

v-model修识符

1.? lazy? 让数据在失去焦点或者回车时才会更新

<input v-model.lazy="content" >

2.? number? 可以让在输入框中输入的内容自动转为数字类型

<input v-model.trim="content">

3.? trim? 可以过滤内容左右两边的空格

<input v-model.number="content" type="number">

(5): v-if

v-if?的作用相当于Js中的 if 判断，只不过这次写法上有所不同。

v-if?的变量值一般都是true或者false。效果就像是显示（true）、隐藏（false）。

v-if?除了多应用于条件判断，还会用于视图之间的切换。

<div v-if="content>90">优秀</div>

(6): v-else-if 和 v-else

v-else-if 和 v-else 作用相当于Js中的else if 和 else。

<div v-if="content>90">优秀</div>
<div v-else-if="content>70">良好</div>
<div v-else-if="content>60">及格</div>
<div v-else>不及格</div>

(7): v-show

v-show?用法和 v-if 差不多，作用也差不多，他俩结果都为true时没有区别但当他俩为false时有很大的区别。

区别：

v-show：当条件为false时，v-show只是给我们的元素添加了一个行内样式：dispaly:nane;

v-if: 当条件判断为false时，包含v-if指令的元素根本就不会存在DOM中；

介意：当需要在显示和隐藏之间切换很频繁时用v-show ; 当只有一次切换时，通过使用v-if (工作中最多使用v-if)