框架-- - --Vue基础认知 和 一个迷之图片的切换效果 -》--》

先介绍下 Vue 哈

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

vue框架的核心：

数据驱动页面、组件化开发

(2)特性

1）指令系统

2）虚拟DOM

3）路由

4）devtools

5）生态系统繁荣

(3)缺点

1）兼容性不好（不支持ie8及以下的浏览器）

2）Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

3）错误提示不友好

(4)安装

①外部链接引入

生产版本

​ 体积小，没有错误提示

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

开发版本

​ 有错误提示

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

②npm安装

npm install vue

我用的是外链
以下是一个简单的 图片切换

   <script src="./node_modules/_vue@2.6.11@vue/dist/vue.js"></script>

这个开局一定要引入的，我比较喜欢这个，简单粗暴，先引这个（类似 jquer ）
在这之前先 终端命令以下：npm install vue
然后就是 图片的css样式：`

 <style>
        #app{
            width: 800px;
        }
        img{
            width: 40%;
        }
    </style>

以下正主来了 ↓：

<div id="app">
        <img v-bind:src="arr[index]" alt="没有找到图片">
        <button @click='next'>下一张</button>
        <button @click='prev'>上一张</button>
</div>

@ 就 代表 v-on

 let app=new Vue({
            el:'#app',//标签 id为app的标签
            data:{
                arr:['./img/1.jpg','./img/2.jpg','./img/3.jpg','./img/4.jpg'],
      index:0,
           imgsrc:'./img/1.jpg'//第一张默认
       },
       methods:{
           
           next(){      //下一张
               this.index++; //下标自增一
               if(this.index>(this.arr.length-1)){
                   this.index=0;
               }
           },
           prev(){     //上一张
               this.index--;//下标自减一
               if(this.index<0){//判断 为第一张时(下标索引)返回最后一张，形成循环
                   this.index=this.arr.length-1;
               }
           }
       }
   })

点击上（下）切换图片，这个是以索引计算的，而且用的是数组，固定的img。。