指令

指令的概念（6种）

指令（Directives）是vue为开发者提供的模版语法，用于辅助开发者渲染页面的基本结构。

按照不同的用途可以分为以下6大类

内容渲染指令
属性绑定指令
事件绑定指令
双向绑定指令
条件渲染指令
列表渲染指令

1. 内容渲染指令p37

内容渲染指令用来辅助开发者渲染DOM元素的文本内容，常用的内容渲染指令有三个

v-text
{{}}
V-html

v-text

缺点：v-text指令会覆盖原本内部的内容。

<div id="app">
    <p v-text="username"></p>
    <!-- v-text指令会覆盖原本内部的内容 -->
    <p v-text="gender">gender:</p> 
    <p>xingbie </p>
</div>

<script src="./lib/vue-2.6.12.js"></script>

<script>
const vm = new Vue({ 
    el:'#app', 
    data:{
        username:'mingzi',
    gender:'male'
}
})
</script>

{{}}

差值表达式（Mustache），专门用来解决v-text指令会覆盖原本内部的内容的问题。

使用最多，一个类似${}的内容的占位符。

差值表达式只能用在内容节点，而非属性节点（eg:placeholder=”{{}}”无法正常显示且会报错）。

<!-- 只能写一个id="app"的div，写第二个会被无视 -->
    <div id="app">
        <p v-text="username"></p>
        <p v-text="gender">gender:</p> 
    <hr>
        <p>username:{{username}}</p>
        <p>gender:{{ gender }}</p> 
    </div>

    <script src="./lib/vue-2.6.12.js"></script>

    <script>
        const vm = new Vue({ 
            el:'#app', 
            data:{
                username:'mingzi',
                gender:'male'
           }
       })
  //el可以被vm.$mount('app')替代。
    </script>

V-html

可以把带有标签的字符串渲染成真正的HTML内容

<!-- 只能写一个id="app"的div，写第二个会被无视 -->
<div id="app">
  <p v-text="username"></p>
<p v-text="gender">gender:</p> 
<hr>
  <p>username:{{username}}</p>
<p>gender:{{ gender }}</p> 
<hr>
  <div v-text="info"></div>
<div>{{ info }}</div>
<div v-html="info"></div>
</div>

<script src="./lib/vue-2.6.12.js"></script>

<script>
  const vm = new Vue({ 
    el:'#app', 
    data:{
      username:'mingzi',
      gender:'male',
      info:'<h4 style="color: red;font-weight: bold ;">this is info</h4>'
   }
 })
</script>

2.属性绑定指令

v-bind:/:

为元素的属性动态绑定属性值。

vue规定，’v-bind:’可以简写为’:‘

如果绑定内容需要动态拼接，则字符串的外面应该包裹单引号，见2.5

示例

<body>
  <div id="app">
    <input type="text" :placeholder="tips">
  </div>
  <!-- 导入vue的库文件，在window全局就有了Vue这个构造函数 -->
  <script src="../lib/vue-2.6.12.js"></script>
  <script>
    //创建vue的实例对象
    const vm = new Vue({
      //固定写法
      el: '#app',
      data: {
        //1.将tips里的值渲染到placeholder中
        tips: "keyin"
     },
      methods: {

     }
   })

  </script>
</body>

2.5在差值和属性绑定中写js表达式

在vue的模版渲染语法中，除了支持绑定简单的数据值之外，还支持js表达式的运算。

{{number+1}}

{{ok?1:0}}

{{message.split('').reverse().join('')}}//字符串倒过来：字先分割为数组再反转再拼

<div v-bind:id="'list-'+id"></div>

3.事件绑定指令

v-on

v-on事件绑定指令，辅助开发者完成DOM元素绑定事件监听。

on+原生事件：v-on:keyup

示例

<body>
  <div id="app">
    <p>count is {{ count }}</p>
    <!-- 格式：v-on:事件名称="事件处理函数的名称" -->
    <button v-on:click="addCount">+1</button>
  </div>
  <!-- 导入vue的库文件，在window全局就有了Vue这个构造函数 -->
  <script src="../lib/vue-2.6.12.js"></script>
  <script>
    //创建vue的实例对象
    const vm = new Vue({
      //固定写法
      el: '#app',
      data: {
        count: 0,
     },
      methods: {
        //addCount: function () {
        addCount(){//简写
          //this=vm构造函数
          this.count += 1
       }
     }
   })

  </script>
