vue.js|vue2 基础知识点学习日记的总结（2） vue.js|javascript|前端

vue的其他指令： (注意：content 表示 vue 实例中 data 的数据)
(1): v-bind v-bind 动态为属性绑定变量例：

文章图片

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

文章图片

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

{ {message}}

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

{ {message}}

(2): v-on v-on 事件监听器
语法糖（简写）：@
基础用法：
1.在需要进行事件监听的地方绑定事件监听器；

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

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

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

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

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

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

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

{ {item}}

1.迭代普通数组
在 data 中定义普通数组

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

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

--索引值--{ {i}}--每一项--{ {item}}

2.迭代对象数组
【vue.js|vue2 基础知识点学习日记的总结（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 指令渲染

--id--{ {user.id}}--姓名--{ {user.name}}

3.迭代对象
在 data 中定义对象

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

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

--键是--{ {key}}--值是--{ {val}}

4.迭代数字

这是第{ {count}}次循环

(4) v-modelvue使用v-mode用于表单数据的双向绑定, v-model本质上是一个语法糖。
如代码本质上是
<input :value="https://www.it610.com/article/test" @input="test = $event.target.value">

1. v-bind绑定一个value属性
2. v-on指令给当前元素绑定input事件
v-model修识符
1.lazy让数据在失去焦点或者回车时才会更新

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

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

(5): v-if v-if 的作用相当于Js中的 if 判断，只不过这次写法上有所不同。
v-if 的变量值一般都是true或者false。效果就像是显示（true）、隐藏（false）。
v-if 除了多应用于条件判断，还会用于视图之间的切换。

90">优秀

(6): v-else-if 和 v-else v-else-if 和 v-else 作用相当于Js中的else if 和 else。

90">优秀 70">良好 60">及格不及格

(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)