Vue简单概述

    科技2022-08-25  121

    1,什么是Vue Vue是一套用于构建用户界面的渐进式框架。Vue的核心库只关注于视图层

    2,Vue特点 1,目前前端的三大主流框架之一(Angular,React,Vue) 2,体积更小(轻量级) 3,数据驱动框架 (轻量减少dom操作,只需要关心底层逻辑) 4,生态圈广泛,适合初学者学习(官方文档全面)

    Vue基于mvvm框架 m model 服务器上的业务逻辑操作 v view 视图(页面) vm ViewModel 模型跟视图间的核心枢纽,比如vue.js

    model跟ViewModel之间双向关系 model通过ajax通信,发送数据给ViewModel; ViewModel也可以通过ajax通信,发送请求给model

    view跟ViewModel之间双向关系 ViewModel中的数据发生改变,同时可以改变view上显 示的内容; view上的内容发生改变(比如输入框中),也可以同时改变ViewModel中对应的数据

    3,Vue的安装方式 方式一:bootcdn引入 方式三: Vue脚手架 Vue-cli 方式四:模块化安装,需要在node环境下进行开发 > npm install vue

    4,Vue简单应用 html代码

    {{message}}

    js代码 var app=new Vue({ el:’#app’, data:{ message:‘Hello Vue!’ } })

    注意:1,app代表Vue实例化对象 2,el:’#app’ 代表选中id为app的div,绑定模板 3,app可以直接获取到data中的值

    5,Vue生命周期钩子函数 初始化阶段 beforeCreate() 实例创建完成,但还未初始化,此时无法访问data中数据以及methods中方法 created() vue实例初始化完成,此时可以访问data中数据以及methods中方法 常用于页面刚加载完毕,查询某个接口的数据(查询所有栏目,将结果放到data中)

    挂载阶段 beforeMount() 重点完成dom对象编译(将html转换成dom对象),将dom对象绑定在this.$el上,data中的变量还未绑定在dom对象 mounted() data中变量绑定到dom中,并将dom渲染到页面中

    更新阶段 beforeUpdate() data中数据被更改前 Updated() data中的数据被更改,并且响应到页面上

    销毁阶段 beforeDestroy() vue实例销毁前,此时还是可以访问vue实例的 destroyed() vue实例已经被销毁

    Processed: 0.009, SQL: 9