写给自己看的vue

学习过程:自学(个人demo驱动),论坛,qq群多少听到vue,react(很抱歉只弄了hello world demo 虚拟dom 也是概念 到目前也没弄清楚)这类框架(工作经历前后端都折腾,老板指到拿 打到哪)。

vue

基础:接触过angularjs1.0 实际经验,使用了绑定,指令,和http请求。一个字学习难度大 ,复杂 (提到他原因是:第一次接触的js的 mvc框架,幸运的是之前折腾过wpf的 mvvm 所以看起来比较亲切)。

一个mvvm框架(库),类似于angular,拥有比较容易上手的AIP。它是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

资料:官网 https://cn.vuejs.org/v2/guide/installation.html 目前看了3遍(多看官网api 是学习新的一门技术基础,仅供参考)。 http://www.cnblogs.com/keepfool/p/5619070.html (推荐)

下面我们来了解一下MVC、MVP及MVVM模式框架

书籍:图片 1

1.MVC
 Model(模型)+View(视图)+controller(控制器),主要是基于分层的目     的,让彼此的职责分开。
 View通过Controller来和Model联系,Controller是View和Model的协调者,View和Model不直接联系,基本联系都是单向的。
 用户User通过控制器Controller来操作模板Model从而达到视图View的变化。

章节:

2.MVP:
从MVC模式演变而来的,都是通过Controller/Presenter负责逻辑的处理+Model提供数据+View负责显示。
在MVP中,Presenter完全把View和Model进行了分离,主要的程序逻辑在Presenter里实现。
并且,Presenter和View是没有直接关联的,是通过定义好的接口进行交互,从而使得在变更View的时候可以保持Presenter不变。
MVP模式的框架:Riot,js。

1:介绍 

3.MVVM
MVVM是把MVC里的Controller和MVP里的Presenter改成了    ViewModel。Model+View+ViewModel。
View的变化会自动更新到ViewModel,ViewModel的变化也会自动同步到View上显示。
这种自动同步是因为ViewModel中的属性实现了Observer,当属性变更时都能触发对应的操作。
MVVM模式的框架有:AngularJS+Vue.js和Knockout+Ember.js后两种知名度较低以及是早起的框架模式。

其实Vue.js自身不是一个全能的框架,因为它只聚焦视图层,是一个构建数据驱动的Web界面的库。
Vue.js通过简单的API(应用程序编程接口)提供高效的数据绑定和灵活的组件系统。

响应式编程即:状态和视图同步(一句话mv**,同门师兄弟有angularjs。react ,早期的backbone ) 

Vue.js的特性如下:
  • 轻量级的框架
  • 双向数据绑定
  • 指令
  • 插件化

2:基本语法

Vue.js与其他框架的区别?

<!-- 引入js文件 -->
<script src="https://unpkg.com/vue"></script>

<!-- 视图
    1:{{}} vue 数据绑定 界面第一次加载网络慢会出现 {{}}
    解决办法: css添加 [v-cloak] { display: none;} 使用者添加v-cloak属性 或者v-text
    2:v-model 一般用于表单( input、textarea> 、 select等 )
-->
<div id="app-6">
  <p>{{ msg }}</p>
  <input v-model="msg">
</div>

//vue 对象都是从new开始(这一点为什么不学jquery 少写一个new呢)ps:它是连接视图(view)和data的桥梁 (就叫他控制器吧)。
//el:挂载元素(常用id class 等选择器) 告诉浏览器大哥这一段html的元素 用vue法语解析(类似编辑器)。我的地盘要听我的(它的内部是如何解析呢 他怎么知道是vue呢这也是它的神奇吧)
//data :数据区 (ps:msg 文本框自定改变)
var app6 = new Vue({
  el: '#app-6',
  data: {
    msg: 'Hello  '
  }
})

1.与angularjs的区别

图片 2

相同点:

都支持指令:内置指令和自定义指令。
都支持过滤器:内置过滤器和自定义过滤器。
都支持双向数据绑定。
都不支持低端浏览器。

总结:

不同点:

1.AngularJS的学习成本高,比如增加了Dependency Injection特性,而Vue.js本身提供的API都比较简单、直观。
2.在性能上,AngularJS依赖对数据做脏检查,所以Watcher越多越慢。
Vue.js使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。
对于庞大的应用来说,这个优化差异还是比较明显的。

  • Vue构造函数的:选项el属性,就是element缩写,当前Vue对象挂载到哪个标签上的语法

  • Vue的选项:data属性数据。vue会把自定义的数据可以与html的模板数据进行绑定。

  • Vue 数据绑定的方式就是用{{}}

  • 页面加载出现{{}}的解决办法。

  • vue的思想简单介绍。

2.与React的区别

 

相同点:

react采用特殊的JSX语法,Vue.js在组件开发中也推崇编写.vue特殊文件格式,对文件内容都有一些约定,两者都需要编译后使用。
中心思想相同:一切都是组件,组件实例之间可以嵌套。
都提供合理的钩子函数,可以让开发者定制化地去处理需求。
都不内置列数AJAX,Route等功能到核心包,而是以插件的方式加载。
在组件开发中都支持mixins的特性。

本文由金沙官网线上发布于Web前端,转载请注明出处:写给自己看的vue

您可能还会对下面的文章感兴趣: