【2.0】Vue之引入

最新推荐文章于 2024-05-17 14:32:46 发布

Chimengmeng

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量39

点赞数

文章标签： vue.js 前端 javascript ecmascript 前端框架

本文链接：https://blog.csdn.net/Chimengmeng/article/details/132138553

版权

【一】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>

Chimengmeng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【2.0】Vue之引入

【一】Vue介绍Vue (读音 /vjuː/，类似于 view) 是一个渐进式JavaScript框架，用于构建用户界面。它与其他大型框架的不同之处在于，Vue的设计理念是可以逐层应用的。Vue的核心库只关注视图层，这使得它不仅易于上手，还方便与第三方库或已有项目进行整合。Vue采用了M-V-VM(Model-View-ViewModel)的思想它是一种基于前端开发的...
复制链接

扫一扫