Vue指令

指令名称	指令作用	示例	简写形式
v-text	设置元素的innerText	`v-text="111"`	无
v-html	设置元素的innerHTML	`v-html="<p>111</p>"`	无
v-on	给元素绑定事件	`v-on:click="doClick"`	`@click="doClick"`
v-bind	设置元素的原生属性	`v-bind:src="./logo.png"`	`:src="./logo.png"`
v-for	列表渲染	`<li v-for=(item,index) in list></li>`	无

Vue指令介绍

Vue指令官网文档传送门：cn.vuejs.org/v2/api/#v-t…
1.Vue指令的本质是 ： Vue为HTML标签新增的一些属性
- a. 每一个HTML标签都有自己的原生默认属性
  - HTML标签的每一个属性都有自己独特的功能
  - 例如 img标签的src属性，a标签的href属性
- b. Vue认为,HTML标签原生的属性还不够用，所以Vue为HTML标签新增了很多的属性，每一个属性(指令)都可以实现一个强大的功能
2.在Vue中每一个指令都是以v-开头（用于区分HTML标签原生属性）
- 语法： 指令名=“指令值”
  - 例如 v-text = msg
3.使用Vue的指令，就像使用HTML标签原生的属性一样去使用即可。

`<IMG SRC="./IMAGES/LOGO.PNG" ALT="图片不存在时的文本" TITLE="鼠标悬停文本" V-ON:CLICK = "DOCLICK">`
`src"` : 原生属性，设置图片的路径
`alt` : 原生属性，设置图片不存在时的文本
`title`：原生属性，设置鼠标悬停文本
`v-on:click`:vue给img标签新增的属性, 给元素绑定点击事件

v-text指令

v-text指令官方文档传送门：cn.vuejs.org/v2/api/#v-t…

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>
</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        <p v-text="msg">大新哥</p>
        <p v-text="msg1">李富贵</p>
        <p>我爱你： {{ msg }}</p>
    </div>
    <!-- 
        1.学习目标 ：  v-text 指令
        2.学习路线
            a.作用： 设置元素的文本 innerText
            b.与插值表达式区别
                v-text 设置元素的文本，如果元素有文本，则会覆盖现有的文本
                {{ }}  只会替换当前位置文本

     -->
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                msg: '我是王德发!',
                msg1:'<h1>cv搬运工</h1>'
            }
        })
    </script>
</body>
</html>

v-html指令

v-html指令官方文档传送门：cn.vuejs.org/v2/api/#v-h…

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <!-- 导包 -->
  <script src="./vue.js"></script>
</head>

<body>
  <!-- HTML结构 -->
  <div id="app">
    <p v-text="message">我是dj</p>
    <p v-html="message">我是dj</p>
    <p>我是dj {{message}}</p>
  </div>
  <!-- 
        1.学习目标 ：  v-html 指令
        2.学习路线
            作用： 设置元素的innerHTM
     -->
  <script>
    /* 创建vue实例 */
    let app = new Vue({
      el: "#app",
      data: {
        message: "<h1>你会爱我吗?</h1>"
      }
    })

  </script>
</body>

</html>

v-on指令（绑定事件）

v-on基本使用

v-on指令官方文档传送门:cn.vuejs.org/v2/api/#v-o…

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <!-- 导包 -->
  <script src="./vue.js"></script>

  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>

<body>
  <!-- HTML结构 -->
  <div id="app">
    <button v-on:click="age++">点我</button>
    <button v-on:click="doClick">点我也行</button>
    <div class="box" @mouseenter="doEnter" @mouseleave="doLeave"></div>
    <hr />
    <div class="box"></div>
    <p>我的年龄是:{{age}}</p>
  </div>
  <!-- 
        1.学习目标 ：  v-on 指令
        2.学习路线
            a.作用： 
            b.语法： 
                标准语法：     
                简洁语法：    
            c.注意点
                事件名就是原生事件名去掉on
                事件方法定义在vue实例的methods对象中
     -->
  <script>
    /* 创建vue实例 */
    let app = new Vue({
      //el:挂载点
      el: "#app",
      //data: 要渲染的数据
      data: {
        age: 18
      },
      //method:注册事件的方法名
      methods: {
        doClick() {
          console.log("dj舞曲");
        },
        doEnter() {
          console.log("移入");
        },
        doLeave() {
          console.log("移出");
        }
      }
    })
  </script>
