Vue基础

对知识的回顾一：

Mustache(插值语法)，也就是 {{}} 语法

解释：{{}}从数据对象data中获取数据说明：数据对象的属性值发生了改变，插值处的内容都会更新（响应式）&&{{}}中只能出现JavaScript表达式而不能解析js语句 注意：Mustache 语法不能作用在 HTML 元素的属性上

<h1>Hello, {{ msg }}.</h1>
<p>{{ 1 + 2 }}</p>
<p>{{ isOk ? 'yes': 'no' }}</p>

<!-- ！！！错误示范！！！ -->
<h1 title="{{ err }}"></h1>

v-once

该指令后面不需要跟任何表达式
该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变。

v-html

如果我们希望解析出HTML展示可以使用v-html指令该指令后面往往会跟上一个string类型会将string的html解析出来并且进行渲染

v-text

v-text作用和Mustache比较相似：都是用于将数据显示在界面中 v-text通常情况下，接受一个string类型（注意：v-text的数据会替换原有的数据而Mustache有拼接的效果）

v-pre

v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。比如下面的代码：第一个h2元素中的内容会被编译解析出来对应的内容第二个h2元素中会直接显示{{message}}

v-cloak（斗篷）

在某些情况下，我们浏览器可能会直接显然出未编译的Mustache标签。给人一种不好的体验，如果如下设置就可以去除。（但是几乎没用它，因为项目优化并不会这样处理）

v-bind

v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值
比如图片的链接src、网站的链接href、动态绑定一些类、样式等等
比如通过Vue实例中的data绑定元素的src和href，语法糖是一个冒号，代码如下图：

一、v-bind绑定class（绑定方式有对象语法&&数组语法）

v-bind绑定class的对象语法：

用法一：直接通过{}绑定一个类
<h2 :class="{'active': isActive}">Hello World</h2>

用法二：也可以通过判断，传入多个值
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法三：和普通的类同时存在，并不冲突
注：如果isActive和isLine都为true，那么会有title/active/line三个类
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

2. v-bind绑定class的数组语法：

用法一：直接通过{}绑定一个类
<h2 :class="['active']">Hello World</h2>

用法二：也可以传入多个值
<h2 :class="['active', 'line']">Hello World</h2>

用法三：和普通的类同时存在，并不冲突
注：会有title/active/line三个类
<h2 class="title" :class="['active', 'line']">Hello World</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

二、v-bind绑定style既绑定内联样式（绑定方式有对象语法&&数组语法）

v-bind绑定style的对象语法：

:style="{color: currentColor, fontSize: fontSize + 'px'}"
    style后面跟的是一个对象类型
    对象的key是CSS属性名称
    对象的value是具体赋的值，值可以来自于data中的属性

2. v-bind绑定style的数组语法：

<div v-bind:style="[baseStyles, overridingStyles]"></div>
    style后面跟的是一个数组类型
    多个值以，分割即可

计算属性：computed

什么是Vue的计算属性？

我们知道，在模板中可以直接通过插值语法显示一些data中的数据。但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示比如我们有firstName和lastName两个变量，我们需要显示完整的名称。但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}} {{lastName}} 我们可以将上面的代码换成计算属性：

div id="app">
  <h2>{{firstName + ' ' + lastName}}</h2>
  <h2>{{firstName}} {{lastName}}</h2>
  <h2>{{getFullName()}}</h2>
  <h2>{{fullName}}</h2>         //四个输出的结果都一样是Homiry LI，但computed属性更简洁并且computed有缓存功能比methods性能好。
</div>
//CDN引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName: 'Homiry',
      lastName: 'LI'
    },
    // computed: 计算属性()
    computed: {
      fullName: function () {
        return this.firstName + ' ' + this.lastName
      }
    },
    methods: {
      getFullName() {
        return this.firstName + ' ' + this.lastName
      }
    }
  })
</script>

计算属性的getter和setter

每个计算属性都包含一个getter和一个setter 在上面的例子中，我们只是使用getter来读取。在某些情况下，你也可以提供一个setter方法（不常用）。在需要写setter的时候，代码如下：

计算属性的缓存

methods和computed表面上都可以实现相同的功能，但是计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。

v-on 用于绑定事件监听他的语法糖为 @

v-on基本用法

<div id="app">
  <h2>{{counter}}</h2>
  <button @click="increment">+</button>
  <button @click="decrement">-</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      counter: 0
    },
    methods: {
      increment() {
        this.counter++
      },
      decrement() {
        this.counter--
      }
    }
  })
</script>

v-on 参数问题

当通过methods中定义方法，以供@click调用时，需要注意参数问题：情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。

v-on修饰符

.stop
.prevent
.enter
.once
.native

