前端UI框架——Vue概述和快速入门案例

最新推荐文章于 2025-05-09 23:45:47 发布

原创最新推荐文章于 2025-05-09 23:45:47 发布 · 789 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue概述 #vue

Web框架/Vue/ 专栏收录该内容

11 篇文章

订阅专栏

本文主要介绍了Vue.js框架的基础知识，包括官网资源、框架介绍、特点以及快速入门案例。Vue是一个渐进式的JavaScript框架，专注于视图层，易于上手且适用于复杂项目的集成。其特点是遵循MVVM模式，编码简洁，运行效率高，适合移动和PC端开发。通过简单的步骤，如引入vue.js，创建挂载对象和实例，即可开始使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明：若是想直接开发，可跳过此篇博客。

一、官网资料

英文官网
 中文官网

二、Vue 介绍

1、基本介绍【官网介绍】

Vue 是一套用于构建用户界面的渐进式JavaScript 框架。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。

2、作用
简单说就是，动态构建用户界面。

三、 Vue的特点

1、遵循MVVM模式
理解Vue的MVVM
这里写图片描述
2、编码简洁, 体积小, 运行效率高, 适合移动/PC端开发
3、它本身只关注UI, 可以轻松引入vue插件或其它第三库开发项目

四、Vue扩展插件介绍

插件名称	描述
vue-cli	vue脚手架
vue-resource(axios)	ajax请求
vue-router	路由
vuex	状态管理
vue-lazyload	图片懒加载
vue-scroller	页面滑动相关
mint-ui	基于vue的UI组件库(移动端)
element-ui	基于vue的UI组件库(PC端)

五、快速入门案例

1、基本使用

Vue使用步骤如下:
1)引入vue.js
2)创建一个挂载对象
3)创建vue的实例
4)传入配置对象

代码实例：

<head>
    <meta charset="UTF-8">
    <title>vue快速入门案例</title>
    <!--vue使用步骤:
    1.引入vue.js
    2.创建一个挂载对象
    3.创建vue的实例
    4.传入配置对象
    -->
</head>
<body>
<!--2.创建一个挂载对象-->
<div id="app">
    <input type="text" v-model="msg">
    <!--4.传入配置对象-->
    <p>{{msg}}</p>

</div>
</body>
<!--1.引入vue.js-->
<script src="js/vue.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>-->
<script>


    const data = {
        msg: "Hello  vue!"
    }
    // 3.创建vue的实例
    const vm = new Vue({
        el: "#app",
        data: data
    })
    console.log(vm.msg)
</script>