• Vue2 零基础入门 Vue2 零基础入门第二天 2.1 vue简介 && 2.2 vue的基本使用 && 2.3 vue的调试工具

    Vue2 零基础入门

    Vue2 零基础入门第二天

    老师：黑马程序员

    文章目录

    2 Vue基础入门

    2.1 vue简介
    2.1.1 什么是vue

    Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架。

    2.1.2 vue的特性

    vue 框架的特性，主要体现在如下两方面：

    ① 数据驱动视图

    ② 双向数据绑定

    【数据驱动视图】

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

    在这里插入图片描述

    好处：当页面数据发生变化时，页面会自动重新渲染

    数据驱动视图是单向的数据绑定。

    【双向数据绑定】

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

    在这里插入图片描述

    好处：开发者不再需要手动操作 DOM 元素，来获取表单元素最新的值

    【MVVM】

    MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。MVVM 指的是 Model、View 和 ViewModel，它把每个 HTML 页面都拆分成了这三个部分

    在这里插入图片描述

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

    【MVVM的工作原理】

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

    在这里插入图片描述

    当数据源发生变化时，会被 ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构

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

    2.1.3 vue的版本

    当前，vue 共有 3 个大版本，其中：

    • 2.x 版本的 vue 是目前企业级项目开发中的主流版本
    • 3.x 版本的 vue 于 2020-09-19 发布，生态还不完善，尚未在企业级项目开发中普及和推广
    • 1.x 版本的 vue 几乎被淘汰，不再建议学习与使用

    3.x是未来趋势

    2.2 vue的基本使用
    2.2.1 基本使用步骤

    ① 导入 vue.js 的 script 脚本文件

    ② 在页面中声明一个将要被 vue 所控制的 DOM 区域

    ③ 创建 vm 实例对象（vue 实例对象）

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<div id="app">
    {{username}}
div>


<script src="./lib/vue.js">script>
<script>
    //创建vm实例对象
    const vm = new Vue({
        //指定控制区域
        el : '#app',
        //指定model数据源
        data :{
            username : 'dingjiaxiong'
        }
    })
script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    笔者这里用的是从官方下的vue.js

    在这里插入图片描述

    直接查看页面

    在这里插入图片描述

    2.2.2 基本代码与MVVM的对应关系

    在这里插入图片描述

    2.3 vue的调试工具
    2.3.1 安装vue-devtools调试工具

    vue 官方提供的 vue-devtools 调试工具，能够方便开发者对 vue 项目进行调试与开发。

    Chrome 浏览器在线安装 vue-devtools ：
    https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

    FireFox 浏览器在线安装 vue-devtools ：
    https://addons.mozilla.org/zh-CN/firefox/addon/vue-js-devtools/

    在这里插入图片描述

    在这里插入图片描述

    2.3.2 配置Chrome浏览器中的vue-devtools

    在这里插入图片描述

    重启浏览器

    2.3.3 使用vue-devtools调试vue页面

    在这里插入图片描述

    在这里插入图片描述

  • 相关阅读:
    WPF 控件专题 DockPanel 控件详解
    基于Paragraph-BERT-CRF的科技论文摘要语步功能信息识别方法研究
    UVM学习笔记—快速入门篇
    12月2日：thinkphp中的链式操作
    基于区块链与联邦学习技术的数据交易平台
    系统及其存储相关
    10月11日，每日信息差
    [ESP32 Arduino] LVGL Button的使用
    java 线程的生命周期
    分销商城小程序开发运营逻辑是什么？
  • 原文地址：https://blog.csdn.net/weixin_44226181/article/details/126775993