VUE常见的指令

最新推荐文章于 2022-08-08 12:55:47 发布

短发少女ԅ(¯ㅂ¯ԅ)

最新推荐文章于 2022-08-08 12:55:47 发布

阅读量844

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44364634/article/details/122490296

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

vue学习——vue的指令

vue的基本使用

vue的基本使用

使用vue的步骤

创建vue的实例
指定vue控制的区域

具体的属性意义如下图：
alt

1、打开的调试器

这里会发现，root其实是el所指定的区域，理解为root是根节点
在这里插入图片描述

2、VUE的两个特性

数据驱动试图：

数据的变化会驱动视图自动更新
好处：程序员只管把数据维护好，那么页面结构会被vue自动渲染出来

双向数据绑定

在网页中，from表单负责采集数据，Ajax负责提交数据

js数据的变化，会被自动渲染到页面上
页面上表单采集的数据发生变化的时候，会被vue自动获取到，并更新到js数据中

注意：数据驱动视图和双向数据绑定的底层原理时MVVM（mode数据源，view视图，ViewModel就是vue的实例）

3、指令

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

1、vue中的指令按照不同的途径分为6大类
①内容渲染指令
②属性绑定指令
③事件绑定指令
④双向绑定指令
⑤条件渲染指令
⑥列表渲染指令

3.1 内容渲染指令——用于辅助开发者渲染DOM元素的文本内容

最常用的内容渲染指令有如下3个：

v-text
{{ }}
v-html

3.1.1 v-text的使用方法

<!-- 把username对应的值，渲染到第一个p标签中 -->
<p v-text="username"></p>
<!-- 把gender对应的值，渲染到第二个p标签中 -->
<!-- 第二个p标签的“性别”这个文本会被gender的值覆盖掉 -->
<p v-text = "gender">性别</p>

v-text 的缺点:会覆盖元素内部原有的内容！

3.1.2 所以不想覆盖的话，我们想到了第二种方式 {{ }} 插值表达式

<!--  插值表达式{{}}  -->
  <p>姓名:{{username}}</p>
  <p>性别:{{gender}}</p>

当我们试图用{{}}和v-text来实现含有标签的内容，发现不能显示出标签效果

<p v-text="info"></p>
<p>{{info}}</p>

3.1.3 由于{{}}和v-text都不能显示html标签的内容，所以我们用v-html来表示

<p v-html="info"></p>

3.1.4 总结

v-text：它的缺点是会覆盖元素内容原有的内容
{{ }}插值表达式：使用较多的方法，但是他不会覆盖原有的内容
v-html：由于v-text和{{}}都不能把带有标签的字符串渲染成真正的HTML内容

3.2 属性绑定指令

{{ }}只能用在内容节点上，而不能用在属性标签上，所以如果需要为元素属性动态绑定属性值，则需要用到v-bind属性绑定指令，用法如下：
vue规定可以把v-bind:简写为:

<div class="app">
<!--  vue规定可以把v-bind:简写为:-->
  <input type="text" v-bind:placeholder="tips">
  <hr>
  <img :src="photo" alt="tupian" style="width: 200px;">
</div>
<script>
  const vm = new Vue({
    el:'.app',
    data:{
      tips:'请输入用户名',
      photo:'http://static.runoob.com/images/demo/demo2.jpg'
    }
  })
</script>

补充

在vue提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持JavaScript表达式的运算。比如一些加减法、三元运算、函数
在使用v-bind属性绑定期间，如果绑定的内容需要进行动态拼接，则字符串外面应该包裹单引号，例如：<div :title:" 'box' + index ">（index是动态的）

3.3 事件绑定指令

3.3.1 定义

vue提供了v-on事件绑定指令，用来辅助程序员为DOM元素绑定事件监听，语法格式如下：

<div id="app">
  <p>count：的值是:{{count}}</p>
<!--  add是事件的函数-->
  <button v-on:click="add(3)">+1</button>
  <button v-on:click="sub">-1</button>
</div>

<!--1.导入vue的库文件，在window全局中就有了vue这个构造函数-->
<!--2.创建vue的实例对象-->
<script>
  //创建vue的实例对象
  const vm = new Vue({
    //el属性是固定的写法，表示当前vm实例要控制页面上的那个区域，接受的值是一个选择器
    el:"#app",
    //data对象就是要渲染到页面上的数据
    data:{
      count:0
    },
    //methods作用是定义事件的处理函数
    methods:{
      //也可以简写为add(){}
      add:function (n) {
        //this 完全可以替代vm，this指向的就是this
        console.log(vm === this);
        //在绑定事件参数时可以加小括号
        vm.count += n;
      },
      sub(){
        vm.count --;
      }
    }
  });
