VUE学习（一）-介绍及安装vue开发者调试工具（devtools）

最新推荐文章于 2024-10-24 13:47:28 发布

丨Anna丨

最新推荐文章于 2024-10-24 13:47:28 发布

阅读量1.7w

点赞数 14

分类专栏： # VUE学习文章标签： Vue 插件安装

本文链接：https://blog.youkuaiyun.com/u014331138/article/details/102952005

版权

VUE学习专栏收录该内容

7 篇文章

订阅专栏

VUE学习（一）-介绍及安装vue开发者调试工具（devtools）

1 介绍

1.1 什么是VUE

（1）渐进式 JavaScript 框架

（2）作用: 动态构建用户界面（将后台数据，在前台动态显示）

1.2 Vue 的特点

（1）遵循 MVVM 模式
（2）编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
（3）它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目VUE学习

1.3 Vue 扩展插件

（1）vue-cli: vue 脚手架
（2） vue-resource(axios): ajax 请求
（3）vue-router: 路由
（4）vuex: 状态管理
（5） vue-lazyload: 图片懒加载
（6） vue-scroller: 页面滑动相关
（7） mint-ui: 基于 vue 的 UI 组件库(移动端)
（8） element-ui: 基于 vue 的 UI 组件库(PC 端)

2 基本使用

创建一个简单的vue项目并实现一下效果：

2.1 下载Vue.js

下载地址：https://cn.vuejs.org/v2/guide/installation.html

2.2 创建一个Html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01Vue的基本使用</title>
</head>
<body>

    <div id="app">
        <input type="text"  v-model="username"/>
        <p>您好 {{username}}!</p>
    </div>

    <!-- 1 引入Vue.js -->
    <script type="text/javascript" src="../plugins/vue.js"></script>
    <script type="text/javascript">
        // 2 创建 Vue 实例
        var vm = new Vue({  // 配置对象
            el: '#app',     // 选择器
            data: {         // 数据
                username: ''
            }
        })
    </script>
</body>
</html>