Vue学习笔记-02：Vue简介及基本使用

银河系小白

已于 2023-02-28 17:55:55 修改

阅读量120

点赞数

分类专栏： Vue学习笔记文章标签： vue.js 学习 javascript

于 2023-02-22 17:47:03 首次发布

本文链接：https://blog.csdn.net/fukun125/article/details/129167269

版权

Vue学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue是一个用于构建用户界面的前端框架，提供数据驱动视图和MVVM模式。它包括核心库、vue-router、vuex状态管理等全家桶解决方案。Vue2.x是主流，Vue3.x引入了组合式API等新特性。文章介绍了Vue的基本使用步骤和表达式支持。

摘要由CSDN通过智能技术生成

Vue简介

什么是Vue

Vue是用于构建用户界面的前端框架。
传统的Web前端开发基于jQuery+模板引擎用户界面,Vue提供了构建用户界面的一整套解决方案（vue全家桶）：
- vue 核心库；
- vue-router 路由方案；
- vuex 状态管理方案；
- vue组件库快速搭建页面UI效果的方案。
以及一些辅助Vue项目开发的工具：
- vue-cli 一键生成工程化的vue项目，基于webpack，大而全，npm全局包；
- vite 一键生成工程化的vue项目，小而巧，npm全局包；
- vue-devtools 浏览器插件，辅助调试工具；
- vetur vscode插件，语法高亮和智能提示。
Vue的特性
- 数据驱动视图：Vue会监听数据的变化，从而自动重新渲染页面的结构（单项数据绑定）；
- 双向数据绑定：在不操作DOM的前提下，自动将用户填写的内容同步到数据源中，开发者不需要手动操作DOM元素来获取表单元素的最新值。
MVVM

MVVM是Vue实现“数据驱动视图”和“双向数据绑定”的核心，他将HTML页面分为以下三个部分：
1. View：当前页面所渲染的DOM结构；
2. Model：当前页面渲染时依赖的数据源；
3. ViewModel：连接视图和数据，同步更新，表示Vue的实例，它是MVVM的核心
Vue的版本
1. 1.x 版本几乎被淘汰，不建议学习与使用；
2. 2.x 版本是目前企业级项目开发中的主流版本；
3. 3.x 发布于2020-09-19，成长中。
Vue2.x中绝大多数API与特性，在Vue3.x中同样支持。
Vue3.0还增加了“组合式API”、“多根节点组件”、“更好的TypeScript支持”等。同时废弃了如“过滤器”、“ $o n ” 、 “$ off”、“$once”等实例方法。

Vue的基本使用

使用步骤

导入vue.js的script脚本文件；
在页面中声明一个将要被vue控制的DOM区域；
创建vm实例对象（vue实例对象）。

<body>
    <div id="app">
        {{username}}
    </div>
    <script src="./lib/vue.global.js"></script>
    <script>
        Vue.createApp({
                data(){
                    return{
                        username:'明月',
                    }
                }
            }
        ).mount('#app')
    </script>
</body>