入门VUE-初识Vue.js-快速vue入门简明教程-学习vue第一站深入浅出(一)

vue入门
跟随我,一步步学习Vue.js,创建出自己满意的App吧!

现在开启你的Vue之旅!


定义Vue

Vue是最流行的前端框架,能胜任几乎所有的应用开发,如:App混合开发、微信小程序开发、大型Web项目开发等;

架构模型

MVVM是:Model-View-ViewModel的缩写简称,由MVC架构优化而来。当视图层View触发控件事件后,会有相应的ViewModel响应控件的绑定事件,且此过程可逆,如图所示,称:双向数据绑定” 

Vue核心架构思想
Vue核心架构思想
<span>{{text}}</span>
<script>
    var data = {
        text:"郝小胖的独门秘笈"
    }
</script>

示例代码中,view视图中span标签由H5的DOM结构组成,2个花括号"{{text}}"是数据监控表达式viewModel,data 对象就是数据源Model,这样写优势在于:不必用Javascript语句去操作Dom结构,这部分工作交给了Vue去完成,大型项目时,省去了繁琐的Dom操作,让代码更容易维护!

Vue核心优势之一:提高用户体验感

是什么原因,用户总是觉得体验感Low到爆?下面给大家看下真实的用户反馈:

H5+Javascript页面跳转会员进度条与白屏现象

Vue的解决方案是:SPA 单页面应用程序

整个WebApp就只有一个页面容器,当我们的这一个单页被加载完成后,就不会在进行关于页面的GET/POST网络请求。Vue 配合生态圈中的 Vue-Router 就可以非常方便的开发复杂的单页应用,让H5的WebApp拥有媲美原生App丝滑流畅体验!

Vue核心优势之二:超级轻量化加载

我们都知道随着引入JS文件的增多,加载越来越多的JS是非常耗时影响用户体验的行为!

Vue核心库生产环境版本的Js文件只有30KB!几乎不会对页面产生延迟影响!

Vue核心优势之三:视图组件化搭建

Vue 可以通过多个组件来组合成一个完整的页面,每个组件都是一个可复用的 Vue 实例,组件里面可以包含自己的数据,视图控件、CSS样式和代码逻辑。


至此,您已对Vue有了个大体的了解,如果您想进一步学习,请关注我的博客!您还可以:

第二节:一切从Hello World说起!手把手教你Vue开发环境搭建!- 学习vue第一站深入浅出(二)

发布了28 篇原创文章 · 获赞 12 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_43687095/article/details/93975396