认识Vue

最新推荐文章于 2022-11-25 11:17:09 发布

ace_TiAmo

最新推荐文章于 2022-11-25 11:17:09 发布

阅读量211

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/ace15824843202/article/details/84283623

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

Vue (读音 /vjuː/，类似于 view)

是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

<h2>什么是MVVM</h2>

<p>MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，
    也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模
    型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。
    在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，
    Model 和 ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model中，
    而Model 数据的变化也会立即反应到View 上。
    ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model
    之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，
    不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由
    MVVM 来统一管理。
</p>

<h2>mvvm和mvc区别</h2>

<p>都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。
mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，
影响用户体验。vue数据驱动，通过数据来显示视图层而不是节点操作。</p>

<h2>vue的优点是什么</h2>

<ol>
    <li>低耦合</li>
    <li>可重用性</li>
    <li>独立开发</li>
</ol>
<p>也称块间联系。指软件系统结构中各模块间相互联系紧密程度的一种度量。
    模块之间联系越紧密，其耦合性就越强，模块的独立性则越差。
    就是写一个组件在任何复杂的项目任何复杂的场景下都可以即拿即用这就是低耦合视图
    （View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，
    当View变化的时候Model可以不变，当Model变化的时候View也可以不变</p>
<p>你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑</p>
<p>开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计</p>

<p>渐进式框架没有什么限制，可以在此框架上引用其他框架，不像angular1一样
    想使用框架就得使用它的一套流程限制</p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">   <!--需要给上根元素-->
    <h1>这是我的第一vue页面</h1>
    <p>{{message}}</p>  <!--<%=%>   ${}-->
    <p>{{name}}</p>  <!--把数据从对应的根元素下渲染到DOM当中-->
    <p>{{age}}</p>
    <p>{{getRe}}</p>
</div>
</body>
</html>
<script>
    new Vue({
        el:'#app',       //el  ==>  getElementById
        data:{   //存放数据的仓库,相当于声明的变量   var message = 'hello';
            message:'hello',
            name:'bill',
            age:15
        },
        methods:{ 
            //存放方法的仓库 
        },
       computed:{ 
      //计算属性，最终拿到的是一个计算结果 getRe(){ return this.message.split('').reverse().join(''); 
       }
    })
</script>

ace_TiAmo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
认识Vue

Vue (读音 /vjuː/，类似于 view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。&lt;h2&gt;什么是MVVM&lt;/h2&gt;&...
复制链接

扫一扫