vue的使用简介

Vue.js(读音/vjuː/,类似于view)，是一个用于构建用户界面的JavaScript框架，它只关注视图层，通过尽可能简单的API实现响应的数据绑定和组合的视图组件

本次学习我们使用在网页中引入js文件的方式，而暂不讨论使用npm或其他的方式

通过<script src="https://unpkg.com/vue@next" ></script>的方式在网页中引入最新版本

推荐将js文件下载到本地，这样减少网络访问和跳转，加快加载时间

在vue中通过将应用实例挂载到指定DOM上以渲染和操作指定的DOM元素，相应的在Html中，所有的DOM元素必须挂载了vue应用实例才会使用vue进行渲染

vue中创建应用

Vue.createApp(option_obj)：用来创建一个应用实例(一般使用app变量表示)，通过传入的对象中的各个参数配置该应用实例的功能

应用实例通过mount()方法挂在到指定的DOM元素上，返回该DOM元素的组件实例(一般使用vm变量表示)

常用的配置项

在所有配置项中的函数中this都指向该组件实例，由于箭头函数没有this，所以不要使用箭头函数

data函数：会在创建组件实例的过程中调用此函数，该函数应该返回一个对象，应用实例挂载后以$data的形式存储在组件实例中

methods：应用实例中的可用方法

computed：计算属性、插值时使用简单的操作运算初衷是用于简单运算的，每个元素为一个函数

在模板中放入太多的逻辑会让模板过重且难以维护，可以使用该选项将常用的逻辑运算封装，增加可维护性

computed:{
    add_one(){return this.num+1;}
}
<span>Num: {{ add_one }}</span>methods中添加相应的方法也可以实现上述需求，但是每次都会运算一次方法，计算属性的好处就是计算一次后会缓存该结果直到数据发生改变

watch：监听器，当某个监听的数据发生了改变会自动执行

当需要在数据变化时执行异步或开销较大的操作时比较有用，每个监控的函数接受两个参数，新值和旧值

watch:{
    que(new_num,old_num){console.log(old_num+'==>'+new_num);}
}
<input v-model="que" />
以上的监听器表示监听que的值，每当该值发生改变就运行指定的方法

components：注册定义子组件，每个元素的键为组件名，值为一个对象，表示该组件的配置选项

props：子组件用来接受父组件传递的自定义属性数据的自定义属性信息

app.component('site-name', {
    props: ['title'],
    template: '<h4>{{ title }}</h4>'
})
<div id="app"><site-name title="Google"></site-name></div>props除了可以是一个字符串数组外还可以为每个元素添加验证，此时需要传入一个obj对象，每个元素的键名为要传递的prop名称，值可以为多种类型

propA: Number：基础的类型检查，null和undefined会通过任何类型验证
    vue支持的类型验证String、Number、Boolean、Array、Object、Date、Function、Symbol
propB: [String, Number]：多个可能的类型，满足数组中的一个类型验证即可验证完成
propC: {type: String,required: true,default: 100}：类型，验证，默认值三项验证选项
propD: {type: Object,default: function () {
    return { message: 'hello' }
    }
}：对象或数组默认值必须从一个工厂函数获取
propE: {validator: function (value) {return true|false}}：值经过运算返回true表示验证通过
验证失败会按照字符串形式输出，且会产生一个控制台的警告

directives：自定义局部指令，值为一个对象，每个元素键为指令名称，值为一个对象

vue中的组件

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

使用Vue.createApp(option_obj)创建应用实例时传入的配置选项其实就是根组件的配置

创建全局组件：

app.component('component-name',{option_obj})
通过<component-name></component-name>标签来使用该组件
组件一个重要的属性就是template属性，用于定义该组件的html代码
const app = Vue.createApp({})
app.component('button-counter', {
    data() {return {count: 0}},
    template: '<button @click="count++">点了 {{ count }} 次！</button>'
    }
)
app.mount('#app')
当我们使用<button-counter></button-counter>时会自动替换为template的值
多次使用会创建多个组件实例，且每个实例都有单独的作用域，单独维护自己实例的内部数据

自定义指令

自定义'v-name'全局指令：app.directive('name', obj})

自定义'v-name'局部指令：directives:{'name'{obj}}

obj对象包含若干个函数，用于在不同状态下自动运行指定操作，可用的钩子函数

created : 在绑定元素的属性或事件监听器被应用之前调用
beforeMount : 指令第一次绑定到元素并且在挂载父组件之前调用
mounted : 在绑定元素的父组件被挂载后调用
beforeUpdate: 在更新包含组件的 VNode 之前调用
updated: 在包含组件的 VNode 及其子组件的 VNode 更新后调用
beforeUnmount: 当指令与在绑定元素父组件卸载之前时，只调用一次
unmounted: 当指令与元素解除绑定且父组件已卸载时，只调用一次

默认为mounted和updated，即如果obj为一个匿名函数时会默认在以上两种情况下运行，如
app.directive('name',function(el,binding){something})

钩子函数的参数从前到后依次为
el：指令绑定到的DOM元素，可用于直接操作DOM
binding：一个包含该指令信息的对象，可能包含以下属性：
    instance：使用指令的组件实例
    value：传递给指令的值。如：v-name="1 + 1"中，该值为2
    oldValue：先前的值，仅在beforeUpdate和updated中可用
    arg：参数传递给指令(如果有)。如：v-name:foo中，arg为"foo"
    modifiers：包含修饰符(如果有)的对象。如：v-name.foo.bar中，该值为{foo: true，bar: true}
    dir：一个对象，在注册指令时作为参数传递
vnode：作为el参数收到的真实DOM元素的蓝图
prevNode：上一个虚拟节点，仅在beforeUpdate和updated钩子中可用