注册 / 登录

清河洛

vue的使用简介

超级管理员2022-03-09 16:48:52清河洛296
Vue.js(读音/vjuː/,类似于view),是一个用于构建用户界面的JavaScript框架,它只关注视图层,通过尽可能简单的API实现响应的数据绑定和组合的视图组件本次学习我们使用在网页中引入js文件的方式,而暂不讨论使用npm或其他的方式通过<script src="https://unpkg.com/vue@next" ></script>的方式在网页

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中的组件

组件(Component)是Vue最强大的功能之一,组件可以扩展HTML元素,封装可重用的代码

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

使用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-*指令,我们还可以自定义指令

自定义'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钩子中可用


网址导航