vue第2天知识点：v-if和v-show、v-else和v-else-if、v-text和v-html、v-pre和v-once、v-cloak、指令总结、案例-todomvc

最新推荐文章于 2024-04-09 17:07:08 发布

库库好困

最新推荐文章于 2024-04-09 17:07:08 发布

阅读量278

点赞数

分类专栏：十：VUE 文章标签： vue

本文链接：https://blog.csdn.net/m0_46597922/article/details/107508577

版权

十：VUE 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

vue指令

v-on指令

https://cn.vuejs.org/v2/guide/events.html

作用：绑定事件
语法：v-on:click="say" or v-on:click="say('参数', $event)"
简写：@click="say"
说明：绑定的事件从methods中获取
案例：跑马灯

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

事件修饰符

.stop 阻止冒泡，调用 event.stopPropagation()
.prevent 阻止默认行为，调用 event.preventDefault()
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身（比如不是子元素）触发时，才会触发事件
.once 事件只触发一次

按键修饰符

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

v-for

列表渲染

作用：基于源数据多次渲染元素或模板块

<!-- 1 基础用法 -->
<div v-for="item in items">
  {{ item.text }}
</div>

<!-- item 为当前项，index 为索引 -->
<p v-for="(item, index) in list">{{item}} -- {{index}}</p>
<!-- item 为值，key 为键，index 为索引 -->
<p v-for="(item, key, index) in obj">{{item}} -- {{key}}</p>
<p v-for="item in 10">{{item}}</p>

代码演示：

<body>
  <!-- 
    v-for 
    作用：遍历数组或者对象，把值显示到页面上。
    语法：
    v-for="值 in 数组"
    v-for="(值, 下标） in 数组"

    v-for="值 in 对象"
    v-for="(值, 键） in 对象"
   -->
  <div id="app">
    <ul>
      <li v-for="item in list">{{item}}</li>
    </ul>

    <ul>
      <li v-for="(item, index) in list">{{item}} ------{{index}}</li>
    </ul>

    <ul>
      <li v-for="item in friends">姓名：{{item.name}}   年龄：{{item.age}}</li>
    </ul>

    <ul>
      <li v-for="(item, key) in user">{{key}}--------{{item}}</li>
    </ul>
  </div>
  <script src="vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        list: ['张三', '李四', '王五'],
        friends:[
          {name: '隔壁老王', age: 68},
          {name: '楼下小黑', age: 30},
          {name: '楼上老李', age: 58},
        ],
        user: {
          name: '张飞',
          age: 38
        }
      },
    })
  </script>
</body>

key属性

推荐：使用 v-for 的时候提供 key 属性，能够提升列表渲染的性能
说明：使用 key，VUE会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
vue key
vue key属性的说明

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

代码演示：

  <body>
    <!-- 
      v-for:
      注意：
        1、一定要绑定key属性
        2、key属性要值唯一
        3、保证key属性值不变
     -->
    <div id="app">

      <button @click="fn">修改</button>

      <ul>
        <!-- 
          不可以用数组下标绑定到key
          item.id 数据库的主键（唯一且不变）
         -->
        <li v-for="(item, index) in list" :key="item">{{item}}</li>
      </ul>
    </div>
    <script src="vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          msg: 'hahhahaha',
          list: ['刘德华', '张学友', '郭富城', '黎明']
        },
        methods: {
          fn() {
            // this.msg = 'hahhahaha' + Math.random()
            // this.list.push('谭咏麟')
            this.list.unshift('谭咏麟')
          },
        },
      })
    </script>
  </body>

v-if 和 v-show

条件渲染
v-if：根据表达式的值的真假条件，销毁或重建元素
v-show：根据表达式之真假值，切换元素的 display CSS 属性

<p v-show="isShow">这个元素展示出来了吗？？？</p>
<p v-if="isShow">这个元素，在HTML结构中吗？？？</p>

代码演示：

