01 vue 入门

最新推荐文章于 2023-05-17 19:46:30 发布

Civitasv

最新推荐文章于 2023-05-17 19:46:30 发布

阅读量155

点赞数 1

分类专栏： Vue 文章标签： html 前端框架 vue

本文链接：https://blog.csdn.net/qq_40996400/article/details/104138653

版权

Vue 专栏收录该内容

36 篇文章 2 订阅

订阅专栏

特点

Vue.js是目前十分火爆的一个前端框架，Vue不但可以用于网页开发，还可以开发app
前端主流框架之一
是一套构建用户界面的框架，只关注View层，易于上手，易于与第三方类库相整合兼容
让程序员不需要再操作Dom元素

发展：原生JS->jQuery->前端模板引擎->Angular.js/Vue.js(减少不必要的Dom操作，数据双向绑定)

框架：是一套完整的解决方案，对项目的侵入性较大，功能完善

库：小功能的实现，相当于插件，对项目的侵入性较小

MVC vs MVVM

MVC是全局的开发概念，是一种开发模式，分为Model、View、Controller三层架构。

MVVM是前端的开发概念，针对View层，进行再度划分，分成M、V和VM，其中VM是MVVM架构思想的核心。

上图来自传智播客Vue教程

一个小例子

<html>
  <head>
      <meta charset="utf-8"></meta>
      <title>Vue first</title>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
      <!-- vm控制这个元素内的所有内容 V层-->
      <div id="app">
          <p>{{msg}}</p>
      </div>
      <script>
        // 创建Vue实例
        // 当我们导入包之后，在浏览器的内存中就多了一个 Vue 构造函数 VM层
        var vm = new Vue({
            el: "#app", // 表示当前新建Vue示例绑定的dom
            data:{  // data属性存储el中所要使用的数据
                msg:"Hello World"   // 通过Vue提供的指令，可以方便的将数据渲染到页面上，不需要手动操作dom元素 M层
            }
        })
        </script>
  </body>
</html>