标签：用户体验 native web app 不能 布局 之间 ... 响应 行数据
一 概述
mv*系列框架
目前最流行框架：vue react angular
vue：尤雨溪 个人团队维护 weex
react：Facebook维护的一套库 React Native
angular：Google维护的一套库 ionic
1.x版本：核心是用js开发的
2.x版本：核心是用ts开发的 ----------TypeScript（js强性语言）
APP：web app hybrid app native app
移动端布局：盒子模型、弹性盒子
移动端的数据交互：尽量少操作DOM
hybrid app(混合开发)：cordova(apache)...,目的是为了解决原生App的不能跨平台的问题
中文文档:http://cordova.axuer.com/
native app(原生开发)：ios开的 android开发
React Native：通过js去调用原生app技术的api来做开发。学习一次多处使用，并不意味着一次开发多平台运行
为什么会出现mv*的框架?
为了解决当下市场对应用程序开发的需求，传统的网站不能满足当下市场的用户体验需求
二 属性
Vue2.x是目前前段领域所有mv*框架里性能最好的框架
Vue.js vue的主框架
中文网站：https://cn.vuejs.org/
所有mv*系列的框架都尽量不操作DOM
写法：
<div id="app">{{msg}}</div>
<script>
new Vue({
el :‘ #app ‘ ,
data :{
msg :‘ hello Vue!!! ‘ ;
}
})
</script>
//输出-------->hello Vue!!!
el：将当前vue的实例挂载到id为app的元素上面，效果就是我这个div里面的所有东西都归当前这个实例管理
data：vue对象数据源 （双向绑定）
methods:vue对象的方法
computed：计算属性
三 指令
扩展了HTML的语法，在Vue中将前缀为v-这种属性称之为指令，其作用就是为DOM元素调用方法、定义行为绑定数据等
不管是指令也好还是模板语法，里面都是放置表达式
v-show="boolean"：让当前所绑定元素显示或者隐藏
v-text="数据值": v-text="‘么么哒‘"
v-html="数据值": v-html="‘么么哒‘"
{{数据值}} ：{{‘么么哒‘}}
v-loak:避免在客户端显示编程符号
如果在一个大的容器里面展示非常多的数据的话就用模板语法，同时加上v-cloak
如果在单个的元素里面展示数据的话，可以采用v-text
v-on:事件名:用来绑定事件的 简写：@事件名 ------ 推荐
v-bind:属性名:用来绑定html属性
v-model:适用于表单元素
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
MVC
1.mvc是一种应用程序的开发思想，不是设计模式
2.主要目的是为了解决应用程序展示结构，业务逻辑之间的紧耦合关系
3.使应用程序的组成分为三部件，每个部件有自己明确的职责，相互之间没有依赖
M：model（模型） 数据模型负责管理应用程序的数据
V：view （视图） 向用户展示数据，以一种特定的格式呈现数据，由控制器决定呈现数据触发
C：controller （控制器）用来处理用户交互的部分，控制器负责响应于用户输入并执行数据交互模型
vm：ViewModel 通过双向数据绑定把View层和Model层链接起来，而View和Model之间的同步工作完全自动的，无需人为干涩，因此开发者只需关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由MVVM来统一管理。
双向数据绑定：
M<==>V 可以自动将Model和View间的数据同步，数据模型（Model）和视图（View）之间的双向绑定
缺点：应用场景少
单项数据绑定：
M==>V 比如后台的数据量动态的创建DOM节点
缺点：HTML代码一旦生成后，就没有办法在改变了，如果有新的数据来了，那就必须得把之前的HTML代码去掉，重新生成一次。
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Vue总结：
1.Vue最大程度上减少了页面上的DOM操作；
2.让JS中专注业务逻辑的代码；
3.通过简单的指令结合页面结构与逻辑数据；
4.通过自定义指令实现组件化编程；
5.代码结构更合理；
6.Vue解放了传统JS中频繁的DOM操作；
------------------------（不喜勿喷）
标签：用户体验 native web app 不能 布局 之间 ... 响应 行数据
原文地址：http://www.cnblogs.com/love-8023/p/7742229.html
