vue(2)、快速入门

一、Vue入门

1、.vue文件结构介绍

在上述代码中，最主要的部分为 script 标签内的内容，这里进行着重介绍：

import ：import 用于引入外部文件，常用的文件有 .vue 文件、.js 文件。
components ：局部注册引入的外部 .vue 文件或者该组件内定义的 vue 组件，注册后便可以在上方 html 模板中像原生标签一样使用引入的或者定义的 vue 组件。
props ：用于定义从父组件接收的值，通过 this.变量名 访问。
data ：定义该 vue 组件的变量，通过 this.变量名 访问，在 .vue 文件中，如果存在 data 选项，则该选项必须为一个函数，并且返回一个对象。
钩子函数：钩子函数对应 vue 组件的生命周期，可以在钩子函数中进行一些操作。
methods ：该 vue 组件定义的方法，通过 this.方法名() 调用方法。
watched ：侦听器，侦听属性的变化，变化时执行定义的 handler 函数。
computed ：定义该 vue 组件的计算属性，通过 this.计算属性名 访问，计算属性名后边不需要加 ()。
scoped style：将样式限定在该 vue 组件内，其他组件应用其他 vue 组件的 scoped style 内的 class 无效。
style ：样式可以应用在所有地方，主要用于穿透覆盖样式，所以可能会覆盖其他地方定义的 style，谨慎使用。

2、生命周期

常用的生命周期函数，即钩子函数，有created 、mounted

• created ：在实例已经创建完成之后被调用。在这一步，实例被初始化，但是挂载阶段还没开始，也就是 html 模板并没有被编译，并没有挂载到网页上，但是可以通过 this.属性名、this.方法名() 访问到属性和

方法，该函数中通常去初始化一些东西

• mounted ：在实例被挂载之后调用。此时，html 模板已经被编译完成且挂载到网页中，但是 mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用

this.$nextTick：javascript
mounted() { this.$nextTick(function ()
 { 
        // 此时所有的html模板完全渲染完毕 
        // 如果要在mounted函数中使用this.$refs访问ref，则必须将代码放在这里
 }) }

note ：在该钩子函数中，通常去初始化或者请求数据

3、Vue基础指令

模板语法

使用双花括号可以在 html 模板中进行插值，双花括号内的内容可以是 data 、props 、computed 里边的属性，

也可以是 methods 中的方法，也可以是一个 JavaScript 表达式，例如：2 + 5 将会显示 7

效果：

a、v-model

使用 v-model 将值与定义的属性进行绑定

效果：

b、v-bind （：简写）

note 在项目中请使用 : 简化该指令

使用 v-bind 指令将变量或者表达式计算出的内容传递给 html 标签或者 vue 组件，一般使用 : 来简化该指令

效果：

c、v-on （@简写）

提示 在项目中请使用 @ 简化该指令

使用 v-on 监听 dom 元素或者 vue 组件的事件，一般使用 @ 来简化该指令

效果：

d、v-if

使用 v-if 对 dom 元素或 vue 组件进行条件渲染，v-if 如果为false，则该元素的 dom 节点并不会被渲染到 document 内

效果：

e、v-show

v-show 对 dom 元素或 vue 组件进行条件切换，v-show 如果为false，则该标签的 style 为：display: none;，该指令仅改变 CSS 样式

结果：

v-if 与 v-show的区别:

1 . v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

2 . v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

3 . 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

4 . 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好

f、v-for

使用 v-for 指令基于一个数组来渲染一个列表

警告：

使用 v-for 生成的列表中的每一个 item 都需要设置唯一的 key，并且这个 key 不到万不得已不能使用数组的 index 作为 key

效果：

v-for 与 v-if

注意 ：不推荐在同一元素上使用 v-if 和 v-for。

v-if 控制是否渲染列表，v-for 渲染全部列表：

v-for 渲染部分列表，使用计算属性进行过滤比 v-for 和 v-if 在同一个标签上性能更好：

<template>
<div>
    <ul>
        <li v-for="item in list" :key="item.id">{{ item.value }}</li>
    </ul>
</div>
</template>

<script>
export default {
name: 'demo',
data() {
    return {
        listData: [{
                id: '001',
                value: 'item-1'
            }, {
                id: '002',
                value: 'item-2'
            }, {
                id: '003',
                value: 'item-3'
            }, {
                id: '004',
                value: 'item-4'
            }, {
                id: '005',
                value: 'item-5'
            }]
        }
    },
computed: {
list(){
return this.listData.filter(function (item) {
        return item.id !== '003'
        })
        }
        },
}
</script>

4、组件间通信

组件间通信有很多种方式，每种方式均有其适用的场景，此处只介绍最简单、最常用的方式

a、父组件向子组件传值（props）

父组件：

子组件：

b、子组件向父组件传值（$emit）

父组件：

子组件：

c、ref

尽管存在 prop 和事件，有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的，你可以通过 ref 这个 attribute 为子组件赋予一个 ID 引用

父组件：

子组件：

5、插槽slot

主要作用是内容分发，即在父组件内的子组件标签里定义子组件里的内容，此部分内容中的简单插槽、具名插槽、作用域插槽必须要掌握，透传插槽在初学时可以只做了解，业务开发中遇到该需求再来学习即可

最简单的插槽应用：

父组件：

子组件：

效果：