Vue的入门学习

前端

0. VUE的概述

　　在学习vue之前，我在想什么是vue，vue的工作机制到底是什么？官方给出的答案是：Vue是一套用户构建用户界面的渐进式框架。听了之后，不是很懂。于是接着去查了一下什么是框架以及为什么要使用框架，得到了如下的答案：
　　1. 框架则是提供一套解决方案，你得按我的规定来安排代码结构
　　2. 前端框架的根本意义是解决了UI 与状态同步问题
　
　　经过了一番查阅资料后，大概明白了使用VUE的一些作用。
　　1. 组件化，面向对象编程思想，能够重复利用，方便维护。
　　2. 响应式原理，每一个组件（MODLE）都有一个watcher，watcher实时监听组件数据。当数据发生改变时，我们通过重新来渲染来实时显示UI界面。
　　3. 根据第二点，对于数据的改变，我们可以通过修改MODLE，然后再让MODLE通知VIEW来进行重新渲染而无需直接在View的层面进行改变（也就是直接对DOM进行操作）。这样子可以减少开销！
　　进行了简单的对VUE的了解以后，就着这样的认识来对vue进一步了解。

概念解释

1. 耦合是指两个或两个以上的体系或两种运动形式间通过相互作用而彼此影响以至联合起来的现象。
2. UI是用户界面
3. 模型是对应MV*中的M，UI是对应的是V
4. 渲染在电脑绘图中是指用软件从模型生成图像的过程。

参考链接：
https://juejin.im/post/5b16c0415188257d42153bac
https://www.jianshu.com/p/aa733914c65d

1. 起步

声明式渲染

// html
<div id="app">
    {{message}}
</div>
// js
var app = new Vue({
    // 绑定需要渲染的元素s
    el:"app",
    data:{
        message:'hello world!'
    }
})

指令：指令带有v-，以表示它们是vue提供的特殊性。

• v-bind：用来将html元素属性和vuejs中的数据进行绑定。

<span v-bind:title="message">
    鼠标停留这里显示此处动态绑定的信息
</span>/

• v-for：

<li v-for="todo in todos">
    {{todo.text}}
</li>

• v-if:控制元素是否显示

<p v-if="seen">你能不能看到我</p>

• v-on:进行事件监听

<button v-on:click="reverseMessage">逆转消息</button>

• v-model:用户输入数据的双向绑定

<input v-model="message">

组件化应用构建

Vue.component('todo-item',{
    template:'<li>这是一个待办事项</li>'
})
// 也可通过父组件传递的数据来构建组件
Vue.component('todo-item',{
    //props里面声明的是父组件传递的属性
    props:['todo']
    template:'<li>{{todo.text}}'
})
// html
<todo-item
    v-for="item in groceryList"
    v-bind:todo="item"
    v-bind:key="item.id">
</todo-item>

2. Vue实例

创建一个vue实例

1. 创建一个vue实例可以不同的选项对象。

var vm = new Vue({
    // 选项
})

数据与方法

1. 创建实例时所包含的属性才会进行实时渲染。新添加的属性改变不会重新渲染视图，因此在添加data时，不知道数据时可以先使用空值来占位。
2. Object.freeze(obj)用来阻止修改现有属性
3. 实例被创建时初始化过程：需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM（视图）。
4. 叫做生命周期钩子的函数：

created：在实例创建之后执行
mounted：
updated
destroyed

实例的生命周期图

1. 什么是生命周期

　　就是组件实例从创建到被销毁所经历的这一段时间叫做生命周期，当然这只是我自己的理解，可能略有偏差，不过问题不大。

2. 什么是生命周期钩子函数

　　人在一生中总有那么几个时刻，总会必然发生特定的事情。例如，人在六七岁时，就得接受义务教育。在毕业时，就得找工作谋生。在结婚后，就得肩负起家庭的责任。（当然这是大多数的情况，这里不接受乱杠）组件实例也一样，在生命周期的某个时刻也会执行特定的函数，这些函数就叫做钩子函数。下面看一下一些常见的钩子函数：

• mounted：实例组件挂载前执行的函数，此时模板已经渲染好了。
• beforeDestroy：在销毁组件之前执行的函数
• destroyed：在组件销毁完毕后执行的函数
  
  图片来自vue官方文档：https://cn.vuejs.org/v2/guide/instance.html

3. 模板语法

1. Vue.js使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。
2. 插值：通过Mustache语法{{}}，也可以通过v-once进行一次性插值，当数据发生改变时不会重新渲染。
3. 原始HTML：v-html将数据按照HTML语法进行解析
4. HTML属性：通过v-bind进行绑定
5. 数据绑定语法支持简单的JS表达式
6. 指令：带有v-前缀的特殊特性（特殊属性）。指令特性的值预期是单个JS表达式，指令的职责是当表达式的值发生改变时，将其产生的影响响应式的作用都DOM上。
7. 参数：v-bind:href="url"这里面的href是指令特性的参数，url是指令特性的值。这里表示的是将值传送给参数。
8. 修饰符Modifiers：以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
9. 计算属性：对于一个复杂逻辑应当用计算属性来表达。计算属性是响应式的依赖，只有当依赖更新时才会去重新计算，否则会直接之前的值。
10. 侦听属性：watch可以监听某一数据，当这个数据进行改变的时候，使得其他数据（依赖变动数据的数据）也进行改变。
11. 计算属性默认只有getter，在需要时可以自己提供一个setter。

