【2.0】Vue之引入

【一】Vue介绍

  • Vue (读音 /vjuː/，类似于 view) 是一个渐进式JavaScript框架，用于构建用户界面。

  • 它与其他大型框架的不同之处在于，Vue的设计理念是可以逐层应用的。

  • Vue的核心库只关注视图层，这使得它不仅易于上手，还方便与第三方库或已有项目进行整合。

  • Vue采用了M-V-VM（Model-View-ViewModel）的思想

    • 它是一种基于前端开发的架构模式，也是一种事件驱动的编程方式。
    • 在M-V-VM中
      • Model代表前端的数据，可以简单理解为JavaScript的变量；
      • View代表我们看到的界面，包括CSS和HTML；
      • ViewModel负责连接 Model和View
        • 当Model发生变化时，View页面就会相应地发生变化；
        • 同样地，当View页面发生变化时，ViewModel中的变量也会相应地改变。

  • 除了M-V-VM，还有其他一些常见的架构模式

    • 例如
      • MTV（Model-Template-View）
      • MVC（Model-View-Controller）
      • MVP（Model-View-Presenter）。
    • 然而
      • 在前端开发中，MVVM和组件化开发、单页面开发（SPA）结合使用的情况比较普遍。

  • 目前，Vue的最新版本是Vue4，但并没有公司在使用

    • 主流的公司项目基本上会采用Vue3
    • 而老项目仍然继续使用Vue2。

【二】编辑器的选择

  • python---》Pycharm
  • 前端
    • webstorm:(jetbrains公司的，使用习惯跟Pycharm)
    • vscode：免费
    • Sublime Text
    • vim

【三】Vue下载

  • 下载

    https://cdn.jsdelivr.net/npm/vue/dist/vue.js

【四】使用

<body>
<div id="app">
    <!--  插值语法  -->
    {{s}}
    <h1>{{name}}</h1>
</div>
</body>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            s: "hello world",
            name:"dream"
        }
    })
</script>

posted @ 2023-08-06 22:26  Chimengmeng  阅读(59)  评论(0)  编辑  收藏  举报