</body>

</html>

vue事件修饰符

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <!-- 导包 -->
  <script src="./vue.js"></script>

  <style>
    .father {
      width: 300px;
      height: 300px;
      background-color: #f00;
    }

    .son {
      width: 100px;
      height: 100px;
      background-color: #0f0;
    }
  </style>
</head>

<body>
  <!-- HTML结构 -->
  <div id="app">
    <div class="father" @click="fatherClick">

      <div class="son" @click.stop="sonClick"></div>
    </div>

    <form action="http://www.douyu.com">
      <button @click.prevent="doCommit">提交</button>
    </form>

    <!-- 输入框 ： enter键 -->
    <!-- <input type="text" @keyup.13="doUp"> -->
    <!-- 用enter,易读 -->
    <input type="text" placeholder="enter搜索" @keydown.enter="doEnter" />
  </div>
  <!-- 
        1.学习目标 ：  事件修饰符
        2.学习路线
            a.作用： 限定事件触发行为（例如阻止冒泡，阻止默认行为等）
            b.语法： @事件名.修饰符 = "方法名"
     -->
  <script>
    /* 创建vue实例 */
    let app = new Vue({
      //el:挂载点
      el: "#app",
      //data: 要渲染的数据
      data: {},
      //method:注册事件的方法名
      methods: {
        fatherClick() {
          console.log("父元素被点击");
        },
        sonClick() {
          console.log("子元素被点击");
        },
        doCommit() {
          console.log("表单按钮点击");
        },
        doEnter() {
          console.log("键盘按下");
        },
      }
    })
  </script>
</body>

</html>

vue方法中的this

1.vue事件方法中的this指向： vue实例
2.vue事件方法中访问data对象中的成员 : this.属性名
- vue会将data对象与methods对象中的成员 平铺到 vue实例中
3.注意点：如果事件处理代码没有写到methods中，而是写在行内则不需要this 就可以访问data对象中的成员

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <!-- 导包 -->
  <script src="./vue.js"></script>
</head>

<body>
  <!-- HTML结构 -->
  <div id="app">
    <button @click="doClick">点我啊</button>
    <br />
    我的年龄：{{age}}
    <button @click="age++">点一下</button>
  </div>

  <script>
    /* 创建vue实例 */
    let app = new Vue({
      //el:挂载点
      el: "#app",
      //data: 要渲染的数据
      data: {
        name: '王德发',
        age: 20,
      },
      methods: {
        doClick() {
          console.log(this)
          console.log(this === app)
          console.log(this.age)
          console.log(this.name)

        }
      }
    })
  </script>
</body>

</html>

vue事件传参

1.vue中每一个事件方法都有一个默认参数，就是事件对象
2.如果主动给事件传参，则传递的参数会覆盖默认参数
3.如果希望同时传入事件对象 + 自定义参数，则可以使用 $event
- v-on:click="doClick($event,自定义参数)"

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./vue.js"></script>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="app">
    {{msg}}
    <div class="box" @click="boxClick(111)"></div>
    <br>
    <span v-text="news.title"></span>
    <button @click="deleteClick(news.id)">删除</button>
    <button @click="editClick($event,news.id)">编辑</button>
  </div>

  <script>
    let app = new Vue({
      el: '#app',
      data: {
        msg: '我是dj',
        news: {
          title: '如果我是dj你会爱我吗',
          id: 111
        }
      },
      methods: {
        boxClick(e) {
          console.log(e);
        },
        deleteClick(id) {
          console.log(`id为${id}的文字被删除`);
        },
        editClick(e, id) {
          console.log(e);
          console.log(id);
        }
      }
    })
  </script>