当然还有一些其他的，可以看官方的https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6

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

这三个指令与JavaScript的条件语句if、else、else if类似。
Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件

Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。在上面的案例中，Vue内部会发现原来的input元素不再使用，直接作为else中的input来复用了。而给一个key属性，并且key的值不同时可以不复用已存在的input

v-if和v-show对比:
v-if和v-show都可以决定一个元素是否渲染
v-if当条件为false时，压根不会有对应的元素在DOM中。
v-show当条件为false时，仅仅是将元素的display属性设置为none而已。
开发中如何选择呢？
当需要在显示与隐藏之间切片很频繁时，使用v-show
当只有一次切换时，通过使用v-if

v-for

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

格式如下：
如果在遍历的过程中不需要使用索引值
v-for="item in items"
依次从items中取出item，并且在元素的内容中，我们可以使用Mustache语法，来使用movie
如果在遍历的过程中，我们需要拿到元素在数组中的索引值呢？
语法格式：v-for=(item, index) in items
其中的index就代表了取出的item在原数组的索引值。

遍历对象：v-for可以用户遍历对象：比如某个对象中存储着你的个人信息，我们希望以列表的形式显示出来。

检测数据更新

<body>

<div id="app">
  <ul>
    <li v-for="item in letters">{{item}}</li>
  </ul>
  <button @click="btnClick">按钮</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      letters: ['a', 'b', 'c', 'd']
    },
    methods: {
      btnClick() {
        // 1.push方法
        // this.letters.push('aaa')
        // this.letters.push('aaaa', 'bbbb', 'cccc')

        // 2.pop(): 删除数组中的最后一个元素
        // this.letters.pop();

        // 3.shift(): 删除数组中的第一个元素
        // this.letters.shift();

        // 4.unshift(): 在数组最前面添加元素
        // this.letters.unshift()
        // this.letters.unshift('aaa', 'bbb', 'ccc')

        // 5.splice作用: 删除元素/插入元素/替换元素
        // 删除元素: 第二个参数传入你要删除几个元素(如果没有传,就删除后面所有的元素)
        // 替换元素: 第二个参数, 表示我们要替换几个元素, 后面是用于替换前面的元素
        // 插入元素: 第二个参数, 传入0, 并且后面跟上要插入的元素
        // splice(start)
        // splice(start):
        this.letters.splice(1, 3, 'm', 'n', 'l', 'x')
        // this.letters.splice(1, 0, 'x', 'y', 'z')

        // 5.sort()
        // this.letters.sort()

        // 6.reverse()
        // this.letters.reverse()

        // 注意: 通过索引值修改数组中的元素
        // this.letters[0] = 'bbbbbb';
        // this.letters.splice(0, 1, 'bbbbbb')
        // set(要修改的对象, 索引值, 修改后的值)
        // Vue.set(this.letters, 0, 'bbbbbb')
      }
    }
  })
</script>
</body>

v-model

v-model表单绑定

表单控件在实际开发中是非常常见的。特别是对于用户信息的提交，需要大量的表单。
Vue中使用v-model指令来实现表单元素和数据的双向绑定。
案例的解析：当我们在输入框输入内容时因为input中的v-model绑定了message，所以会实时将输入的内容传递给message，message发生改变。当message发生改变时，因为上面我们使用Mustache语法，将message的值插入到DOM中，所以DOM会发生响应的改变。所以，通过v-model实现了双向的绑定。当然，我们也可以将v-model用于textarea元素

v-model其实是一个语法糖，它的背后本质上是包含两个操作：
1.v-bind绑定一个value属性
2.v-on指令给当前元素绑定input事件
也就是说下面的代码：等同于下面的代码：
<input type="text" v-model="message">
等同于
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">

v-model单选框：radio

v-model复选框：checkbox

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

单个勾选框： v-model即为布尔值。此时input的value并不影响v-model的值。
多个复选框：当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组。当选中某一个时，就会将input的value添加到数组中。

v-model复选框：select

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

单选：只能选中一个值。 v-model绑定的是一个值。当我们选中option中的一个时，会将它对应的value赋值到mySelect中
多选：可以选中多个值。 v-model绑定的是一个数组。当选中多个值时，就会将选中的option对应的value添加到数组mySelects中

v-model修饰符

lazy修饰符：默认情况下，v-model默认是在input事件中同步输入框的数据的。也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变。 lazy修饰符可以让数据在失去焦点或者回车时才会更新：
number修饰符：默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。 number修饰符可以让在输入框中输入的内容自动转成数字类型：
trim修饰符：如果输入的内容首尾有很多空格，通常我们希望将其去除 trim修饰符可以过滤内容左右两边的空格