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:会把<h 1> </h 1>‘(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、跑马灯效果制作

<template><div><!--跑马灯效果利用substring来进行字符串截取，把第一个字符串截取并放到最后一个位置；点击按钮，利用定时器进行自动截取，0.5s一次--><button @click="show">开始</button><button @click="shop">停止</button><h4>{{text}}</h4></div>
</template><script>export default {//注意在这个{}内使用data数据需要用this去指向，//说明data数据是这个{}内部的name: 'day_one',data(){return{text:'多语种即时在线翻译_百度翻译',intervalId:null //在data上定义定时器ID}},methods:{show(){if (this.intervalId !== null){return 0;}//=>:解决this指向问题；使内外部的this指向一致this.intervalId = setInterval(()=>{//start:截取第一个字符串var start = this.text.substring(0,1);//start:截取剩下字符串var end = this.text.substring(1);//将两份字符串连接起来this.text = end + start;},500)},shop(){clearInterval(this.intervalId);//清除定时器之后，返回this.intervarId == 6//所以为了下一次定时器开启，将intervalId手动设置为nullthis.intervalId = null;}}}
</script>

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实现计算器的案例

<template><!--v-model实现计算器的案例--><div><input type="text" v-model="n1"><select v-model="opt"><option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option></select><input type="text" v-model="n2"><button @click="calc">=</button><input type="text" v-model="result"></div>
</template><script>export default {data(){return{n1:0,n2:0,result:0,opt:'+'}},methods:{//方法1:calc() {//   switch (this.opt) {//     case '+' ://       this.result = parseInt(this.n1) + parseInt(this.n2);//       break;//     case '-' ://       this.result = parseInt(this.n1) - parseInt(this.n2);//       break;//     case '*' ://       this.result = parseInt(this.n1) * parseInt(this.n2);//       break;//     case '/' ://       this.result = parseInt(this.n1) / parseInt(this.n2);//       break;//   }//方法2（项目开发时不建议）:
eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。var codeStr = parseInt(this.n1) + this.opt + parseInt(this.n2);this.result = eval(codeStr)}}}
</script>

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