vue基础文档

 

发端于2013年的个人项目，已然成为全世界三大前端框架之一，在中国大陆更是前端首选。

它的设计思想、编码技巧也被众多的框架借鉴、模仿。

学习研究Vue的演进，对于前端同学来说，是提高自身认识和水平的法门。

纪略

Ø 2013年，在Google工作的尤雨溪，受到Angular的启发，从中提取自己所喜欢的部分，开发出了一款轻量框架，最初命名为Seed。

Ø 同年12月，这粒种子发芽了，更名为Vue，版本号是0.6.0。

Ø 2014.01.24，Vue正式对外发布，版本号是0.8.0。

Ø 发布于2014.02.25的0.9.0，有了自己的代号：Animatrix，这个名字来自动画版的《骇客帝国》，此后，重要的版本都会有自己的代号。

Ø 0.12.0发布于2015.06.13，代号Dragon Ball（龙珠），这一年，Vue迎来了大爆发，Laravel 社区（一款流行的 PHP 框架的社区）首次使用 Vue（我也是在这个论坛上认识Vue的），Vue在JS社区也打响了知名度。

Ø 1.0.0 Evangelion（新世纪福音战士）是Vue历史上的第一个里程碑。同年，vue-router（2015-08-18）、vuex（2015-11-28）、vue-cli（2015-12-27）相继发布，标志着 Vue从一个视图层库发展为一个渐进式框架。很多前端同学也是从这个版本开始成为Vue的用户。

Ø 2.0.0 Ghost in the Shell（攻壳机动队）是第二个重要的里程碑，它吸收了React的Virtual Dom方案，还支持服务端渲染。

Ø 就在不久前，Vue发布了2.6.0 Macross（超时空要塞），这是一个承前启后的版本，因为在它之后，3.0.0也呼之欲出了。

1.0

Vue最初的目标是成为大型项目的一个良好补充。设计思想是一种“渐进式框架”，淡化框架本身的主张，降低框架作为工具的复杂度，从而降低对使用者的要求。

代码在views里面写代码

Node_modules 第三方包

Src 放置静态资源

Components 放置组件

Mein.js入口js组件

template + script + style   Html +js+css样式

小结

·.vue 是单文件组件一个页面由多个组件构成的有三个内容

1template (必要的) 结构2 script: 交互3style: 样式

  关闭vsxode检查代码

Vue基础 {{}}是插值表达式输出{{}}中的值的语法

{{}}可以:

写data数据字段名称

对data数据字段进行表达式运算

拼接

算术运算

三元运算

{}}不能:

·js语句: 声明变量，分支，循环。访问在vue实例中的data之外定义的自定义的变量

 Vue 基础指令

V-on  专门绑定事件的指令

V-model  能轻松实现表单输入和应用状态之间的双向绑定      

v-for  便利

v-text  识别文本

v-html 识别标签

V-if  v-else 循环

V-showv-if,v-else-if, v-elsev-bind

V-once  只能渲染一次

V-per 不编译花括号

MWM: Model-View-ViewModel的简写。即模型-视图-视图模型。模型 (Model) 指的是后端传递的数据。视图(View)指的是所看到的页面。视图模型(ViewModel是 mwm_模式的核心，它是连接 view 和 model 的桥梁。它有两个方向:一是将模型 (Model) 转化成视图(View)，即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。二是将视图(View)转化成模型(Model)，即将所看到的页面转化成后端的数据。实现的方式是: DOM 事件监听。这两个方向都实现的，称之为数据的双向绑定。“MVC和MVVM的区别并不是VM 完全取代了C只是在MVC的基础上增加了一层VM，只不过是弱化了C的概念，ViewModel存在目的在于抽离 Controller 中展示的业务逻辑而不是替代Controller，其它视图操作业务等还是应该放在 Controller 中实现。也就是说MVVM实现的是业务逻辑组件的重用，使开发更高效，结构更清晰，增加代码的复用性。“ontroller(应用逻辑控制层): 将用户 View 的操作反馈给 Model，通知其进行数据更新，业务逻辑的中心。“

View 更新的时候，必须要通过 Controller 去更新一遍 Model; 同样的 Model 更新的时候也要去更新一遍视图。此时开发者是在同时维护 View 层和 Model 层。当页面复杂的时候开发者不得不做许多繁琐的工作来保证数据的状态、页面的展示都是正确的。“MWM 是解决了这个问题 View 更新的时候通过 ViewModel 影响 Model，Model 更新的时候通过ViewModel影响 View，都是通过ViewModel作为处理中心。

This八种笔记

1. obj.fun() this->obj

2. fun() 或 (function(){ … })() 或 多数回调函数 或 定时器函数 this->window

3.new Fun() this->new正在创建的新对象

4.类型名.prototype.共有方法=function(){ … } this->将来谁调用指谁，同第一种情况

5. DOM或jq中事件处理函数中的this->当前正在触发事件的DOM元素对象如果需要使用简化版函数，必须$(this)

6. 箭头函数中的this->箭头函数外部作用域中的this

7. jQuery.fn.自定义函数=function(){ … } this->将来调用这个自定义函数的.前的jQuery子对象，不用再$(this)

8. new Vue()中methods中的函数中的this->当前new Vue()对象