Vue基本指令

vue是一個漸進式架構，讓前端開發人員從dom操作解放出來，變為操縱資料即可，然後dom的操作Vue内部幫我們實作了，用了Vue之後不建議再去人為的操作dom。那下面說說Vue的一些基本指令

　　首先學習第一個 v-text指令：這個是用來渲染文本的，可以簡寫：{{ message}} 切記!!!{{message}}要寫在id為app的div中

<div id="app">
        {{message}}
    </div>
    //這裡我導入的是本得Vue
 <script src="../lib/vue.js"></script>
    //這裡的Vue是網絡的
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!開始學習Vue',
            }
        })
    </script>

　　v-html指令，跟上面的是一樣的，都是渲染文本的。差別是：這個可以解析html，！！！這個沒有簡寫！！！

<div id="app">
        <div v-html="message"></div>
    </div>

    <script src="./lib/vue.js"></script>
    <script>
        let app= new Vue({
            el:'#app',
            data:{
                message:"<h1>我是H1</h1>"
            }
        })
    </script>

　　v-on 事件綁定 v-on:click="xxx" 簡寫: @click="xx" 來來來！廢話不多說，上代碼！ @click="可以調用方法"

<div id="app">
        <h4>{{message}}</h4>
        <input type="button" value="點我！" v-on:click="message='lahu'">
        <input type="button" value="點我！" v-on:click="info">
        <!-- @click="可以用方法" -->
        <input type="button" value="點我！" @click="info1"> 
    </div>

    <script src="../lib/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: "出日頭啦",
            },
            // 方法
            methods: {
                info(){
                    this.message="好好好"
                },
                info1(){
                    this.message="簡寫"
                }
            },
        })
    </script>

　　v-bind指令屬性綁定例如 v-bind：stely="red" 綁定這個style的顔色，還有 v-bind：src="xxx" src也可以，簡單明白上代碼

<div id="app">
        <!-- 這個是固定死的顔色值 -->
        <h4 style="color:pink">再見</h4>
        <!-- 這個根據seTColor變化 -->
        <h4 :style="'color:'+setColor">再見</h4>
        <!-- 這個綁定屬性且還綁定事件來改變setColor顔色 -->
        <h4 :style="'color:'+setColor" @click='gaiBian'>再見</h4>
    </div>
    <script src="../lib/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                setColor:'red'
            },
            methods: {
                gaiBian(){
                    this.setColor='green'
                }
            },
        })
    </script>

　　說了辣麼多，來個小demo來試試水。這個就是用綁定來實作的一個圖檔切換，類似小輪播圖。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width= , initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>圖檔切換</title>
    <style>
      .title {
        background-color: skyblue;
        color: white;
      }

      img {
        width: 200px;
        height: 200px;
        box-shadow: 0 0 20px hotpink;
      }
    </style>
  </head>
  <body>
    <!-- 模闆 -->
    <div id="app">
      <h2 class="title">圖檔切換</h2>
      <img :src="imgList[index]" alt="" />
      <br />
      <input type="button" value="上一張" @click="pre" /> //這裡的pre是一個方法
      <input type="button" value="下一張" @click="next" /> //next也是方法
    </div>
  </body>
</html>
<!-- 開發環境版本，包含了有幫助的指令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 編碼 -->
<script>
  /*
    1.點選上一張 下一張 切換圖檔 切換下标
    2.使用數組儲存多張圖檔，增加一個下标 用來選擇指定的圖檔
  */

  var app = new Vue({
    el: '#app',
    data: {
      // 圖檔數組
      imgList: ['./img/1.png', './img/2.png', './img/3.png', './img/4.png'],
      // 索引
      index: 0
    },
    methods: {//這裡定義了兩個方法
      pre() {
        this.index--
        if (this.index < 0) {
          this.index = this.imgList.length - 1
        }
      },
      next() {
        this.index++
        if (this.index > this.imgList.length - 1) {
          this.index = 0
        }
      }
    }
  })
</script>

　　好了，今天就這樣把。寫的不好望大佬指出錯誤，感謝