</script>

3.3.2 v-on: 指定可以简写为@

3.3.3 vue常用的一些事件指令

v-on:click 或 @click
v-on:input 或 @input
v-on:keyup 或 @keyup

3.3.4 事件对象

1. 事件对象没有传递参数

这里注意到button v-on:click="add"的add不加（），且没有传参

<body>
<!--3.希望vue能够控制下面的这个div，帮我们在把数据填充到div内部-->
<div id="app">
  <p>count：的值是:{{count}}</p>
  <!-- 如果count是偶数，则按钮背景变成红色，否则，取消背景颜色 -->
  <button v-on:click="add">+1</button>
</div>

<!--1.导入vue的库文件，在window全局中就有了vue这个构造函数-->
<!--2.创建vue的实例对象-->
<script>
  //创建vue的实例对象
  const vm = new Vue({
    //el属性是固定的写法，表示当前vm实例要控制页面上的那个区域，接受的值是一个选择器
    el:"#app",
    //data对象就是要渲染到页面上的数据
    data:{
      count:0
    },
    //methods作用是定义事件的处理函数
    methods:{
      //也可以简写为add(){}
      add(e) {
        this.count ++;
        console.log(e);
      //判断this.count的奇偶
        if(this.count % 2 === 0){
          //偶数
          e.target.style.backgroundColor = 'red';
        }else{
          //奇数
          e.target.style.backgroundColor = '';
        }
      }
    }
  });
</script>
</body>

2. 事件对象有传递参数

这里注意到button v-on:click="add()"的add加（），并且传参，vue提供了内置变量，名字叫做$event，它就是原生DOM 的事件对象e

<body>
<!--3.希望vue能够控制下面的这个div，帮我们在把数据填充到div内部-->
<div id="app">
  <p>count：的值是:{{count}}</p>
  <!-- 如果count是偶数，则按钮背景变成红色，否则，取消背景颜色 -->
  <!-- vue提供了内置变量，名字叫做$event，它就是原生DOM 的事件对象e -->
  <button v-on:click="add(1,$event)">+1</button>
</div>

<!--1.导入vue的库文件，在window全局中就有了vue这个构造函数-->
<!--2.创建vue的实例对象-->
<script>
  //创建vue的实例对象
  const vm = new Vue({
    //el属性是固定的写法，表示当前vm实例要控制页面上的那个区域，接受的值是一个选择器
    el:"#app",
    //data对象就是要渲染到页面上的数据
    data:{
      count:0
    },
    //methods作用是定义事件的处理函数
    methods:{
      //也可以简写为add(){}
      add(n,e) {
        this.count ++;

      //判断this.count的奇偶
        if(this.count % 2 === 0){
          //偶数
          e.target.style.backgroundColor = 'red';
        }else{
          //奇数
          e.target.style.backgroundColor = '';
        }
      }
    }
  });
</script>
</body>

3.3.5 事件修饰符

在事件处理函数中调用event.preventDefault()或者event.stopPropagation()是非常常见的需求。因此vue提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。常用的5个事件修饰符如下：

prevent——阻止默认行为（比如阻止a链接的跳转，阻止表单的提交等）
.stop——阻止事件冒泡
.capture——以捕获模式触发当前的事件处理函数
.once——绑定的事件只触发1次
.self——只有在event.target是当前元素自身时触发事件处理函数

<body>
<div id="app">
  <a href="http://www.baidu.com" @click.prevent="show">跳转到百度首页</a>

  <div style="height: 150px;background-color: #42b983;padding-left: 100px;line-height: 150px;" @click="divHandler">
    <button @click.stop="btnHandler">按钮</button>
  </div>

</div>
<script>
  //创建vue的实例对象
  const vm = new Vue({
    el:"#app",
    data:{
    },
    methods:{
      show(e){
        //阻止冒泡和默认的事件——js的方法：e.preventDefault()
        //vue中用@click.prevent（绑定事件同时阻止发生默认事件），这就是vue的默认修饰符.
        console.log('点击了a链接');
      },
      divHandler(e){
        console.log('divHandler');
      },
      btnHandler(e){
        console.log('btnHandler');
      },
    }
  });
</script>
</body>

