VUE教程01 VUE简介、MVVM模式及数据双向绑定

最新推荐文章于 2023-02-08 17:59:33 发布

catch that elf

最新推荐文章于 2023-02-08 17:59:33 发布

阅读量419

点赞数

分类专栏：前端文章标签： VUE 简介 MVVC 双向绑定

本文链接：https://blog.csdn.net/zhangxm_qz/article/details/116401844

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章目录

VUE简介
入门示例
MVVM及数据绑定

VUE简介

什么是Vue
Vue.js 是一套构建用户界面的框架，不仅易于上手，还可以与其它第三方库整合(Swiper、IScroll、…)。
框架和库的区别
框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重构整个项目。
库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。
例如: 从jQuery 切换到 Zepto, 无缝切换。从IScroll切换到ScrollMagic, 只需要将用到IScroll的代码替换成ScrollMagic代码即可
为什么要学习框架
提升开发效率：在企业中，时间就是效率，效率就是金钱；
前端提高开发效率的发展历程：原生JS -> jQuery之类的类库 -> 前端模板引擎 -> Vue / React / Angular
为什么要先学Vue
Vue、Angular、React一起，被称之为前端三大主流框架！
但是Angular、React是老外编写的, 所以所有的资料都是英文的，而Vue是国人编写的, 所以所有的资料都是中文的, 并且Vue中整合了Angular、React中的众多优点，所以为了降低我们的学习难度, 我们先学Vue, 学完之后再学习Angular和React
Vue有哪些优势
Vue的核心概念之一:
通过数据驱动界面更新, 无需操作DOM来更新界面
使用Vue我们只需要关心如何获取数据, 如何处理数据, 如何编写业务逻辑代码,
我们只需要将处理好的数据交给Vue, Vue就会自动将数据渲染到模板中(界面上)
Vue的核心概念之二:
组件化开发，我们可以将网页拆分成一个个独立的组件来编写
将来再通过封装好的组件拼接成一个完整的网页

入门示例

Vue框架使用方式

传统下载导入使用
vue-cli安装导入使用

Vue框架使用步骤

下载Vue框架
导入Vue框架
创建Vue实例对象
指定Vue实例对象控制的区域
指定Vue实例对象控制区域的数据

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-Vue基本模板</title>
    <!--1.下载导入Vue.js-->
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{ name }}</p>
</div>
<script>
    // 2.创建一个Vue的实例对象
    let vue = new Vue({
        // 3.告诉Vue的实例对象, 将来需要控制界面上的哪个区域
        el: '#app',
        // 4.告诉Vue的实例对象, 被控制区域的数据是什么
        data: {
            name: "zhangsan"
        }
    });
</script>
</body>
</html>

MVVM及数据绑定

MVVM简介
在MVVM设计模式中由3个部分组成
M : Model 数据模型(保存数据, 处理数据业务逻辑)
V : View 视图(展示数据, 与用户交互)
VM: View Model 数据模型和视图的桥梁(M是中国人, V是美国人, VM就是翻译)
MVVM设计模式最大的特点就是支持数据的双向传递
数据可以从 M -> VM -> V
也可以从 V -> VM -> M

Vue中的MVVM
Vue其实是基于MVVM设计模式的，具体划分如下：
被控制的页面区域: View
Vue实例对象 : View Model
实例对象中的data: Model

VUE单向数据绑定
我们把"数据"交给"Vue实例对象", “Vue实例对象"将数据交给"界面”
Model -> View Model -> View

示例代码如下：

<!--这里就是MVVM中的View-->
<div id="app">
    <p>{{ name }}</p>
</div>
<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
            name: "zhangsan"
        }
    });
</script>

调试工具安装
如果你打开谷歌插件商店, 直接在线安装即可:
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=zh-CN
由于国内无法打开谷歌国外插件商店, 所以可以离线安装,点击下载
离线安装方式：下载安装文件并解压，打开谷歌插件界面然后直接将插件拖入,安装成功重启浏览器

双向数据绑定
默认情况下Vue只支持数据单向传递 M -> VM -> V，但是由于Vue是基于MVVM设计模式的, 所以也提供了双向传递的能力。在、及元素上可以用 v-model 指令创建双向数据绑定。v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值，而总是将 Vue 实例的数据作为数据来源
示例代码如下：

<div id="app">
    <p>{{ name }}</p>
    <input type="text" v-model="msg">
</div>
<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
            name: "zhangsan",
            msg: "提示信息"
        }
    });
</script>

结果演示，如果我们在输入框中修改了内容，vue对象model中的值也随之改变
在这里插入图片描述

catch that elf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
VUE教程01 VUE简介、MVVM模式及数据双向绑定

文章目录VUE简介入门示例MVVM及数据绑定VUE简介什么是VueVue.js 是一套构建用户界面的框架，不仅易于上手，还可以与其它第三方库整合(Swiper、IScroll、…)。框架和库的区别框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重构整个项目。库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。例如: 从jQuery 切换到 Zepto, 无缝切换。从IScroll切换到ScrollMagic,
复制链接

扫一扫