</body>

</html>

v-bind指令 (绑定标准属性的值)

v-bind指令官网文档传送门：cn.vuejs.org/v2/api/#v-b…

默认情况下，HTML标签原生属性无法获取vue中的数据
如果希望原生属性也可以获取vue中的数据，就可以使用v-bind指令

v-bind指令基本使用

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <!-- 导包 -->
  <script src="./vue.js"></script>
</head>

<body>
  <!-- HTML结构 -->
  <div id="app">
    <img v-bind:src="obj.icon" v-bind:title="obj.title" />
    <img :src="obj.icon" :title="obj.title" />
  </div>

  <script>
    /* 创建vue实例 */
    let app = new Vue({
      //el:挂载点
      el: "#app",
      //data: 要渲染的数据
      data: {
        name: '王德发',
        obj: {
          icon: "./images/logo.png",
          title: '一个图片'
        }
      }
    })
  </script>
</body>

</html>

vue样式绑定

class与style样式绑定官方文档传送门：cn.vuejs.org/v2/guide/cl…

v-bind 可以简写成 :


v-bind:class="{ '类名': bool, '类名': bool ......}"
如果值为true 该类样式就会被应用在元素身上, false则不会
注意点：如果类名有 - ，则需要使用引号包起来

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>
    <style>
        div>div {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            margin-top: 20px;
        }

        .red-box {
            background-color: red;
        }

        .blue-box {
            background-color: blue;
        }

        .greenBorder {
            border: 10px solid green;
        }
    </style>
</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        <!-- 本小节内容：Vue设置元素CSS样式的3种方式 -->

        <!--  v-bind:class="{ '类名': bool, '类名': bool ......}"
                如果值为true 该类样式就会被应用在元素身上, false则不会
                注意点：如果类名有 - ，则需要使用引号包起来
        -->
        <button @click="changeClass">切换样式</button>
        <div :class="{ greenBorder: true, 'blue-box': flag }"></div>
        <hr>
        <div :style="{ width:width , height , 'background-color':bgc}"></div>
        
    </div>
    
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                flag:true,
                width:'200px',
                height:'200px',
                bgc:'cyan'
            },
            methods: {
                changeClass(){
                    this.flag = !this.flag;
                }
            },
        })
    </script>
</body>

</html>

vue指令案例:计数器

Vue编程思维

(1)写页面结构 HTML+CSS
(2)分析页面需要显示什么数据，将其保存在vue实例的data对象中
(3)在页面视图中使用插值语法或者指令显示data中的数据

QQ截图20220711223104.png

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>
    <style>
        .input-num {
            width: 180px;
            height: 40px;
            border: 1px solid gray;
            display: flex;
            border-radius: 5px;
            overflow: hidden;
        }

        .input-num button {
            width: 50px;
            height: 100%;
            font-size: 25px;
            color: gray;
            cursor: pointer;
        }

        .input-num span {
            height: 100%;
            border: 1px solid gray;
            flex: 1;
            text-align: center;
            line-height: 40px;
        }

        .input-num button.disabled {
            cursor: not-allowed;
            color: #ccc;
        }
    </style>
</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        <!-- 计数器 -->
        <div class="input-num">
            <button @click="minus" >
                -
            </button>
            <span>{{ num }}</span>
            <button @click="add"  >
                +
            </button>
        </div>
    </div>

    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                num: 0,
            },
            //methods: 事件处理函数
            methods: {
                add() {
                    if( this.num < 10 ){
                        this.num++
                    }
                },
                minus() {
                    if( this.num > 0 ){
                        this.num--
                    }
                },

            },
        })
    </script>
</body>

</html>

最后是原图

最常用的Vue指令教学