Vue基础学习笔记01

文章目录

一、Vue简介（2022.7.1）
二、Vue的使用

一、Vue简介（2022.7.1）

官方给出vue的概念

1、什么是Vue

1）构建用户界面

用vue在html页面中填充数据，非常方便

2）框架

框架时一套现场的解决方案，程序员智能遵守框架的规范，去编写自己的业务功能
要学习vue，就是在学习vue框架中规定的用法！
vue指令、组件（是对UI结构的复用）、路由、Vuex、vue组件库
只有把上面罗列的内容掌握以后，才有开发vue项目的能力

2、Vue的两个特性

1）数据驱动视图

数据驱动视图

数据的变化会驱动视图自动更新
好处：程序员在只管把数据维护好，那么页面结构会被vue自动渲染出来！
数据驱动实体是单向的数据绑定

2）双向数据绑定

双向数据绑定

在网页中，form表单负责采集数据，Ajax负责提交数据
好处：程序员不需要手动添加DOM操作即可得到表单最新值
js数据的变化，会被自动渲染到页面上
页面上表单采集的数据发生变化的时候，会被vue自动获取到，并更新到js数据中

3）、MVVM

MVVM
MVVM全写时Model、View、和ViewModel

MVVM是一种思想，把每个html拆分成了上面三个部分组成

（1）、Model、View、ViewModel

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

（2）、MVVM的工作原理

MVVM工作原理

注意：数据驱动试图和双向数据绑定的底层原理是MVVM（Model数据源、View视图、ViewModel就是vue实例）

ViewModel起一个链接桥梁的作用

4、Vue的版本

在这里插入图片描述

二、Vue的使用

1、基本使用步骤

基本使用步骤

2、准备所需文件

我们在Edge浏览器（google请自行找寻扩展包）下载vue扩展（虽然现在不知道是干嘛用的）并且管理扩展里面点击详细信息让它能够访问文件的URL
在官网下载Vue.js，点击下面的下载就可以直接下载Vue.js
下载Vue.js

3、Vue第一个网页

使用Vue将数据渲染到页面上

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="" />
    </head>
    <body>
        <!-- 希望vue能够控制下面这个div，帮我们把数据渲染到div内部-->
        <div id="app">{{ username }}</div>
        <!-- 1.导入Vue的库文件,在window全局就有了Vue这个构造函数-->
        <script src="./lib/vue.js"></script>
        <!-- 2.创建Vue的实例对象-->
        <script>
            const vm = new Vue({
                //el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
                el: '#app',
                //data对象就是要渲染到页面上的数据
                data:{
                    username: '张三'
                }
            })
        </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

相关阅读:
Tomcat 部署 war 包
leetcode刷题（126）——1289. 下降路径最小和 II
MySQL 主从复制、读写分离
如何在aws服务器上部署mysql
feign 全局与局部拦截器的区分与使用
MySQL数据库（表的CRUD基础操作（最常用））
详解Java NIO，IO与NIO的区别
ubuntu18.04 安装HBA
电力系统的虚假数据注入攻击和MTD系统研究（Matlab代码实现）
Chrome插件精选 — 网页截图插件

原文地址：https://blog.csdn.net/weixin_53547097/article/details/125561193