</body>

绑定事件并传参

<body>
    <div id="app">
        <p>count is {{ count }}</p>
        <!-- 格式：v-on:事件名称="事件处理函数的名称" -->
      <!-- 小括号传递参数 -->
        <button v-on:click="addCount(9)">+1</button>
    </div>
    <!-- 导入vue的库文件，在window全局就有了Vue这个构造函数 -->
    <script src="../lib/vue-2.6.12.js"></script>
    <script>
        //创建vue的实例对象
        const vm = new Vue({
            //固定写法
            el: '#app',
            data: {
                count: 0,
           },
            methods: {
                //addCount: function () {
                addCount(n){//简写
                    this.count += n
               }
           }
       })

    </script>
</body>

@

‘v-on:‘简写为’@'(去掉”)

$event

当事件处理函数没有绑定变量，那么自带事件对象e，eg：

methods: {
  //addCount: function () {
  addCount(e){//简写
    this.count++

    if (this.count%2==0) {
      e.target.style.backgroundColor = 'red'
   }
 }
}

但是当当事件处理函数绑定了变量，这时候vue提供了内置变量，名字叫做$event，它就是原生的DOM的事件对象e，这个$event是固定写法。

<body>
    <div id="app">
        <p>count is {{ count }}</p>
        <!-- 格式：v-on:事件名称="事件处理函数的名称" -->
        <!-- 小括号传递参数 -->
        <!-- n和$event顺序无所谓，但是下方函数要和这里顺序相同 -->
        <button v-on:click="addCount(99,$event)">+1</button>
    </div>
    <!-- 导入vue的库文件，在window全局就有了Vue这个构造函数 -->
    <script src="../lib/vue-2.6.12.js"></script>
    <script>
        //创建vue的实例对象
        const vm = new Vue({
            //固定写法
            el: '#app',
            data: {
                count: 0,
           },
            methods: {
                //addCount: function () {
                addCount(n,e){//简写
                    this.count+=n

                    if (this.count%2==0) {
                        e.target.style.backgroundColor = 'red'
                   }else{
                        e.target.style.backgroundColor = ''
                   }
               }
           }
       })
    </script>
</body>

事件修饰符

在原生中，阻止表单/链接自动跳转用e.preventDefault()，阻止冒泡e.stopPagation()

vue提供了更简单的写法

<a href:"url" @click.prevent="name">跳转</a>

事件修饰符用来更简便的对事件的触发进行控制，常用的五个如下：

事件修饰符	说明
.prevent	阻止默认行为（阻止链接跳转，表单提交等）。
.stop	阻止事件冒泡。
.capture	以捕获模式触发当前的事件处理函数。
.once	绑定的事件只触发一次。
.self	只有在e.target是当前元素自身时触发事件处理函数。

按键修饰符

在监听键盘事件时，经常需要判断详细的按键，可以为键盘相关事件添加按键修饰符：

<input @keyup.enter='submit'>// 只有在’key’是’Enter’时调用submit()

<input @keyup.esc='clearInput'>//只有在’key’是’Esc’时调用clearInput()

示例

<body>
  <div id="app">
    <input type="text" @keyup.esc="clearInput">
  </div>
  <!-- 导入vue的库文件，在window全局就有了Vue这个构造函数 -->
  <script src="../lib/vue-2.6.12.js"></script>
  <script>
    //创建vue的实例对象
    const vm = new Vue({
      //固定写法
      el: '#app',
      data: {

     },
      methods: {
        clearInput(e){//这个e必须写
          e.target.value=''
       }
     }
   })
  </script>
</body>

4.双向绑定指令

v-model

vue提供了v-model双向数据绑定指令，在不操作dom的前提下，快速获得表单的数据。

只能表单元素使用：input，textarea，select。

可以理解为有value属性的就可以使用。

示例

<div id="App">
  <p>{{ username }}</p>
  <input type="text" v-model="username "><hr>
  <input type="text" :value="username"><hr>
  <select v-model="city">
    <option value="11">choose please</option>
    <option value="22">bei</option>
    <option value="33">shang</option>
    <option value="44">guang</option>
  </select>
</div>
<script src="../components/lib/vue-2.6.12.js"></script>
<script>
  //Vue.config.devtools = true;
  const vm = new Vue({
    el:"#App",
    data:{
      username:'aaa',
      city:'22',
   },

 })
