Vue基础知识总结

一、初识vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架

第一个vue页面

通过通过上面的 vue 案例，总结 vue 的使用方法如下：

• 创建dom结构，作为vue实例挂载点，vue实例中的所有数据只能在此dom范围内使用

<div id="app"></div>

• 通过 new Vue 创建 vue 实例
• el 属性指定当前 vue 实例的挂载点
• data 中是模型数据，这些数据依赖于当前的vue实例，可以在控制台中访问data数据
• 可以通过插值表达式使用 data 中的数据

vue和原生js对比

案例需求：将文本框输入的内容实时显示到页面上

vue代码

<div id="app">
    <input type="text" v-model="message">
    <p>{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: ''
        }
    });
</script>

原生js代码

<div>
    <input type="text">
    <p></p>
</div>
<script>
    var input = document.querySelector("input");
    var p = document.querySelector("p");
    input.addEventListener("keyup", () => {
        p.innerHTML = input.value;
    });
</script>

对比结果
vue 中不用操作 dom 元素，这可以让开发者将经历集中到数据处理及业务逻辑开发中

二、数据绑定

所谓数据绑定，就是将 vue 实例中的 data 属性中的变量显示到挂载点(dom结构)中

内容绑定

将 data 中的数据显示成内容（开始标签与结束标签之间）使用 {{}}

<div id="app">
   <p>{{title}}</p>
</div>

上面只能显示纯文本，如果要显示 html 内容，需要使用 v-html 指令

<p v-html="content"></p>

属性绑定

将data中的数据作为某个元素的属性的值，使用 v-bind:属性名称 指令，属性可以是内置，也可以是自定义的

<p v-bind:id="id">{{title}}</p>

v-bind: 可以缩写为 :

<p :id="id">{{title}}</p>

表单控件的值

可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素。

表单类型	绑定的值
v-mode:text	绑定的值是value
v-mode:textarea	绑定的值是innerHTML
v-mode:radio	绑定的值是value
v-mode:checkbox/select(单选)	绑定的值是布尔值
v-mode:checkbox/select(多选)	绑定的值是数组

循环遍历

v-for遍历数组

• 作用：根据数组中的元素遍历指定模板内容生成内容
• 语法：

<ul>
    <!-- item: 是每一项元素 index: 下标/索引 -->
    <li v-for="(item, index) in name">
       {{index+1}}.{{item}}
    </li>
</ul>

v-for遍历对象

• 作用：根据数组中的元素遍历指定模板内容生成内容
• 语法：

<ul>
    <!-- value:属性值  key:属性名  index:下标/索引 -->
    <li v-for="(value, key, index) in info">
       {{index+1}}.{{value}}
    </li>
</ul>

条件渲染

vi-f与v-else-if与v-else
Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件

<h2 v-if="score>=90">优秀</h2>
<h2 v-else-if="score>=80">良好</h2>
<h2 v-else-if="score>=60">及格</h2>
<h2 v-else>不及格</h2>

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

<h2 v-show="isShow">{{message}}</h2>

v-if 和 v-show对比

• v-if 当条件为false时,压根不会有对应的元素在DOM中
• v-show 当条件为false时, 仅仅是将元素的 display 属性设置 none 而已
  开发中如何选择呢?
• 当需要在显示与隐藏之间切换很频繁时,使用v-show
• 当只有一次切换时,通过使用v-if

样式处理

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可
vue操作class

• class 与 v-bind:class 可以共存，但是其实最终操作的都是元素的 class 属性
• v-bind:class 的值可以是字符串、对象或者数组
• 对象语法的含义是:class后面跟的是一个对象

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

• 数组语法的含义是:class后面跟的是一个数组

<!-- 1. ['active','news'] 当字符串使用 -->
<h2 class="title" :class="['active','news']">{{message}}</h2>
<!-- [active, new] 当变量使用 -->
<h2 class="title" :class="[active,news]">{{message}}</h2>
<!-- 3. 函数返回值使用 -->
<h2 class="title" :class="getClasses()">{{message}}</h2>

vue操作style

• 对象语法

:style="{color: currentColor, fontSize: fontSize + 'px'}" 

• 数组语法

<div v-bind:style="[baseStyles, fontColor]"></div>
//js
baseStyle: {background: 'lime'},
fontSize: {fontSize: '80px'}

事件绑定

• js 中可以通过 addEventListener 的方式为元素注册各种事件类型
• vue 中通过 v-on 指令为元素注册事件监听

<button v-on:click="greet">按钮</button>
<script>
    let app = new Vue({
        el: '#app',
        data: {
        },
        methods: {
            greet: function () {
                console.log('初辰')
            }
        }
    })
</script>

计算属性和选择器

计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护
比如我们有firstName和lastName两个变量，我们需要显示完整的名称。但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}} {{lastName}}，将上面代码转换成计算属性

/* html */ 
<h2>{{fullNmae}}</h2>
/* js */
computed: {
    fullNmae: function () {
        return this.firstNmae + ' ' + this.lastNmae;
    }
}

计算属性的缓存
methods和computed区别

• methods不管数据发没发生变化都会调用函数
• computed只有在依赖数据发生变化时才回调函数

侦听器

vue 中的计算属性是不支持异步操作的，只能计算一些同步的值，但是可以使用 vue-async-computed 插件实现这一点
侦听器的应用场景：数据变化时执行异步或开销较大的操作