vue.js总结

2301_76465446

已于 2024-01-05 21:15:56 修改

阅读量895

点赞数 14

文章标签： vue.js

于 2024-01-05 21:14:42 首次发布

本文链接：https://blog.csdn.net/2301_76465446/article/details/135418156

版权

Vue.js是一款流行的JavaScript框架，用于构建用户界面。它通过采用组件化的开发方式，使得前端开发更加简单、高效和可维护。以下是对Vue.js的一些总结：

轻量级：Vue.js的核心库非常轻量，文件大小小，加载速度快。
双向数据绑定：Vue.js采用了响应式的数据绑定机制，能够自动追踪数据的变化，并在视图中实时更新。
组件化开发：Vue.js鼓励将UI拆分为独立、可复用的组件。每个组件都有自己的逻辑和视图，使得代码更易理解和维护。
虚拟DOM：Vue.js使用虚拟DOM来提高渲染性能。通过比较虚拟DOM和实际DOM的差异，最小化了对实际DOM的操作。
模板语法：Vue.js使用类似HTML的模板语法，可以方便地描述视图的结构和数据绑定。
生命周期钩子：Vue.js提供了一系列生命周期钩子函数，允许开发者在不同阶段执行自定义的逻辑。
插件系统：Vue.js提供了丰富的插件系统，可以扩展其功能，如vue-router、vuex等。
社区支持：Vue.js拥有活跃且庞大的社区，提供了大量的开源组件和解决方案，方便开发者快速搭建应用。

总的来说，Vue.js是一款灵活、高效的前端框架，适用于构建各种规模的Web应用。它的简单易学和优雅的设计使得开发者能够更加专注于业务逻辑的实现。

以下是Vue.js的一些核心特性和概念：

1. 响应式数据绑定： Vue.js使用双向绑定的数据模型，将数据和视图进行关联。当数据发生变化时，视图会自动更新，反之亦然。

2. 组件化开发： Vue.js鼓励通过组件化的方式来构建页面。一个组件封装了HTML、CSS和JavaScript的整个功能单元，可以重复使用和嵌套组合，提高了代码的可维护性和可重用性。

3. 虚拟DOM： Vue.js通过虚拟DOM机制提供高效的渲染性能。它会在内存中构建一个虚拟的DOM树，然后与实际DOM进行比较，只更新需要更新的部分，以减少重新渲染的开销。

4. 指令和过滤器： Vue.js提供了丰富的指令（Directives）和过滤器（Filters），用于处理DOM元素的动态渲染和数据转换。

5. 生命周期钩子： Vue.js提供了一组生命周期钩子函数，可以在不同阶段插入自定义代码，例如在组件创建、挂载、更新和销毁时执行特定的逻辑。

6. 路由和状态管理： Vue.js支持使用Vue Router进行客户端路由管理，以实现单页面应用（SPA）。同时，Vue.js还提供了Vuex状态管理模式，用于集中管理应用程序的状态。

以上只是Vue.js的一些主要特性，它还有更多功能和工具可供探索。

vue的概述及vue的入门小实例
vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。

如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。

特性：

1.Vue.js是一个构建数据驱动的web界面的库。技术上，它重点集中在MVVM模式的ViewModel层，因此它非常容易学习，非常容易与其它库或已有项目整合。

2.Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

3.前端组件化：一个组件相当于一个小的区域/模块（或者简单的理解成是一个w3c未提供给我们的标签）

4.Vue.js的核心是一个响应的数据绑定系统它让数据与DOM保持同步非常简单。

补充知识：

最常见的客户端架构有三种：

MVC: Model-View-Controller
MVP: Model-View-Presenter
MVVM: Model-View-ViewModel（面向数据M层）
MVVM：
Vue是一个MVVM框架 Mvvm定义MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。M是model V是view 对应的是视图层,VM是把M层和V层关联起来的一个中间层，VM能够实现数据的双向绑定。

兼容性：
兼容性：Vue不支持IE8及以下的版本，因为Vue使用了IE8无法模拟的ECMAScript5的特性，但它支持所有兼容ECMAScript5的浏览器。

MVC：
在 MVC 里面，Model 是数据模型；View 是视图或者说就是我们的软件界面需要去展示的东西；Controller 是用来控制Model的读取、存储，以及如何在 View上展示数据，更新数据的逻辑控制器。vm=C=P

vue开发工具：
开发者工具：在使用Vue时，推荐在你的的浏览器上安装vue-devtools。vue-devtools是基于chrome的一款浏览器插件，是开发过程中必不可少的，其高效、简洁、方便的特点深受vue开发者的喜爱。它允许你在一个更好的界面中审查和调式Vue应用。

vue-devtools的插件安装：
下载链接：Vue Devtools_6.4.5_chrome扩展插件最新版下载_极简插件

打开浏览器扩展安装页面

点击浏览器右上角⋮>更多工具> 点击扩展程序

在扩展中心打开右上角的【开发者模式】按钮，然后【刷新】页面，把下载好的 .crx 文件拖入扩展中心

vue-devtools如何使用：

当我们添加完vue-devtools扩展程序之后，我们在调试vue应用的时候，chrome开发者工具中会看一个vue的一栏，点击之后就可以看见当前页面vue对象的一些信息。

vue-devtools使用起来还是比较简单的，上手非常的容易，这里就细讲其使用说明了。

二、vue 引入
下面我们用vue的独立版本/将vue.js下载到本地在引入到项目中：

vue.js官网：介绍 — Vue.js

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者：

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
1.vue简单入门实例：
每一个vue.js应用的起步都是通过构造函数Vue创建一个Vue的根实例：

一个Vue实例其实就是一个MVVM模式中所描述的ViewModel，因此在文档中经常会使用app这个变量名。

//vue根实例
var app = new Vue({

//选项
})
下面用一个简单的实例来体验vue的特性：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>

<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>{{details()}}</h1>
</div>
</body>
//引入我们本地的vue.js
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
// 这是我们的Model
var exampleData = {
site: "菜鸟教程",
url: "www.runoob.com",
alexa: "10000"
}

// 创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model
var vm = new Vue({
el: '#vue_det',//挂载到html标签上的dom上还可以用类的形式绑定……
data: exampleData,//将我们上面的对象赋值给vue实例中的data
methods: {
details: function () {
return this.site + " - 学的不仅是技术，更是梦想！";
}
}
})
// 打印出vue的实例
console.log(vm);
</script>

</html>

2301_76465446

关注

14
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
vue.js总结

如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。vue-devtools是基于chrome的一款浏览器插件，是开发过程中必不可少的，其高效、简洁、方便的特点深受vue开发者的喜爱。当我们添加完vue-devtools扩展程序之后，我们在调试vue应用的时候，chrome开发者工具中会看一个vue的一栏，点击之后就可以看见当前页面vue对象的一些信息。1.Vue.js是一个构建数据驱动的web界面的库。
复制链接

扫一扫