初识Vue

最新推荐文章于 2022-07-25 19:26:06 发布

童、一

最新推荐文章于 2022-07-25 19:26:06 发布

阅读量87

点赞数

分类专栏： # Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44432831/article/details/115535459

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

学习目标：

初识Vue

学习内容：

初识Vue

学习时间：

学习产出：

一、初识Vue

1、概述

Vue是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其他大型框架不同的是，
Vue被设计未可以自底向上逐层应用。Vue的核心库只关注图层，不仅易于上手，还便于与第三方库
（如:vue-router:跳转，vue-resource:通信，vuex:管理）或既有项目整合

2、前端三要素

HTML(结构):超文本标记语言，决定网页的结构和内容
CSS(表现):层叠样式表，设定网页的表现样式
JavaScript(行为):是一种弱类型脚本语言，其源代码不需经过编译，而是由浏览器解释运行，用于控制网页的行为

3、JavaScript框架

jQuery:大家熟知的JAvaScript框架，优点是简化了DOM操作，缺点是DOM操作太频繁，影响前端性能；
Angular:Google收购的前端框架，由一群Java程序员开发，其特点是酱后台的MVC模式搬到了前端，
并增加了模块化开发的理念，与微软合作，采用TypeScript语法开发；最大的缺点是版本迭代不合理
（如一代到二代，除了名字，基本就是两个东西）
React:Facebook出品，一款高性能的JS前端框架；特点是提出新概念[虚拟DOM]用于减少真实DOM操作,
在内存中国模拟DOM操作，有效的提升了前端渲染效率；缺点是使用复杂，因为需要额外学习一门[JSX]语言
Vue:一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、
状态管理等新特性。其特点是综合了Angular(模块化)和React(虚拟DOM)的优点
Axios:前端通信框架；因为Vue的边界很明确，就是为了处理DOM，所以并不具备通信能力，此时就需要
额外使用一个通信框架与服务器交互，当然也可以直接选择使用jQuery提供的Ajax功能

前端三大框架:Angular、React、Vue

二、第一个Vue程序

1、什么使MVVM

MVVM(Model-View-ViewModel)是一种软件架构设计模式，由微软WWPF和Silverlight的架构师Ken Cooper和
Ted Peters开发，是一种简化用户界面的事件编程驱动方式。

MVVM源自于经典的MVC模式。MVVM的核心是ViewModel层，负责Model中的数据对象来让数据变得更容易管理和使用，作用:

该层向上与视图层进行双向数据绑定
向下与Model层通过接口请求进行数据交互

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pfil388H-1617900971260)(pic/MVVM示意图.png)]

2、为什么使用MVVM

MVVM模式和MVC模式一样，主要目的是分离视图(View)和模型(Model),有几大好处:

低耦合：视图可以独立于Model变化和修改，一个ViewMode可以绑定到不同的View上，当View变化的时候Model可以不变，
当Model变化的时候View也可以不变。
可复用：你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
独立开发：开发人员可以专注于业务逻辑和数据的开发(ViewModel);设计人员可以专注于页面设计。
可测试：界面素来是比较难测试的，而现在测试可以针对ViewModel来写。

3、Vue是MVVM模式的实现者

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YaUpVPAG-1617900971266)(pic/MVVM模型图.png)]

Model层:模型层，在这里表示JavaScript对象
View:视图层，在这里表示DOM（HTML操作的元素）
ViewModel:连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者，在MVVM架构中，是不允许数据和
视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者
ViewModel能够观察到数据的变化，并对视图对应的内容进行更新
ViewModel能够监听到视图的变化，并能够通知数据发生改变

Vue.js就是一个MVVM的实现者，他的核心就是实现了DOM监听和数据绑定

4、第一个Vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个Vue程序</title>
</head>
<body>
<div>
    <h2>张三</h2>
</div>

<div id ="app1">
    {{message}}
</div>
<div id ="app2">
    {{message}}
</div>
<!--Vue的cnd-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.2/dist/vue.min.js"></script>
<script>
    var vm1 = new Vue({
        el:"#app1",
        data:{
            message:"hello Vue！"
        }
    });
    var vm2 = new Vue({
        el:"#app2",
        data:{
            message:"hello World！"
        }
    });
</script>
</body>
</html>

在浏览器里面通过控制台对页面进行修改，发现vm1,vm2的值可以进行动态的修改（通过ViewModel进行修改），
而h2的值无法进行修改，只有修改前端的代码才能使h2改变

童、一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识Vue

学习目标：初识Vue学习内容：初识Vue学习时间：学习产出：一、初识Vue1、概述Vue是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其他大型框架不同的是，Vue被设计未可以自底向上逐层应用。Vue的核心库只关注图层，不仅易于上手，还便于与第三方库（如:vue-router:跳转，vue-resource:通信，vuex:管理）或既有项目整合2、前端三要素HTML(结构):超文本标记语言，决定网页的结构和内容CSS(表现):层叠样式表，设定网页的表现样
复制链接

扫一扫