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

2、什么是Vue.js

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

前端框架的好处：减少不必要的操作、双向数据绑定的概念。前端直接在对应的位置渲染数据即可，无需像js一样先找到对应的节点，再把数据赋值给节点

3、框架和库（可称为插件）的区别：

框架是一整套解决方法；库可以看作是一个插件，提供功能

4、MVC和MVVM的关系图解

MVC框架：（注意图中的App.js是后端的内容）

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

5、Vue基本代码和MVVM之间的对应关系

V：< template >标签内，可以在页面显示的内容

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手动设置为null
        this.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>