（2）vue.js介绍

泽哥ins

已于 2022-01-23 12:00:11 修改

阅读量363

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2022-01-23 11:58:58 首次发布

本文链接：https://blog.csdn.net/qq_36213140/article/details/122649218

版权

Vue 专栏收录该内容

32 篇文章 3 订阅

订阅专栏

一、vue.js介绍

中文官网：https://vuejs.bootcss.com/guide/

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二、vue.js核心特性

2.1数据驱动视图

• 数据变化会自动更新到对应元素中，无需手动操作 DOM，这种行为称作单向数据绑定。

• 对于输入框等可输入元素，可设置双向数据绑定。

• 双向数据绑定是在数据绑定基础上，可自动将元素输入内容更新给数据，实现数据与元素内容的双向绑定。

• Vue.js 的数据驱动视图是基于 MVVM 模型实现的。

• MVVM (Model – View – ViewModel )是一种软件开发思想

• Model 层，代表数据

• View 层，代表视图模板

• ViewModel 层，代表业务逻辑处理代码

• 基于MVVM 模型实现的数据驱动视图解放了DOM操作

• View 与 Model 处理分离，降低代码耦合度

• 但双向绑定时的 Bug 调试难度增大

• 大型项目的 View 与 Model 过多，维护成本高

2.2组件化开发

• 组件化开发，允许我们将网页功能封装为自定义 HTML 标签，复用时书写自定义标签名即可。

• 组件不仅可以封装结构，还可以封装样式与逻辑代码，大大提交了开发效率与可维护性。

三、使用vue.js框架方式操作DOM示例

接下来呢，我们要学习vue.js，它可以让我们的代码和逻辑同时进行缩短，是不是很nice！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>03.vue.js操作dom</title>
</head>
<body>
  <div id="box">
    <p>当前数值为:{{num}}</p>
    <button @click="num++">点击增大</button>
    <button @click="num--">点击减小</button>
  </div>
  <script src="js/vue-2.6.14.js"></script>
  <script>
    new Vue({
      el: '#box',
      data: {
        num: 100
      }
    })
  </script>
</body>
</html>