</script>

v-model指令的修饰符

修饰符	作用	示例
.number	自动将用户输入的值转为数值类型	`<input v-model.number="age"/>`
.trim	自动过滤用户输入的空白字符	`<input v-model.trim="msg"/>`
.lazy	在’change’时而非’input’时更新	`<input v-model.lazy="msg"/>`

注意：例如.number修饰符改变的是用户输入的值，而非data里的初始值。

示例

<div id="App">
  <input type="text" v-model.number="n1">+<input type="text" v-model.number="n2"> = <span>{{n1+n2}}</span>
</div>
<script src="../components/lib/vue-2.6.12.js"></script>
<script>
  Vue.config.devtools = true;
  const vm = new Vue({
    el:"#App",
    data:{
      username:'aaa',
      //city:'22',
      n1:1,
      n2:2,
   },

 })
</script>

5.条件渲染指令

v-if/v-show

条件渲染指令用来辅助开发者按需控制DOM的显示与隐藏，分别为v-if/v-show

V-if=flase 是动态删除掉了元素。

如果刚进入页面，某些元素默认不需要被展示，而且后期这个元素也不一定需要被展示，这时用v-if性能更好。

v-show=false 是给元素加上了display:none;这个属性进行隐藏。

如果要频繁的切换元素的显示状态，用v-show性能会更好

示例

<div id="app">
  <p v-if="networkState === 200">请求成功，被v-if控制</p>
  <p v-show="networkState === 200">请求成功，被v-show控制</p>
</div>

<div id="App">
  <p v-if="flag">v-if</p>
  <p v-show="flag">v-show</p>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
  const vm = new Vue({
    el:"#App",
    data:{
      // 若flag为true，则显示被控制的元素，如果为false则隐藏被控制的元素。
      flag:true,
   },
 })
</script>

v-else-if/v-else

作为v-if的 “else-if块”，可以连续使用：

注意！v-else-if指令必须配合v-if一起使用，否则将无法被识别。

<div v-if="grade>=90">A</div>
<div v-else-if="grade>=80">B</div>
<div v-else-if="grade>=60">C</div>
<div v-else>D</div>

6.列表渲染指令

v-for

v-for列表渲染指令，基于一个数组循环来渲染一个列表结构；

v-for指令需要 item in items 形式的特殊语法。

item：被循环的每一项

items：待循环的数组

示例

<ul>
  <li v-for="item in list">{{ item.name }}</li>
</ul>
...
data:{
 list:[//列表数据
  {id:1,name:'aaa'}
  {id:2,name:'bbb'}
 ]
}

V-for的index

v-for 指令还支持可选的第二个参数index，即当前项的索引。

语法格式为 (item,index) in items

注意：item项与index索引值都为形参，可以根据需要进行重命名，例如：(user,i) in userlist

:key

建议：在使用了v-for指令，一定要绑定一个:key 属性:提升性能，防止列表紊乱。

并且尽量把id作为key的值:key='item.id'; id的值具有唯一性。

key的值的类型要求为：string或number。

key的值不能重复（唯一性），否则会终端报错。错误代码：’duplicate keys detected’。

使用index作为key值无意义，因为index的值不唯一：id和数据绑定，但是index和位置绑定，位置上的数据不稳定，例如使用unshift给列表前加上项，之前index项对应的数据会往后延，即index的值不唯一。

综合示例

<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>
    <link rel="stylesheet" href="./lib/bootstrap.css">
</head>

<body>
    <div id="App">
        <ul>
            <li v-for="item in list" :key="item.id">{{ item.name }}</li>
        </ul>

        <table class="table table-bordered table-hover table-striped">
            <thead>
                <th>index</th>
                <th>id</th>
                <th>name</th>
            </thead>
            <tbody>
                <!-- 要循环谁就给谁加 -->
                <tr v-for="(item,index) in list" :key="item.id">
                    <td>{{index}}</td>
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
        const vm = new Vue({
            el: '#App',
            data: {
                list: [//列表数据
                   { id: 1, name: 'aaa' },
                   { id: 2, name: 'bbb' },
                   { id: 3, name: 'ccc' }
               ]
           }
       })
    </script>
</body>

今天的文章vue的指令分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/56977.html

vue的指令

指令