vue的基础

小码农升级中

已于 2024-01-16 10:03:58 修改

阅读量882

点赞数 24

文章标签： vue.js 前端 javascript

于 2024-01-15 22:24:43 首次发布

本文链接：https://blog.csdn.net/m0_58714675/article/details/135612458

版权

本文介绍了Vue.js的基本概念、核心理念（数据驱动视图和组件化），框架与库的区别，MVC与MVVM的对比，以及Vue的代码结构、数据绑定、事件处理、样式的使用、循环遍历和显示隐藏元素等内容，帮助读者全面理解并开始使用Vue开发前端应用。

摘要由CSDN通过智能技术生成

（一）vue.js介绍

1.vue是什么？

前端男神尤雨溪
构建用户界面的渐进式框架，采用自底向上，增量开发的设计。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架。

2.vue的核心理念

核心理念：数据驱动视图，组件化开发

（二）2.为什么学习流行框架

轻量级框架:只关注视图层，是一个构建数据的视图集合
简单易学:国人开发，中文文档，不存在语言障碍，易于理解和学习·
视图、数据、结构分离:使数据的更改更为简单
不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作·
虚拟DOM:不再使用原生的dom操作节点，极大解放dom操作。
运行速度更快：相比较与react而言，vue存在很大的优势

（三）框架和库的区别

3.1 框架

是一套完整的解决方案;对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。

3.2.库

提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。

（四）MVC和MVVM ***

4.1 MVC

MVC 是一种设计模式，表示“Model-View-Controller”，是后端的分层开发概念。
v-view：视图层，用来展示数据，发送请求
c-controller:调度层用来接收数据，响应数据
m-model:模型层，用来处理数据，和数据库做交互。

4.2 MVVM

MVVM 表示“Model-View-ViewModel”，是前端视图层的概念，主要关注于视图层分离。

v-view:视图层，用来展示数据
vm-view-model:视图模型层，用来链接view和model,承上启下的作用

m-model模型层，对数据进行逻辑的处理。

4.3MVC和MVVM的区别

（五）vue.js的代码结构

引入vue.js
书写视图层
实例化Vue(）

（六）展示数据的方法

差值表达式份{{}} ，可以做一些简单的运算.
v-text：类似于js中innerText，将覆盖元素中所有现有的内容
v-html：类似于js中innerHTML，内容按普通 HTML 插入
富文本：字符串，有标签等符号
v-html和v-text的异同:

- 相同点:都会覆盖原来的元素
- 不同点: v-html能解析富文本，v-text不能.

（七）写页面的基本步骤

1、搭建静态

2、分析数据（活数据死数据)

3、逻辑处理

（八）v-bind、v-on

8.1 v-bind

元素属性的绑定
写法：v-bind:属性简写： :属性

8.2 v-on

事件的绑定
写法：v-on：事件类型简写：@事件类型

（九）事件修饰符

在事件处理程序中调用 event.preventDefault() 或event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题，Vue.js 为v-on提供了事件修饰符。