Vue简介


Vue简介

Vue.js 是一套构建用户界面的渐进式框架, 只关注视图层, 采用自底向上增量开发的设计,目标是尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

基本原理


1、建立虚拟DOM Tree,通过document.createDocumentFragment(),遍历指定根节点内部节点,根据{{ prop }}、v-model等规则进行compile;

2、通过 Object.defineProperty() 进行数据变化拦截;

3、截取到的数据变化,通过发布者-订阅者模式,触发Watcher,从而改变虚拟DOM中的具体数据;

4、通过改变虚拟DOM元素值,从而改变最后渲染dom树的值完成双向绑定。

常用的功能插件

路由插件 Router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成。

常用特点:

动态路由匹配

路由路径中使用“动态路径参数”

```

const router=new VueRouter ({

    routes:[// 动态路径参数 以冒号开头

        {path:'/user/:id',component:User}

    ]

})

```

一个“路径参数”使用冒号 : 标记。当匹配到一个路由时,参数值会被设置到 this.$route.params,可以在每个组件内使用。

```

const User = {

    template:'<div>User {{ $route.params.id }}</div>'

}

```

嵌套路由

```

const router = new VueRouter({

    routes:[

        {

            path:'/user/:id',

            component:User,

            children:[{

                path:'profile',

                component:UserProfile

              },

             {

                path:'posts',

                component:UserPosts

             }

        ]

    }]

})

```

重定向

```

const router = new VueRouter({

    routes:[ { path:'/a', redirect:'/b '} ]

})

```

HTML5 History 模式


状态管理插件 Vuex

Vuex是Vue.js应用程序的状态管理模式+库。它充当应用程序中所有组件的集中存储,其规则确保状态只能以可预测的方式进行变更。


http客户端 axios

axios中文文档 - 简书


UI插件

桌面端UI库 ElementUI

Element - The world's most popular Vue UI framework

移动端UI库 Vant

https://youzan.github.io/vant/?source=vuejsorg#/zh-CN/password-input

https://youzan.github.io/vant/?source=vuejsorg#/zh-CN/password-input

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。