vue简介以及基本使用安装调试工具

最新推荐文章于 2024-09-14 15:09:44 发布

pingting_

最新推荐文章于 2024-09-14 15:09:44 发布

阅读量453

点赞数

分类专栏： Vue2 文章标签： vue.js 前端框架前端

本文链接：https://blog.csdn.net/pingting_/article/details/122916637

版权

Vue2 专栏收录该内容

20 篇文章 4 订阅

订阅专栏

本文介绍了Vue.js的基本概念和使用步骤，包括数据驱动视图和双向数据绑定这两个核心特性。通过创建Vue实例，可以将数据绑定到DOM元素，实现页面动态渲染。同时，MVVM模式解释了Vue如何实现数据与视图的同步。文章还提到了Vue的版本现状，2.x是主流，3.x是未来趋势，并简单指导了Vue调试工具的安装与使用。

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

1. vue简介

1.1 了解 vue 是什么

官方给出的概念：Vue 是一套用于构建用户界面的前端框架。

构建用户界面：用 Vue 往 html 页面中填充数据，非常的方便
框架：
- 是一套现成的解决方案，遵守框架的规范去编写业务功能
- 学习 vue，就是在学习 vue 框架中规定的用法
- vue 的指令，组件（对 UI 结构的复用），路由，Vuex ，组件库 …

1.2 vue两个特性

vue 框架的特性：

数据驱动视图
双向数据绑定

1.2.1 数据驱动视图

在使用 vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构。

好处：当页面数据发生变化的时候，驱动视图自动更新
注意：数据驱动视图是单向的数据绑定

1.2.2 双向数据绑定

在填写表单的时候，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源中。

js 数据的变化会被自动渲染到页面上
页面上表单采集的数据发生变化的时候，会被 vue 自动获取到，并更新到 js 数据中
好处：开发者不再需要手动操作 DOM 来获取表单元素最新的值。

1.3 浅学一下 MVVM

1.3.1 MVVM

MVVM 是 vue 实现数据驱动的双向数据绑定的核心原理。MVVM 是指 Model，View，ViewModel，它们将每个 HTML 页面拆分为这三个部分。

Model ：表示当前页面渲染时所依赖的数据源
View ：表示当前页面渲染的 DOM 结构
ViewModel ：是 vue 的实例，是核心

1.3.2 工作原理

ViewModel 作为 MVVM 的核心，是它把当前页面的数据源（Model）和页面结构（View）连接在了一起。

当数据源发生变化时，会被 ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构。
当表单元素的值发生变化时，也会被 ViewModel 监听到，VM 会把变化过后的最新的值自动同步到 Model 数据源中。

1.4 vue的版本

2.x 版本是目前企业级项目开发中的主流版本
3.x 与 2020-09-19发布，生态还不完善，尚未在企业级项目开发中普及和推广
3.x版本是未来企业级项目开发的趋势
2.x版本会在未来几年里被边缘化然后淘汰

2. vue 基本使用

2.1 基本使用步骤

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

注意：如果 el 的选择器选择了多个 DOM 则只处理第一个 DOM。

<body>
    <!--  希望 vue 能控制下面的这个 div 帮我们把数据填充到 div 内部 -->
    <div id="app"> {{ username }} </div>

    <!-- 1.导入 vue 的库文件 ，在 window 全局就有了 vue 这个构造函数-->
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
    <!-- 2.创建 vue 实例对象 -->
    <script>
        // 创建 vue 实例对象
        const vm = new Vue({
            // el 表示当前 vm 实例控制哪个区域
            //    接受的值是一个选择器
            el: '#app',
            //  data 对象就是要渲染到页面上的数据
            data: {
                username: 'Hello Vue !'
            }
        })
    </script>
</body>

3.vue 调试工具

3.1 安装

安装：浏览器右上角三个点 -> 更多工具 -> 扩展程序 -> 打开右上角开发者模式 -> Vue.js devtools -> 添加至扩展程序 -> 关闭开发者模式
配置：点开 Vue.js devtools 的详情 -> 打开允许访问文件网址 -> 有权访问网站选择在所有网站上
此时重启浏览器，如果检查界面还是没有出现 Vue ，又可能引入的vue是压缩版(vue.min.js)而不是开发版本，这里推荐下载开发版本到本地来使用，下载地址：传送门