Vue初体验

最新推荐文章于 2021-09-11 22:17:44 发布

一只抠代码的汪

最新推荐文章于 2021-09-11 22:17:44 发布

阅读量164

点赞数

文章标签： mvvm 设计模式 vue.js

本文链接：https://blog.csdn.net/wangwangwang21/article/details/107734703

版权

前言

什么是Vue.js？以前只是常听大佬叨叨，我也是一头雾水！前不久刚粗略地学完JS，就迫不及待的来学Vue。Vue读音（[vju:] 同view），view：视图，顾名思义，Vue.js肯定跟视图有关联…打开Vue中文网 “渐进式JavaScript 框架”几个字映入眼帘，脑海里有了大个大概，vue.js就是一个js库，并且无依赖别的js库，跟jquery差不多。vue的核心库只关注视图层，非常容易与其它库或已有项目整合。Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。在这里插入图片描述

什么是Vue.js的MVVM设计模式？

MVVM我之前没听说过，但我知道MVC编程模式！
MVC：M是指业务模型（Model），V是指用户界面（View），C则是控制器（Controller）。jquerry就是采用这种模式在这里插入图片描述
MVVM：MVVM是MVC的改进版 M是指业务模型（Model），V是指用户界面（View），VM则是ViewModel。

优点：MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大优点

低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xaml代码。
可测试。界面素来是比较难于测试的，测试可以针对ViewModel来写。

弄清了MVVM设计模式，下面正是开始学习Vue.js

安装Vue.js

有三种方式安装Vue.js：

1.标签引入(初学者推荐)
Vue.js的安装方式非常简单跟jquerry一样，你可以下载后（https://cn.vuejs.org/js/vue.js）引入；在这里插入图片描述
或者直接从cdn引入

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2.npm安装

# 最新稳定版
$ npm install vue

3.命令行工具安装（CLI）

Hello Vue！

在这里插入图片描述

<body>
        
        <div class="app">
            {{message}}
        </div>
        <script>
            var app = new Vue(
                {
                    el:'.app',
                    data:{
                        message:'hello Vue!'
                    }
                }
            )

        </script>    
    </body>

在这里插入图片描述

一只抠代码的汪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue初体验

前言什么是Vue.js？以前只是常听大佬叨叨，我也是一头雾水！前不久刚粗略地学完JS，就迫不及待的来学Vue。Vue读音（[vju:] 同view），view：视图，顾名思义，Vue.js肯定跟视图有关联…打开Vue中文网 “渐进式JavaScript 框架”几个字映入眼帘，脑海里有了大个大概，vue.js就是一个js库，并且无依赖别的js库，跟jquery差不多。vue的核心库只关注视图层，非常容易与其它库或已有项目整合。Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的A
复制链接

扫一扫