3.3.6 按键修饰符

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

<!--只有在key是enter时调用vm.submit()-->
<input @keyup.enter = "submit">
<!--只有在key是enter时调用vm.clearInput()-->
<input @keyup.esc = "clearInput">

3.4 双向绑定指令

3.4.1 定义

vue提供了v-model双向数据绑定指令，用来辅助开发者在不操作DOM的前提下，快速获取表单的数据。

3.4.2 v-model指令

input输入框
- type=“radio”
- type=“checkbox”
- type=“xxxx”
textarea
select

只有表单元素才能使用v-model
v-model是双向绑定指令，即能修改数据源（data）的数据，而v-bind是单向绑定指令，不能修改数据源的信息

<body>
<!--只有表单元素才能使用v-model-->
<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="">请选择指定的城市</option>
    <option value="1">北京</option>
    <option value="2">广州</option>
    <option value="3">上海</option>
  </select>
</div>

<script>
  const vm = new Vue({
    el:"#app",
    data:{
      username:'zhangsan',
      city:''
    },
  });
</script>
</body>

3.4.3 v-model的修饰符

在这里插入图片描述

关于v-model.number/trim/lazy的使用

<body>
<!--只有表单元素才能使用v-model-->
<div id="app">
  <input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{{ n1 + n2 }}</span>

  <hr>

  <input type="text" v-model.trim="username">
  <button @click="showName">获取用户名</button>
  
  <hr>
  <input type="text" v-model.lazy="username">
</div>
<script>
  const vm = new Vue({
    el:"#app",
    data:{
      username:'zhangsan',
      n1:1,
      n2:2,
    },
    methods:{
      showName(){
        console.log(`用户名是："${this.username}"`)
      }
    }
  })
</script>
</body>

3.5 条件渲染指令

3.5.1 定义

条件渲染指令用来辅助开发者按需控制DOM的显示与隐藏。条件渲染指令有如下两个，分别是：

v-if
v-show

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

（面试题）

v-show适合频繁切换元素的显示状态，性能更好；而v-if则适用于：如果刚进入页面的时候，某些元素默认不需要被展示，而后期这个元素很可能也不需要被展示出来，此时v-if的性能更好。
v-if的原理是：每次动态创建或者移出元素，实现元素的显示和隐藏
v-show的原理是：动态为元素添加或者移出display:none样式，来实现元素的显示和隐藏

flag为false时，v-if就不存在了，而v-show则显示display：none

3.5.2 v-if可以和v-else配合使用

	<div v-if="type === 'A'">优秀</div>
	<div v-else-if="type === 'B'">良好</div>
	<div v-else-if="type === 'C'">一般</div>
	<!--  v-else不需要判断条件，比如type === D -->
	<div v-else>差</div>

3.6 列表渲染指令

3.6.1 定义

vue提供了v-for列表渲染指令，用来辅助开发者基于一个数组来渲染一个列表结构。v-for指令需要使用item in items形式的特殊语法，其中：
- items是待循环的数组
- item是被循环的每一项
v-for指令还支持一个可选的第二个参数，即当前项的索引。语法格式为（item,index）in items。
注意：v-for指令中的item项和index索引都是形参，可以根据需要进行重命名。例如（user,i）in userlist

3.6.2 强调v-for循环中key值的注意点

key的注意事项
①key的值只能是字符串或数字类型
②key的值必须具有唯一性（即key的值不能重复）
③建议把数据项id属性的值作为key的值（因为id属性的值具有唯一性）
④使用index的值当作key的值没有任何意义（因为index的值不具有唯一性）
⑤官方建议：只要用到v-for指令，那么一定要绑定一个：key属性（即提升性能、又防止列表状态紊乱）

<body>
<div id="app">
  <table class="table table-bordered table-hover table-striped">
    <thead>
    <th>索引</th>
    <th>ID</th>
    <th>姓名</th>
    </thead>
    <tbody>
<!--    官方建议：只要用到v-for指令，那么一定要绑定一个：key属性-->
<!--而且，尽量把id作为key的值-->
<!--官方对key的值的类型，是有要求的：字符串或者数字类型-->
    <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>
  //创建vue的实例对象
  const vm = new Vue({
    el:"#app",
    data:{
      list:[
        //列表数据
        {id : 1 ,name : 'zs'},
        {id : 2 ,name : 'ls'},
        {id : 3 ,name : 'ww'}
      ],
    },
  });
</script>

</body>