Vue P01-概念

最新推荐文章于 2025-06-03 17:15:53 发布

Toreme

最新推荐文章于 2025-06-03 17:15:53 发布

阅读量127

点赞数

分类专栏： Vue 文章标签： vue.js javascript java

本文链接：https://blog.youkuaiyun.com/weixin_55727899/article/details/125780149

版权

Vue 专栏收录该内容

12 篇文章

订阅专栏

前端技术的发展

从静态走向动态

网页基于XML语言创造，HTML只具备文本图片的显示及页面间相互跳转
CGI 可以从数据库或者文件系统获取数据
- 服务端语言的鼻祖
PHP、JSP、ASP等各种服务端语言层出不穷，前端网页从静态走向动态

从后端走向前端

Ajax(Asynchronous JavaScript And XML，异步JavaScript和XML)通过XMLHttpRequest对象，可以在不重载页面的情况下与Web服务器交换数据，再加上JavaScript的document对象，开发者可以很轻松的实现页面局部内容更新

Ajax的发展推动了前后端分离

在取得一个良好定义的RESTful( Representation State Transfer，表述性状态转移 )接口后，两端甚至可以在零沟通成本的情况下并行完成项目任务

Ajax实现了无刷新的数据交互，而前端路由则实现了无刷新的页面跳转；Ajax将Web Page发展成Web App，而前端路由则给了Web App 更多的可能，如SPA （ Single Page Application，单页面应用）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R7jFxqZE-1657767718458)(C:\Users\Toreme\AppData\Roaming\Typora\typora-user-images\image-20220315213709828.png)]

Now很多web项目采用这样的架构，后台只负责数据的存取和组装，而前端则负责业务逻辑层和视图层的全部工作

从前端走向后端

2009年5约Node.js发布，Javascript也占据了服务端编程语言的一席之地。前端工程师可以很低的成本用Node.js和MongoDB搭建一个后台

MVVM族员——Vue.js

模型-视图-视图模型(Model-View-ViewModel,MV VM)

本质上是MVC(模型-视图-控制器)的改进版

最重要的特性是数据绑定(data binding)，此外还包括依赖注入、路由配置、数据模板等一些特性

从MVC到MVVM

MVVM的主要目的是分离视图和模型

ViewModel层封装了界面展示和操作的属性和接口

通过数据绑定，我们可以将View和ViewModel关联在一起，当ViewModel中的数据发生改变时，View也会同步更新

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uoOKa6iA-1657767718460)(C:\Users\Toreme\AppData\Roaming\Typora\typora-user-images\image-20220315215227092.png)]

Vue.js简介

Vue的核心库只关注视图层，并且提供尽可能简单的API以实现数据绑定、组件复用等机制，且非常容易学习并混入其他库

同时，Vue也完全有能力支持采用SPA设计和组合其他Vue生态库的系统

Vue与React

虚拟DOM

功能性组件

Vue比React的速度更快一些，这是因为React中有大量用于提供警告和错误提示信息的检查机制

轻量级–将与核心库无关的业务封装成独立库

都将重点放在核心库上，也都有专门负责路由和全局状态管理等功能配套库。

React：React Router/ Redux

VUe: Vue Router/ Vuex

视图模板

React采用JSX渲染组件

class HelloMessage extends React.Component {
render() {
return (
<div>
Hello {this.props.name}
</div>
);
}}
ReactDOM.render(
<HelloMessage name="Taylor" />,
mountNode
);

Vue采用模板

<template>
<div class="demo-title">{{title}}</div>
</template>
<script>
export default {
data () {
return {
title: 'Hello World'
}
}
}
</script>
<style scoped>
.demo-title {
font-size: 24px;
font-weight: 600;
}
</style>

在Vue模板的style标签上标注scoped属性可划分作用域，使CSS样式表只作用于当前组件