松鼠乐园 松鼠乐园
  • 注册
  • 登录
  • 首页
  • 快捷入口
    • Vue
    • Tensorflow
    • Springboot
    • 语言类
      • CSS
      • ES5
      • ES6
      • Go
      • Java
      • Javascript
    • 工具类
      • Git
      • 工具推荐
    • 服务器&运维
      • Centos
      • Docker
      • Linux
      • Mac
      • MySQL
      • Nginx
      • Redis
      • Windows
    • 资源类
      • 论文
      • 书籍推荐
      • 后端资源
      • 前端资源
      • html网页模板
      • 代码
    • 性能优化
    • 测试
  • 重大新闻
  • 人工智能
  • 开源项目
  • Vue2.0从零开始
  • 广场
首页 › Vue2.x从零开始 › 数据驱动和dom驱动的区别

数据驱动和dom驱动的区别

迦娜王
2年前Vue2.x从零开始
1,122 0 0

数据驱动和dom驱动的区别

在进行对比之前,我觉得有必要事先了解下dom驱动和数据驱动这两个词。

dom驱动

何为dom驱动?简单来说就是直接通过代码操作页面上的html元素。下面使用代码更加直观的来表达。
现在有这么一段html代码

<div id="content">text<div>

如果我们需要改变text为hello everyone,通常用原生JavaScript来编写的话是这样的:

var contentDiv = document.getElementById('content')
contentDiv.innerHtml = 'hello everyone'

数据驱动

数据驱动顾名思义,通过数据来驱动页面的变化。我们依然通过代码来表达这个过程。现在我们对dom驱动中的代码部分进行改写。

<div>{{val}}<div>

同样我们把val的值进行改变:

val = 'hello everyone'

现在我们的代码将会变得极其简单。看到这里你可能一头雾水,完整代码如下:

<template>
    <div>{{val}}<div>
</template>
<script>
export default {
    data(){
        return {
            val:'text'
        }
    }
}
</script>

通过改变val变量的值,就可以改变div里面的内容。

小结

在数据驱动的开发模式下,开发者更多的是关心数据怎么流转,数据怎么变,而不需要通过代码去操作元素。开发过程更加简洁,代码更加简洁专一。之前是写Jquery的同学,需要在思维上进行转变,这样才能适应数据驱动模式下的开发。相信你会偏爱这种模式,做出更加强大的应用。

0
本文系作者 @迦娜王 原创发布在 松鼠乐园。未经许可,禁止转载。
认识Vue
上一篇
生命周期
下一篇
评论 (0)

请登录以参与评论。

现在登录
  • 数据驱动和dom驱动的区别
  • dom驱动
  • 数据驱动
  • 小结
相关文章
router的使用
watch属性的使用
computed属性的使用
vuex的简单使用
松鼠乐园

资源整合,创造价值

小伙伴
墨魇博客 无同创意
目录
重大新闻 Centos CSS Docker ES5 ES6 Go Java Javascript Linux Mac MySQL Nginx Redis Springboot Tensorflow Vue Vue2.x从零开始 Windows 书籍推荐 人工智能 前端资源 后端资源 壁纸 开源项目 测试 论文
Copyright © 2018-2021 松鼠乐园. Designed by nicetheme. 浙ICP备15039601号-4
  • 重大新闻
  • Centos
  • CSS
  • Docker
  • ES5
  • ES6
  • Go
  • Java
  • Javascript
  • Linux
  • Mac
  • MySQL
  • Nginx
  • Redis
  • Springboot
  • Tensorflow
  • Vue
  • Vue2.x从零开始
  • Windows
  • 书籍推荐
  • 人工智能
  • 前端资源
  • 后端资源
  • 壁纸
  • 开源项目
  • 测试
  • 论文
热门搜索
  • jetson nano
  • vue
  • java
  • mysql
  • 人工智能
  • 人脸识别
迦娜王
坚持才有希望
1224 文章
33 评论
233 喜欢
  • 0
  • 0
  • Top