Vue起步概念

最新推荐文章于 2023-07-23 19:12:30 发布

从人到猿

最新推荐文章于 2023-07-23 19:12:30 发布

阅读量429

点赞数

分类专栏： Vue 文章标签： Vue起步概念

本文链接：https://blog.csdn.net/qq_39200185/article/details/99886662

版权

Vue 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

Vue

Vue.js 优势

简洁：HTML 模板 + Vue 实例 + JSON 数据
轻量：17kb，性能好
设计思想：视图与数据分离，无需操作DOM
社区：大量的中文资料和开源案例

小结

Vue.js 概念：Vue.js 是 MVVM 结构的前端框架
Vue.js特点：简介、轻量、性能好、社区活跃

MVC 框架

1. 什么是框架

封装与业务无关的重复代码，形成框架

2. 框架的优势

使用框架提升开发效率（虽然使用框架要遵循框架的语法但是使用框架可以大大提高对于业务逻辑的操作）

3. MVC - 表示软件可分成三部分

模型（Model）
视图（View）
控制器（Controller）

4. 为什么要使用 MVC

MVC 是一种专注业务逻辑，而非显示的设计思想
MVC中没有DOM操作
将数据独立出来，方便管理
业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。

Vue.js是一套构建用户界面的MVVM框架

MVVM分为三个部分：分别是M（Model，模型层），V（View，视图层），VM（ViewModel，V与M连接的桥梁，也可以看作为控制器MVC的C层）

M：模型层，主要负责业务数据相关
M：模型层，主要负责业务数据相关
VM：V与M沟通的桥梁，负责监听M或者V的修改，是实现MVVM双向绑定的要点；因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

MVVM思想关系图

MVP思想

1. MVP的全称为Model-View-Presenter，Model提供数据，View负责显示，Presenter负责逻辑的处理

2. MVP与MVC有着一个重大的区别：在MVP中View并不直接使用Model，它们之间的通信是通过Presenter来进行的.而在MVC中View会直接从Model中读取数据而不是通过Controller。

小结

什么是框架：封装与业务逻辑无关的重复代码形成框架
MVC 思想：一种将数据层和设计蹭分离的设计思想
MVVM思想：意思就是当M层进行数据修改时，VM层会监测到数据的变化，通知V层进行相应的修改，反之相同
MVP思想：MVP的全称为Model-View-Presenter，Model提供数据，View负责显示，Presenter负责逻辑的处理

声明式渲染与数据驱动

Vue声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM，也就是将模板中的文本数据写进DOM中
命令式渲染：命令我们的程序去做什么，程序就会跟着你的命令去一步一步执行
声明式渲染：我们只需要告诉程序我们想要什么效果，其他的交给程序来做。

Vue数据驱动

通过控制数据的变化来显示vue的数据驱动是视图的内容随着数据的改变而改变
Vue数据驱动

Vue渲染方式

{{}}–表达式
将双大括号中的数据替换成对应属性值进行响应式的展示

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 创建视图（用户可以看见的） -->
    <div id="demodiv">
        <p>{{name}}</p>     <!--{{}}======>双花括号赋值大法 -->
        <p>{{age}}</p>
        <p>{{age+num}}</p>
        <p>{{arr}}</p>
        <p>{{arr[4]}}</p>
        <p>{{obj.name}}</p>
        <p>{{bool?"你好":"你坏"}}</p>
    </div>
</body>

</html>
<!-- 引入vue文件 -->
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
    //创建视图模型VM层（实例化vue实例）---->把视图和模型关联起来
    new Vue({
        el:"#demodiv",//在视图模型中关联视图层
        data:{
            name:"王大锤",
            age:23,
            num:1,
            arr:[1,2,3,4,5,6,7],
            obj:{
                name:"王小锤"
            },
            bool:false
        }
    })
    /* 
    总结：
    在传统的js中，如果想把一个数据放到页面中，必须通过DOM的方式进行操作
    但是在vue（MVVM）框架中，不需要任何的DOM操作，一切的数据绑定全部交给vue进行操作
    对于开发者来说，我们跟需要关注的是逻辑，而不是重复的DOM操作
    */
</script>

模板语法基本用法

模板语法中可以写入哪些内容

数字
字符串
计算
mvc设计思想，是为了使页面和数据进行很好的分离；如果在表达式中写入过多的逻辑代码，那么违背了最初的设计思想；也就使代码看起来很复杂，难以维护

表达式基本用法

表达式中可以写入哪些内容

JSON数据
数组

表达式基本用法

注意

避免在双括号中使用复杂的表达式

常见问题

如何区分插值中的内容是表达式还是普通文本？
Vue.js 会通过是否带引号区分两者

小结

表达式概念：使用双大括号来包裹 js 代码构成表达式
表达式语法：使用双花括号语法

从人到猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue起步概念

VueVue.js 优势简洁：HTML 模板 + Vue 实例 + JSON 数据轻量：17kb，性能好设计思想：视图与数据分离，无需操作DOM社区：大量的中文资料和开源案例小结Vue.js 概念：Vue.js 是 MVVM 结构的前端框架Vue.js特点：简介、轻量、性能好、社区活跃MVC 框架1. 什么是框架封装与业务无关的重复代码，形成框架2. 框架的优势使用框...
复制链接

扫一扫