4. CLASS与STYLE的绑定

1. 绑定HTML Class

// active为类的值
// isActive为active是否存在的依据
<div v-bind:class="{active: isActive}"></div>
// 使用对象数组
<div v-bind:class="calssObject"></div>
// ...其他的表示方法

1. 绑定内联样式

<div :style="{color:activeColor, fontSize:...}"

5. 条件渲染

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

// 条件选择渲染
<div v-if="type === 'A'">
    A
</div>
<div v-else-if="type === 'B'">
    B
</div>
<div v-else>
    C
</div>
// 渲染分组
<template v-if="ok">
    ...
</template>

• 由于Vue对会复用已有元素而不是从头开始渲染。可以使用key来进行可复用元素的管理。
• v-show:的元素始终会被渲染并保留在DOM中，只是根据条件来简单的设置css的display

6. 列表渲染

• v-for：不仅可以对数组进行迭代，也可以对对象的属性就行迭代

// 对数组进行迭代
<li v-for="(item, index) in items">
    {{item.content}}
</li>
// 对对象的属性进行迭代
<li v-for="value in object">
    {{value}}
</li>

• 因为Vue更新已经渲染过的元素列表时，会采用复用的策略。即使是顺序发生了改变，也不需要移动DOM中的元素，而是简单复用并且确保各个元素在特定顺序下面显示。因此，我们需要为每个元素指定一个独一无二的索引。

<div v-for="item in items" :key="item.id">
    //内容
</div>

数组的更新检测

• 变异方法mutation function：变异方法对原数组进行改变,会触发视图更新
  
  1. push
  2. pop
  3. shift
  4. unshift
  5. splice
  6. sort
  7. reverse
• 非变异方法：不会改变原数组，而是返回一个新的数组。
• vue检测不到以下变动的数组：
  
  1. 利用索引来设置一个选项 ---> 解决方法：使用set方法
  2. 修改数组的长度
  3. 对象属性的添加或者删除 ---> 解决方法：使用set方法或者assign方法

组件中的v-for

　　在组件中仍然是可以使用v-for来传递数据的，但是任何数据都不会自动传递到组件里，因为组件有自己独立的作用域。为了将数据传入组件中，我们必须使用pros来显式声明所要接收的数据。
　　不会自动将数据注入到组件中的原因，这会使得组件与v-for的运作紧密耦合。当然，这是我们不希望的。我们所理想的是组件应该尽量独立，能够重复运用到其他的场合。
　　

7. 事件处理

监听事件

1. 使用v-on来监听DOM事件，并在触发时运行一些JS代码。

// 当事件触发时，执行func
<div v-on:事件="func">

Event

　　Event接口表示在 DOM中发生的任何事件。可以使鼠标点击，也可以是键盘输入等。我们可以在Event上面注册行为，使得事件触发时产生某种行为。定义的行为可以是在事件处理函数中，事件处理函数的参数就是Event。我们可以给任何元素添加事件处理函数，使得该元素被触发事件时产生相应的行为。
　　在处理函数中，将event对象作为第一个参数，可以使用event对象来进行访问DOM Event接口。下面一个实例来说明如何将event对象传入处理函数以及如何将事件处理函数添加到HTML元素中。
　　

function foo(evt) {
    alert(evt);
}
table_elment.onclick = foo;

DOM Event中实现的接口

• event.preventDefault()：阻止事件默认行为的发生
• event.stopPropagation()：停止事件冒泡

8. 事件修饰符

　　上面做了很多铺垫，就是为了引出这节内容。在事件处理函数中可以通过event对象来调用DOM Event中的接口函数。但是更好的方式是：方法只有纯粹的数据逻辑，而不需要出处理DOM事件中的细节。因此，vue.js为v-on提供了事件修饰符。
　　常见的事件修饰符：.stop、.prevent、.capture、.self、.once、.passive

详细介绍：

.stop：阻止事件继续传播
.prevetn：阻止默认触发事件
.capture：元素自身触发的事件现在此处理，然后再提交给内部元素处理
.self：只有当在 event.target 是当前元素自身时触发处理函数，即事件不是从内部元素触发的
.once：事件只触发一次
.passive：事件的默认行为立即触发
事件的修饰符可以连用，但是记住不同顺序会导致不同的结果！

按键修饰符

　　列举几个：

• .enter
• .tab
• .delete
• .esc

系统修饰符

.ctrl .alt shift meta

.exact的用法：

