Vue学习笔记 day2

[imyanglan]

学习视频地址：(https://www.bilibili.com/video/av59594689?p=12)

Vue基础语法

ps：首先我们要用webstorm来建立一个模板（视频教程有如何操作）

一、插值操作

• Mustache

  Mustache：胡子、胡须。 通过Mustache语法（也就是双大括号）将data中的文本数据，插入到HTML中，并且数据是响应式的。

• v-once

  once：一次、一旦。 在某些情况下，我们可能不希望界面随意的跟随改变 这个时候我们可以使用这个Vue指令

①. 该指令后面不需要跟任何表达式

②. 该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。

v-once指令的使用

• v-html

  在某些情况下，我们从服务器获取过来的数据本事就是一个HTML代码

如果我们直接通过{{}}来输出，会将HTML代码也一起输出。

如果我们需要的是按照HTML格式进行解析，并且显示对应内容

可以使用v-html指令 该指令后面往往会跟上一个string类型 会将string的html解析出来并且进行渲染

v-html指令的使用

• v-text

v-text作用就和Mustache比较相似：都是用于将数据显示在界面中。 v-text通常情况下，接受一个string。

v-text因为不太灵活所以不经常使用，它不会将数据进行拼接。

v-text指令的使用

• v-pre

  v-pre用于跳过这个元素和它的子元素的编译过程，用于显示原本的Mustache语法。

这以前也有一个<pre></pre>的标签，该标签的作用就是将其包裹的内容原封不动的展示出来。

v-pre指令的使用

• v-cloak

  cloak:斗篷。

在某些情况下，我们浏览器可能会直接显示出来未编译的Mustache标签，而还没读到对其进行编译的那段代码，这时显示出来未经编译的数据可能造成观感上的影响，我们要怎样处理这个问题呢？。 可以通过我这例子来进行处理哦~

v-cloak指令的使用

二、绑定属性

前面我们学习的指令主要是将值插入到我们模板的内容当中。但是，除了内容需要动态来决定外，有一些属性我们也需要动态来绑定。

(比如说动态绑定a元素的href属性或者动态绑定img元素的src属性)

• v-bind

  作用：动态绑定属性
  缩写：：(语法糖写法)
  预期：any(with argument) 任意的参数  | Object (without argument) 对象
  参数：attrOrProp(optional)

  v-bind基本使用

①. v-bind绑定class

绑定class有两种方式：对象语法、数组语法。

v-bind绑定class（对象语法）

v-bind绑定class（数组语法）

根据视频学习中，老师所布置的作业，完成的结果。如果想依靠自己独立完成请不要点击以下链接。

（一开始我也弄了很久，其实是思路没走对，不要想太复杂一步步来，相信自己！）

v-bind和v-for结合的作业

②. v-bind绑定style

我们可以利用v-bind来绑定一些CSS内联样式。

绑定方式一：对象语法

绑定方式二：数组语法

三、计算属性

我们知道，在模板中可以直接通过插值语法显示一些data中的数据。但在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示。

• 计算属性的基本操作

比如我们有两个变量，需要拼接显示，而且多个地方都需要的话，我们就要写很多遍，这样数据又多，可读性又差。所以我们会用到我们的计算属性来解决这一类问题。以下就是用计算属性所做的两个练习 ①计算属性的基本使用 ②计算属性的复杂操作

• 计算属性的setter和getter

  每个计算属性都包含一个setter和getter

平常我们只是使用getter来解读所以一般都是使用简写的方式写计算属性，在某些情况下我们也可以使用我们的setter方法，不过它不常用。

计算属性setter和getter

• 计算属性的缓存

  我们可能会考虑这样一个问题： methods和computed看起来都可以实现我们的功能，那么为什么还要多一个计算属性这个东西呢？

计算属性会进行缓存，如果多次使用，计算属性只需调用一次。

计算属性的缓存

学习网址：(https://www.bilibili.com/video/av59594689?p=29)

四、事件监听

在前端开发中我们需要经常和用户交互。这个时候，我们就必须监听用户发生的事件，比如：点击、拖拽、键盘事件等等。

在Vue中如何监听事件呢？使用v-on指令

• v-on介绍

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

  v-on的基本使用

• v-on参数

  当通过methods中定义方法，以供@ click调用时，需要注意参数问题

在事件监听的时候方法又不用传参数的话我们的方法可以不再后面加小括号，在Mustache{{}}语法中，方法的小括号不管有没有参数都不能省略。

情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。

但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去。

情况二：如果需要同步传入某个参数，同时需要event时，可以通过$event传入事件。

v-on的参数问题

• v-on修饰符

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

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

◆.stop - 调用 event.stopPropagation()。

◆.prevent -调用 event.preventDefault()。

◆{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

◆.netive - 监听组件根元素的原生事件。

◆.once - 只触发一次回调。

v-on的修饰符

五、条件判断

• v-if、v-else-if、v-else

  这三个指令与JavaScript的条件语句if、else、else if 类似。

Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件。

• v-if的原理

v-if后面的条件为false时，对应的元素以及子元素不会渲染。 也就是根本没有不会有对应的标签出现在DOM中。

v-if的使用

• v-else的原理

一般是和v-if一起使用，为不满足v-if条件的元素渲染

v-if和v-else的使用

• v-else-if的原理

和v-if一起使用作为v-if之外的条件，用于多条件判断。

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

• 条件渲染案例

  在日常的生活中，我们也经常会接触到类似的条件渲染，比如说我们下载使用的某个app每次使用都会问你，通过账号登录，还是邮箱登录或者是手机验证登录的问题。

我们以此来做一个简单的小案例：

案例

我们的这个案例还有个小问题：

如果我们在有输入内容的情况下，切换了类型， 我们会发现文字依然显示之前的输入的内容。 但是按理来说，我们应该切换到另一个input元素中了。 在另一个input元素中，我们并没有输入内容。 为什么会有这个问题呢？

问题解答：

这是因为Vue在进行DOM渲染时，由于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建的元素。 在上面的案例中，Vue内部会发现原来的input元素不再使用，直接作为else中的input来使用了。

案例解答

解决方案：

如果我们不希望Vue出现类似重复利用的问题，可以给对应的input添加key，并且我们需要保证可以的不同。

• v-show

  v-show的用法和v-if非常相似，也是用于决定一个元素是否渲染。

  v-if和v-show对比

v-if当条件为false时，压根就不会有对应的元素在DOM中。 v-show当条件为false时，仅仅是将元素的display属性设置为none而已。

在开发过程中我们如何选择呢？

当需要在显示和隐藏之间频繁切换时，我们使用v-show，当只有一次切换时，我们使用v-if。

v-show的使用

六、循环遍历

• v-for遍历数组

  当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成,v-for语法类似于JavaScript中的for循环。

  格式如下：item in items的形式

v-for循环遍历数组

• v-for遍历对象

  比如某个对象存储着你的个人信息，我们希望以列表的方式显示出来。

v-for遍历对象

• 组件的key属性

  官方推荐我们在使用v-for时，给对应的元素或组件添加上一个:key属性。（它的目的是为了让我们更好的复用）

  为什么需要这个key属性呢？

  这个其实和Vue的虚拟DOM的Diff算法有关系。
  当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点。我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的：即把C更新成F、D更新成C、E更新成D、最后再插入E，这样很没有效率。

  所以我们需要使用key来给每个节点做一个唯一标识

Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。

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

v-for使用过程添加key

• 检测数组更新

  因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据的变化，视图会发生对应的更新。

Vue中包含了一组观察数组编译的方法，使用它们改变数组就会触发视图的更新： ☆ push() ☆ pop() ☆ shift() ☆ unshift() ☆ splice() ☆ sort() ☆ reverse()

哪些数组的方法是响应式的

七、阶段案例

①图书购物车

八、v-model的使用

• 表单绑定v-model

  表单控件在实际开发中是非常常见的，特别是对于用户信息的提交，需要大量的表单。

  Vue中使用v-model指令来实现表单元素和数据的双向绑定。

  v-model的基本使用

  案例解析： 当我们在输入框输入内容时，因为input中的v-model绑定了message，所以会实时将输入的内容传递给message，message发生改变。 当message发生改变时，因为上面我们使用Mustache语法，将message的值插入到DOM中，所以DOM会发生响应的改变。 所以，通过v-model能实现双向的绑定。

• v-model原理

v-model其实是个语法糖，它的背后本质上是包含两个操作： 1.v-bind绑定一个value属性 2.v-on指令给当前元素绑定input事件

v-model原理

• v-model：radio

  当存在多个单选框时我们可以通过v-model绑定同一个变量实现互斥。

  v-model结合radio类型

• v-model：checkbox

  复选框分为两种情况：单个勾选框和多个勾选款

单个勾选框：

v-model即为布尔值。 此时input的value并不影响v-model的值。

多个勾选框：

当是多个复选框时，因为可以选中多个选项，所以对应的data中属性是一个数组。 当选中某一个时，就会将input中的value添加到数组中。

v-model结合checkbox类型

• v-model：select

  和checkbox一样，select也分单选和多选两种情况。

  单选：只能选中一个值。

  v-model绑定的是一个值。 当我们选中option中的一个时，会将它对应的value赋值到mySelect中。

多选：可以选中多个值。

v-model绑定的是一个数组。 当选中多个值时，就会将选中的option对应的value添加到数组mySelects中。

v-model结合select类型

• 值绑定

  动态的给value赋值：因为在我们真实的开发中，大部分控件的值都是从网络中获取或者定义在data中的。而不是我们写死的数据，所以我们可以通过v-bind：value动态的给value绑定值。

  值绑定

• 修饰符

  lazy修饰符：

  默认情况下，v-model默认是在input事件中同步输入框的数据的。也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变。lazy修饰符可以让数据在失去焦点或者回车时才会更新。

number修饰符：

默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。number修饰符可以让在输入框中输入的内容自动转成数字类型。

trim修饰符：

如果输入的内容首尾有很多空格，通常我们希望将其去除。trim修饰符可以通过过滤内容左右两边的空格。

修饰符的使用