前端学习--Vue.js Day1

1、验证码是由后端去实现的

2、什么是Vue.js
目前三大热门前端框架：Vue.js、React.js、Angular.js

前端框架的好处：减少不必要的操作、双向数据绑定的概念

3、框架和库（可称为插件）的区别：
框架是一整套解决方法；库可以看作是一个插件，提供功能

4、MVC和MVVM的关系图解
MVC框架：（注意图中的App.js是后端的内容）

MVVM框架（是前端视图层的分层开发思想，主要是把每个页面，分成了M、V和VM，其中，VM是MVVM思想的核心；因为VM层是M和V之间的调度者）：

5、Vue基本代码和MVVM之间的对应关系
V：标签内，可以在页面显示的内容
VM：new Vue({xxxxx})定义的内容
M：存储每个页面的数据

new Vue({xxx})会返回一个实例对象

6、讲解V-cloak(遮盖)（需要自己去设置样式）、v-text(会覆盖内容)、v-html的基本使用



v-html:会把 ‘(html标签)正常显示，而非是按一个字符串输出

7、v-bind（绑定）指令的学习
代码中的mytitle是变量

8、使用v-on指令定义Vue中的事件
DOM操作：document.getelementById(“xx”).onclick = function(){xxx}
Vue:v-on:click = “xxx”
方法写methods中（methods是一个对象）
鼠标覆盖：v-on:mouseover=“xxx”

9、跑马灯效果制作

10、事件修饰符
（1）@.click.shop ：阻止事件冒泡（从内到外）
（2）@.click.prevent ：阻止默认行为
（3）@.click.capture ：进行捕获机制（从外到内）
（4）@.click.self ： 当点击自身按钮才会触发，自身不会因冒泡或者捕获而被动触发
（5）@.click.once ：事件只触发一次
（6）@.click.prevent.once：点击第一次时会阻止默认行为，之后的点击则不会阻止；.prevent和.once无顺序的差别

11、v-model（唯一的）实现表单元素的数据双向绑定

v-model实现计算器的案例

12、vue通过属性绑定为元素设置class样式（4钟方法）
:class="[]/{}/直接写属性名"

但是对象内的属性但“-”则需要用‘’（引号）引起来

13、vue中通过属性绑定为元素绑定style行内样式（3种方式）
：style=”{xxx}“；当需要使用多个对象时，则需要使用数组[ ]

14、v-for指令的四种方式
//item；代表list数组的一项，利用v-for去循环每一项

循环普通数组：


遍历对象：

count：不需要在data中去定义

（2）v-for中key的使用注意事项
key：能保证数据的唯一性（例如：如果没有定义key属性，当勾选中id=5的input之后，在input之前插入一条数据，选中的内容会勾选中id=4的input（即当前索引为5的内容））

15、v-if、v-show的使用和特点

16、day1内容总结：
（1）不要给body添加id