步入vue.js世界

一、遇见vue.js

1.1 Vue.js是什么？

　　Vue.js 是一套用于构建用户界面的渐进式框架，Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。Vue.js通过简单的API提供高效的数据绑定和灵活的组件系统。

1.2 MVC 和 MVVM

　　MVC是应用最广泛的软件架构之一，一般MVC分为：Model（模型）、Controller（控制器）和View（视图）。View一般都是通过Controller来和Model进行联系的。Controller是Model和View的协调者，View和Model不直接联系。

　　相比MVC，MVVM只是把MVC的Controller改成了ViewModel。View的变化会自动更新到ViewModel，ViewModel的变化也会自动同步到View上显示。

  

1.3Vue和Angular区别?

　　Vue——简单、易学

　　指令以 v-xxx

　　一片html代码配合上json，在new出来vue实例

　　个人维护项目

 

　　适合: 移动端项目,小巧

 

　　Angular——上手难

　　指令以 ng-xxx

　　所有属性和方法都挂到$scope身上

　　angular由google维护

 

　　合适: pc端项目

 

　　共同点: 都支持指令、过滤器和双向绑定，不兼容低版本IE

 

二、指令

2.1 v-if

　　v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为false，那么对应的元素就会从DOM中移除；否则，对应元素的一个克隆将被重新插入DOM中。

 

2.2 v-show

　　v-show指令是根据表达式的值来显示或者隐藏HTML元素。当v-show赋值为false时，元素将被隐藏。查看DOM时，会发现元素上多了  一个内联样式style=“display：none”。

 

　　注：v-if如果初始渲染时条件为假，则什么也不做，在条件第一次变为真时才开始局部编译（编译会被缓存起来）。相比之下，v-show元素始终被编译并保留，只是简单地基于CSS切换。一般来说，v-if有更高的切换消耗，而v-show有更高的初始渲染消耗。因此，如果需要频繁地切换，则使用v-show较好；如果在运行时条件不大可能改变，则使用v-if较好。

 

2.3 v-else

　　v-else就是javascript中else的意思，它必须跟着v-if，充当else功能。

 

　　注：v-show和v-else一起使用时会出现指令优先级问题，我们可以用另一个v-show替换v-else。

 

2.4 v-model

　　v-model指令用来在input、select、text、checkbox、radio等表单控件元素上创建双向数据绑定。根据控件类型v-model自动选取正确的方法更新元素。

 

2.5 v-for

　　我们可以使用v-for指令基于源数据重复渲染元素，我们也可以使用index来呈现相对应数组索引，key获取键名,keys是唯一值。

 

　　注：1.如果使用v-for迭代数字的话，值是从1开始而不是0，如：<p v-for="i in 10">这是第{{i}}个标签</p>——》 第一个 i=1

　　　　2.在组件中，使用v-for循环的时候，或者在一些特殊情况中，必须指定唯一的 字符串/数字 类型 :key=""

 

2.6 v-bind

　　 v-bind指令用于给html标签设置属性，在绑定class或style时，支持其他类型的值，如数组或对象。可以简写为 :

　　注：v-bind中，可以写合法的js表达式

 

2.7 v-on

v-on指令用于绑定事件监听器。可以简写为 @

v-on后面不仅可以跟参数，还可以增加修饰符：

.stop——调用event.stopPropagation()。

.prevent——调用event.preventDefault()。

.capture——添加事件侦听器时使用capture模式。

.self——实现只有点击当前元素时候，才会触发事件处理函数。

.keydown\keyup——只在只定按键上触发回调。Vue.js提供的键值有：[esc:27、tab:9、enter：13、space：32、delete：[8,46]、up:28、left：37、right：39、down：40]。

<！--停止冒泡-->

<button @click.stop="doThis"></botton>

<！--阻止默认行为-->

<button @click.prevent="doThis"></botton>

<！--阻止默认行为，没有表达式-->

<button @click.prevent></botton>

<！--串联修饰符-->

<button @click.stop.prevent="doThis"></botton>

<！--键修饰符，键别名-->

<button @keyup.enter="onEnter"></botton>

<！--键修饰符，键代码-->

<button @keyup.13="onEnter"></botton>

 

2.8 v-cloak

　　这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。但有时添加完毕后仍有部分变量会显示，是因为 v-cloak 的display属性被优先级别高的样式覆盖所导致，在Css中添加!important。

 

2.9 v-text

　　v-text指令可以更新元素的textContent。在内部,{{Mustache}}插值也被编译为textNode的一个v-text指令。

 

2.10 v-html

　　v-html指令可以更新元素的innerHTML。内容按普通HTML插入——数据绑定被忽略。不建议在网站上直接动态渲染任意HTML片段，很容易导致XSS攻击。

 

　　注：1.默认v-text，v-html是没有闪烁问题

　　　　2.v-text，v-html会覆盖元素中原本的内容，但是差值表达式( {{msg}} )只会替换自己的这个占位符，不会把整个元素的内容清空。