【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  阅读(58)  评论(0编辑  收藏  举报