<body>
  <!-- 
    v-if 
    作用：控制元素在页面上的显示和隐藏。
    v-if="true"

    v-show
    作用：控制元素在页面上的显示和隐藏。
    v-show="true"

    区别：
    v-if ：通过创建和删除dom元素的方式 实现显示和隐藏
    v-show ： 通过操作样式 来实现 显示和隐藏

    应用场景：
    1、频繁进行显示和隐藏切换的时候 使用v-show
    2、明确知道第一次渲染 的时候 是显示或者隐藏的时候用v-if

   -->
  <div id="app">
    <h1>vue的例子</h1>
    <p v-if="isshow">v-if</p>

    <p v-show="isshow">v-show</p>
  </div>
  <script src="vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        isshow: true
      }
    })
  </script>
</body>

v-else与v-else-if指令

v-else和v-else-if指令用于指定其他的条件，需要配合v-if使用。

<p v-if="isShow">登录</p>
<p v-else>注册</p>


<p v-if="isShow">登录</p>
<p v-else-if="条件"></p>
<p v-else>注册</p>

注意：

1. v-else必须紧跟在v-if或者v-else-if的后面

代码演示：

<body>
  <!-- 
    v-else指令
    1、一定要和v-if搭配出现
    2、v-else必须和v-if 紧邻

    v-else-if
    多条件判断
   -->
  <div id="app">
    <h1>vue的例子</h1>
    <div v-if="age >= 18">
      成年人可以看：惊悚片、恐怖片、悬疑片
    </div>
    <div v-else-if="age >=16">小青年看点刺激的：海贼王、进击的巨人、柯南</div>
    <div v-else>
      小孩子就去看动画片去吧：花园宝宝、小猪佩奇、汪汪队
    </div>
  </div>
  <script src="vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        age: 30
      }
    })
  </script>
</body>

v-text指令

解释：更新元素的 textContent/innerText。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。

<h1 v-text="msg"></h1>

v-html指令

解释：更新DOM对象的innerHTML,html标签会生效

<h1 v-html="msg"></h1>

在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。

提升性能：v-pre

v-pre: 指令所在的标签内容不会被vue解析

说明：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

<span v-pre>{{ this will not be compiled }}</span>

提升性能：v-once

v-once：只解析一次

说明：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<span v-once>This will never change: {{msg}}</span>

v-cloak指令

不需要表达式
用法：

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
```
[v-cloak] {
  display: none;
}
```
```
<div v-cloak>
  {{ message }}
</div>
```

指令总结

经常使用：

v-bind
v-on
v-model
v-for
v-if

偶尔使用：

v-else
v-else-if
v-show
v-text
v-html

基本不用：

v-pre
v-once
v-cloak

样式处理-class和style

使用方式：v-bind:class="expression" or :class="expression"
表达式的类型：字符串、数组、对象（重点）
语法：

<!-- 1 -->
<!-- 重点 -->
<div v-bind:class="{ active: true }"></div> ===>
<div class="active"></div>

<!-- 2 -->
<div :class="['active', 'text-danger']"></div> ===>
<div class="active text-danger"></div>

<!-- 3 -->
<div v-bind:class="[{ active: true }, errorClass]"></div> ===>
<div class="active text-danger"></div>


--- style ---
<!-- 1 -->
<div v-bind:style="{ color: activeColor, 'font-size': fontSize + 'px' }"></div>
<!-- 2 将多个 样式对象 应用到一个元素上-->
<!-- baseStyles 和 overridingStyles 都是对象 -->
<div v-bind:style="[baseStyles, overridingStyles]"></div>

案例：todomvc

在这里插入图片描述

todomvc 网站：

http://todomvc.com/

todomvc vue版本地址：

http://todomvc.com/examples/vue/

案例源代码已经上传至资源，文件压缩包名称叫：vue第2天-todomvc案例.zip

在这里插入图片描述

库库好困

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue第2天知识点：v-if和v-show、v-else和v-else-if、v-text和v-html、v-pre和v-once、v-cloak、指令总结、案例-todomvc

vue指令v-on指令https://cn.vuejs.org/v2/guide/events.html作用：绑定事件语法：v-on:click="say" or v-on:click="say('参数', $event)"简写：@click="say"说明：绑定的事件从methods中获取案例：跑马灯<a v-on:click="doSomething"></a><a @clic
复制链接

扫一扫