初识vue

最新推荐文章于 2023-03-14 11:09:34 发布

吴渣渣

最新推荐文章于 2023-03-14 11:09:34 发布

阅读量482

点赞数

文章标签：前端框架

本文链接：https://blog.csdn.net/u014727260/article/details/79873961

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Vue是什么

Vue.js是一个渐进式的前端框架，所谓渐进式就是你可以有阶段性地使用Vue，而不必一开始就使用它的所有东西。同时，Vue也改变了传统的前端开发模式，提供了一下常见的高级功能，比如：

解耦视图和数据
可复用的组件
前端路由
状态管理
虚拟DOM（Virtual DOM）

MVVM模式

与知名前端框架Angular、Ember等一样，Vue.js在设计上也使用了MVVM（Model-View-ViewModel）模式。

MVVM模式是由经典的软件架构MVC衍生而来的。当View（视图层）变化时，会自动更新到ViewModel（视图模型），反之亦然，View和ViewModel之间通过双向数据绑定（data-binding）建立联系，如下所示：

这里写图片描述

Vue.js与Jquery有什么不同

如下代码用jquery操作dom、绑定一个点击事件

var btn = $('&lt;button&gt;Click me&lt;/button&gt;');
btn.on('click',function(){
   console.log('Clicked!');
})
$('#app').append(btn);

可以看出，虽然操作的内容不复杂，但是此时我们的视图代码已经和业务逻辑代码紧耦合在一起了，随着功能的不断增加，直接通过操作dom的方式会使代码越来越难维护。

而Vue.js通过MVVM模式拆分为视图和数据两部分，并将其分离，因此你只需要关心数据即可，dom的操作Vue会帮你搞定，用Vue.js改写上述代码：

<body>
    <div id="app">
        <button v-if="showBtn" v-on:click="handleClick">Click me</button>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                showBtn:true
            },
            methods:{
                handleClick:function(){
                    console.log('Clicked!');
                }
            }
        });
    </script>
</body>

如何使用Vue.js

对比传统前端开发模式和Vue.js的开发模式

传统的前端开发模式

前端技术快速发展，比如EMCAScript6、Node.js、NPM、前端工程化等不断在优化我们的开发模式，常用的用于生产的万金油的技术栈：
Jquery+RequestJs（SeaJs）+artTemplate(doT)+Gulp(Grunt)

RequireJs（SeaJs）:模块化代码，解决代码依赖混乱的问题，便于团队协作
doT:前端模板，可以将数据与html模板分离
gulp：自动化构建工具，可以合并压缩代码

传统的开发模式简单高效，但是随着项目扩大和时间推移，出现了更为复杂的业务场景，如SPA（单页面富应用）、组件解耦。为了提高开发效率，降低维护成本，这时候就出现了Angular、React以及Vue.js。

Vue.js的开发模式

如果只是开发简单的html5页面或者小应用，可以直接通过script加载csn文件，如

<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.min.js"></script>

接着，在body结束标签前使new Vue()来创建一个实例，这就是Vue.js最基本的开发模式。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <script type="text/javascript" src="../../assets/js/vue.js"></script>
</head>
<body>
<div id="app">
   <ul>
       <li v-for="item in sortItems">
           {{item}}
       </li>
   </ul>
</div>

<script type="text/javascript">
   var app=new Vue({
       el:'#app',
       data:{
           items:[20,23,18,65,32,19,5,56,41]
       },
       computed:{
           sortItems:function(){
               return this.items.sort(sortNumber);
           }
       }
   });

   function sortNumber(a,b){
       return a-b
   }
</script>
</body>
</html>

对于业务逻辑复杂，对前端工程有要求的项目，可以使用Vue单文件的形式配合webpack使用，必要时候还会使用vuex来管理状态，vue-router来管理路由。

参考文章

《vue.js实战》

吴渣渣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
初识vue

Vue是什么Vue.js是一个渐进式的前端框架，所谓渐进式就是你可以有阶段性地使用Vue，而不必一开始就使用它的所有东西。同时，Vue也改变了传统的前端开发模式，提供了一下常见的高级功能，比如：解耦视图和数据可复用的组件前端路由状态管理虚拟DOM（Virtual DOM）MVVM模式与知名前端框架Angular、Ember等一样，Vue.js在设计上也使用了MVVM（Model-View
复制链接

扫一扫