Vue基本指令

vue是一个渐进式框架，让前端开发人员从dom操作解放出来，变为操纵数据即可，然后dom的操作Vue内部帮我们实现了，用了Vue之后不建议再去人为的操作dom。那下面说说Vue的一些基本指令

　　首先学习第一个 v-text指令：这个是用来渲染文本的，可以简写：{{ message}} 切记!!!{{message}}要写在id为app的div中

 <div id="app">
        {{message}}
    </div>
    //这里我导入的是本地Vue.js
 <script src="../lib/vue.js"></script>
    //这里的Vue是网络的Vue.js
  <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>

　　好了，今天就这样把。写的不好望大佬指出错误，感谢！！再补一个Vue官网地址，https://cn.vuejs.org/v2/guide/

见习搬运工