前端学习--Vue.js Day1-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_38009285/article/details/86610511

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

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