// 当ctrl键和其他键同时按下时也会触发
<buttuo @click.ctrl="func">A</button>
// 只有ctrl单独被按下时才会触发
<button @click.ctrl.exact="func">A</button>
// 没有任何系统修饰符被按下时触发
<button @click.exact="onClick">A</button>

鼠标中的按键修饰符

• .left
• .right
• .middle

9. 表单输入绑定

基础用法

　　v-molde指令在表单<input>、<textarea>、<select>元素上面可以实现数据的双向绑定，即用户输入数据实时修改组件中的属性元素。

文本

<input v-model="message" placeholder="edit me">
<p>message is {{message}} </p>

多行文本

<textarea v-model="message" placeholder="add multiple lines"></textarea>
<p> {{message}} </p>

复选框：默认为boole值，但是可以通过value来修改默认值

// 选中cheched为true
<input type="checkbox" v-model="checked">
<label for="checkbox"> {{checked}} </label>
// 设置value，来绑定到同一个数组
// 勾选则添加value到messages中
<div id="example">
    <input type="checked" value="one" v-model="messages">
    <label for="one">one</label>
    <input type="checked" value="two" v-model="messages">
    <label for="two">two</label>
</div>
new Vue({
    el:'#exaple',
    date:{
        messages:[]
    }
})

单选框

<input type="radio" v-model="picked">
<label for="picked">{{picked}}</label>

选择框

// 单选
<select v-model="selected">
    <option disabled value="">请选择</option>
    <option value="a">one</option>
    <option value="b">two</option>
</select>
// 多选，绑定到一个数组
// 必须指明属性multiple
<select v-model="selected" multiple style="width: 50px">
    <option>A</option>
    <option>B</option>
</select>

一些表单常用的修饰符

• .lazy：在"change"时而非"input"时更新"message"
• .number：将用户输入的值转换为"number"传递给"message"
• .trim：自动过滤用户输入的首尾空白字符

10. 组件基础

组件的创建

// 定义一个名为 button-counter 的新组件
Vue.component(`button-counter`, {
    data: function () {
        return {
            count: 0
        }
    },
    template: '<button v-on:click="count++">You clicked me {{count}} times'
})

　　通过简单的了解了组件的创建，可以看到组件是可复用的Vue实例，且带有一个名字。因此，我们可以通过组件的名字来复用组件。
　　组件是可复用的Vue实例，因此组件所具有的选项几乎和Vue实例的一样（el除外）。我们可以将组件任意次数的复用，但是每一个复用的组件都是各自独立的。
　　

组件的注册

• Vue.component()对组件进行全局注册

通过Prop向子组件传递数据

// 接收父组件传递的属性
Vue.component('blog-post',{
    props: ['title'],
    template: '<h3> {{title}} </h3>'
})

　　Prop是可以让你在组件上面注册一些自定义特性。当一个值传递给了一个Prop特性的时候，它就成为了那个组件实例的一个属性。这里提一下为什么需要接收特性而不是直接就传进来就可以使用了，多了这一步的必要性是什么？
　　第一，为了减少与父组件的耦合度。假如不需要接收就可以使用这个属性，假如子组件中有一个同名属性也会受其影响（或者刚好同名但并不想作为属性），那么子组件在不知情的情况下就跟父组件联系到了一起，增加了他们之间的耦合度，使得子组件的独立性不是那么的高了。第二，这样方便复用。同一个组件，通过Prop接收不同的属性，形成不同的组件。从而可以更加灵活的为不同的情况进行复用。
　　

建立一个清晰明了的组件

　　当一个组件需要传递太多的属性时候，传递一个对象何不是一个更好的选择。对象里面可以包含任意多个属性，这样子写会让代码变得更加易于读懂。
　　

通过事件向父组件发送消息

// 使用$emit向外面抛出一个"enlarge-text"事件
<button v-on:click="$emit('enlarge-text')">
    Enlarge text
</button>
// 父组件监听事件，来做出相应的动作
<blog-post 
    ...
    v-on:enlarge-text="postFontSize += 0.1">
</blogpost>

　　通过抛出事件的同时，抛出一个值。

// 使用$emit向外面抛出一个"enlarge-text"事件
<button v-on:click="$emit('enlarge-text'，0.1)">
    Enlarge text
</button>
// 父组件监听事件，来做出相应的动作
// 通过'$event'来接收抛出的值
<blog-post 
    ...
    v-on:enlarge-text="postFontSize += $event">
</blogpost>
// 或者这个值作为第一个参数传入方法中

在组件上使用v-model(略)

通过插槽分发内容

　　当我们需要向组件里面传递一个内容的时候，我们需要在子组件里面加入一个插槽。当我们向子组件里面添加内容的时候，内容将加到插槽的位置。

// <slot>就是我们加入的插槽
Vue.component('alert-box',{
    template:
    <div class="demo-alert-box">
        <strong>Error!</strong>
        <slot></slot>
    </div>
})