Vue-模板语法_vue语法-CSDN博客

本文链接：https://blog.csdn.net/weixin_44201223/article/details/144749715

1 插值表达式 {{ }}

我们可以用插值表达式渲染出Vue提供的数据

1.1 作用

利用表达式进行插值，渲染到页面中
表达式：是可以被求值的代码，JS引擎会将其计算出一个结果

1.2 语法

1.3 注意点

使用的数据必须存在（data）
支持的是表达式，而非语句，比如：if for …
不能在标签属性中使用 {{ }} 插值

.html

<body>
    <!-- 1.准备容器 -->
    <div class="app">
        {{ msg }}
    </div>
    <!-- 2.引包 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        // 3.创建vue实例
        const app = new Vue({
            // 4.指定配置项
            el:'.app',
            data:{
            	// 数据变化了，视图自动更新
                msg:'你好Vue'
            }
        })
    </script>
</body>

运行效果
在这里插入图片描述

2 响应式特性

2.1 什么是响应式

简单理解就是数据变，视图对应变。
在这里插入图片描述
使用 Vue 开发，关注业务的核心逻辑，根据业务修改数据即可

2.2 如何访问和修改 data中的数据

data中的数据, 最终会被添加到实例上

访问数据： “实例.属性名”
修改数据： “实例.属性名”= “值”

3 Vue中的常用指令

概念：指令是 Vue 提供的带有 v- 前缀 的特殊标签属性。提高程序员操作 DOM 的效率。
vue 中的指令按照不同的用途可以分为如下 6 大类：

内容渲染指令（v-html、v-text）
条件渲染指令（v-show、v-if、v-else、v-else-if）
事件绑定指令（v-on）
属性绑定指令（v-bind）
双向绑定指令（v-model）
列表渲染指令（v-for）

4 内容渲染指令

内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下2 个：

v-text（类似innerText）
v-html（类似 innerHTML）

4.1 v-text

使用语法：<p v-text="msg"> 被覆盖 </p>，意思是将 msg 值渲染到 p 标签中
类似 innerText，使用该语法，会覆盖 p 标签原有内容

.html

<body>
   <div class="app">
    <p v-text="msg"> 被覆盖 </p>
   </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'.app',
            data:{
                msg:'你好Vue'
            }
        })
    </script>
</body>

运行效果
在这里插入图片描述

4.2 v-html

使用语法：<p v-html="intro">hello</p>，意思是将 intro 值渲染到 p 标签中
类似 innerHTML，使用该语法，会覆盖 p 标签原有内容
类似 innerHTML，使用该语法，能够将HTML标签的样式呈现出来。

.html

<body>
   <div class="app">
    <p v-html="info"> 被覆盖 </p>
   </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'.app',
            data:{
                info:'<h1>你好Vue</h1>'
            }
        })
    </script>
</body>

运行效果
在这里插入图片描述

5 条件渲染指令

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

v-show
v-if

5.1 v-show

作用：控制元素显示隐藏
语法： v-show = “表达式” 表达式值为 true 显示， false 隐藏
原理：切换 display:none 控制显示隐藏
场景：频繁切换显示隐藏的场景

.html

<body>
   <div class="app">
    <div v-show="flag1">v-show控制为true显示</div>
    <div v-show="flag2">v-show控制为false隐藏</div>
   </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'.app',
            data:{
                flag1: true,
                flag2: false
            }
        })
    </script>
</body>

运行效果
在这里插入图片描述

5.2 v-if

作用：控制元素显示隐藏（条件渲染）
语法： v-if= “表达式” 表达式值 true显示， false 隐藏
原理：基于条件判断，是否创建或移除元素节点
场景：要么显示，要么隐藏，不频繁切换的场景

.html

<body>
   <div class="app">
    <div v-if="flag1">v-if控制为true创建</div>
    <div v-if="flag2">v-if控制为false移除</div>
   </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'.app',
            data:{
                flag1: true,
                flag2: false
            }
        })
    </script>
</body>

运行效果
在这里插入图片描述

5.3 v-else 和 v-else-if

作用：辅助v-if进行判断渲染
语法：v-else v-else-if="表达式"
需要紧接着v-if使用，只显示v-if v-else-if v-else 一种条件为真的情况

.html

<body>
   <div class="app">
    <div v-if="num < 0">num小于0</div>
    <div v-else-if=" num > 0">num大于0</div>
    <div v-else>num等于0</div>
   </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'.app',
            data:{
                num:0,
            }
        })
    </script>
</body>

运行效果
在这里插入图片描述

6 事件绑定指令

使用Vue时，如需为DOM注册事件，及其的简单，语法如下：

<button v-on:事件名=“内联语句”>按钮
<button v-on:事件名=“处理函数”>按钮
<button v-on:事件名=“处理函数(实参)”>按钮
v-on: 简写为 @

6.1 内联语句

.html

<body>
   <div class="app">
    <!-- 完整写法 -->
    <button v-on:click="count++">+</button>
    <span>{{ count }}</span>
    <!-- 简写 -->
    <button @click="count--">-</button>
   </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'.app',
            data:{
                count:100,
            }
        })
    </script>
</body>

运行效果
在这里插入图片描述

6.2 事件处理函数

事件处理函数应该写到一个跟data同级的配置项（methods）中
methods中的函数内部的this都指向Vue实例

.html

<body>
   <div class="app">
    <!-- 完整写法 -->
    <button v-on:click="add">+</button>
    <span>{{ count }}</span>
    <!-- 简写 -->
    <button @click="sub">-</button>
   </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'.app',
            data:{
                count:100,
            },
            // 事件处理函数要写在methods中，与data平级
            methods:{
                add(){
                    // this 指向当前vue实例，且必须用this. 获取data中的数据字段
                    this.count++
                },
                sub(){
                    this.count--
                }
            }
        })
    </script>
</body>

运行效果
在这里插入图片描述

6.3 给事件处理函数传参

如果不传递任何参数，则方法无需加小括号；methods方法中可以直接使用 e 当做事件对象
如果传递了参数，则实参 $event 表示事件对象，固定用法。

.html

<body>
    <div class="app">
        <div class="box">
            <!-- 无参数传递时，省略($event)可直接获取事件对象 -->
          <button @click="click1">省略</button>

          <button @click="click2($event)">完整</button>

          <button @click="add($event,8)">+8</button>
          
          <button @click="sub(10)">-10</button>
        </div>
        <p>num：{{ count }}元</p>
      </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'.app',
            data:{
                count:100,
            },
            methods:{
                click1(e){
                    console.log('省略$event',e)
                },
                click2(e){
                    console.log('传递$event',e)
                },
                add(e,value){
                    this.count = this.count + value
                    console.log('有额外参数',e)
                },
                sub(value){
                    // 不使用事件对象，只是用传递的值
                    this.count = this.count - value
                },
                
            }
        })
    </script>
</body>

运行效果
在这里插入图片描述

7 属性绑定指令

作用：动态设置html的标签属性比如：src、url、title
语法：v-bind:属性名=“表达式”
v-bind:可以简写成 => :

比如，有一个图片，它的 src 属性值，是一个图片地址。这个地址在数据 data 中存储。
则可以这样设置属性值：

<img v-bind:src="url" />
<img :src="url" /> （v-bind可以省略）

.html

<body>
   <div class="app">
    <!-- 完整写法 -->
    <img v-bind:src="url" alt="">
    <!-- 简写 -->
    <img :src="url" alt="">
   </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'.app',
            data:{
                url:'./1.jfif'
            }
        })
    </script>
</body>

运行效果
在这里插入图片描述

8 列表渲染指令

8.1 v-for

Vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for 指令需要使用 (item, index) in arr 形式的特殊语法，其中：

item 是数组中的每一项
index 是每一项的索引，不需要可以省略
arr 是被遍历的数组

此语法也可以遍历对象和数字

.html

<body>
    <div class="app">
        <!-- 遍历数组 -->
        <div v-for="item in names"> {{ item }}</div>
        <div>******************************************</div>
        <!-- 遍历对象 -->
        <div v-for="(value, key, index) in purple" :key="index">
            属性名: {{ key }}, 属性值: {{ value }}
        </div>
        <div>******************************************</div>
        <!-- 遍历数字 -->
        <div v-for="i in 5" :key="index">
            数字：{{ i }}
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '.app',
            data: {
                names:['张三','李四','王二麻子'],
                purple: {
                    name: '李四',
                    age: '18',
                    sex: '男'
                }
            },
        })
    </script>
</body>

运行效果
在这里插入图片描述

8.2 v-for中的key

语法： key=“唯一值”
作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。
为什么加key：Vue 的默认行为会尝试原地修改元素（就地复用）

注意

key 的值只能是字符串或数字类型
key 的值必须具有唯一性
推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）

.html

<body>
    <div id="app">
        <h3>小黑的书架</h3>
        <ul>
           <!-- 没有加:key -->
          <li v-for="item in booksList">
           <!-- 加:key -->
           <!-- <li v-for="item in booksList" :key="item.id"> -->
            <span>{{ item.name }}</span>
            <span>{{ item.author }}</span>
            <button @click="del(item.id)">删除</button>
          </li>
        </ul>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
      <script>
        const app = new Vue({
          el: '#app',
          data: {
            booksList: [
              { id: 1, name: '《红楼梦》', author: '曹雪芹' },
              { id: 2, name: '《西游记》', author: '吴承恩' },
              { id: 3, name: '《水浒传》', author: '施耐庵' },
              { id: 4, name: '《三国演义》', author: '罗贯中' }
            ]
          },
          methods:{
            del(id){
                this.booksList = this.booksList.filter(item => item.id != id)
            }
          }
        })
      </script>
</body>

运行效果
给第一行数据单独加一个背景色，之后删除第一行数据，没有加:key 背景色保留
在这里插入图片描述

加:key之后，背景色不会在原地复用

9 双向绑定指令

所谓双向绑定就是：

数据改变后，呈现的页面结果会更新
页面结果更新后，数据也会随之而变

作用：给表单元素（input、radio、select）使用，双向绑定数据，可以快速获取或设置表单元素内容
语法：v-model="变量

.html

<body>
    <div id="app">
        账户：<input type="text" v-model="username"> <br><br>
        数据修改实时更新：{{username}} <br><br>
        <button @click="re">重置</button>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
      <script>
        const app = new Vue({
          el: '#app',
          data: {
            username: '',
          },
          methods:{
            re(){
                this.username = ''
            }
          }
        })
      </script>
</body>

运行效果
在输入框中输入数据可实时更改 username 的值
点击重置使 username 值为空，页面显示也随之变化
在这里插入图片描述

10 指令修饰符

10.1 什么是指令修饰符？

所谓指令修饰符就是通过“.”指明一些指令后缀，不同的后缀封装了不同的处理操作 —> 简化代码

10.2 按键修饰符

@keyup.enter —>当点击enter键的时候才触发

.html

<body>
  <div id="app">
    <h3>@keyup.enter  →  监听键盘回车事件</h3>
    <input @keyup.enter="print" v-model="username" type="text">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: ''
      },
      methods: {
        print(){
          console.log("回车打印",this.username)
        }
      }
    })
  </script>
</body>

运行效果
在这里插入图片描述

10.3 v-model修饰符

v-model.trim —>去除首位空格
v-model.number —>转数字

.html

<body>
  <div id="app">
    <h3>v-model修饰符 .trim .number</h3>
    姓名：<input v-model.trim="username" type="text"><br>
    年纪：<input v-model.number="age" type="text"><br>
    <button @click="print()">打印</button>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        age: '',
      },
      methods: {
        print(){
          console.log('username',this.username, '类型：',typeof this.username)
          console.log('age',this.age,'类型：',typeof this.age)
        }

      }
    })
  </script>
</body>

运行效果
在这里插入图片描述

10.4 事件修饰符

@事件名.stop —> 阻止冒泡
@事件名.prevent —>阻止默认行为
@事件名.stop.prevent —>可以连用即阻止事件冒泡也阻止默认行为

.html

<body>
  <div id="app">
    <h3>@事件名.stop     →  阻止冒泡</h3>
    <div @click="fatherFn" class="father">
      <div @click.stop="sonFn" class="son">儿子</div>
    </div>

    <h3>@事件名.prevent  →  阻止默认行为</h3>
    <a @click.prevent href="http://www.baidu.com">阻止默认行为</a>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
      },
      methods: {
        fatherFn () {
          alert('老父亲被点击了')
        },
        sonFn (e) {
          // e.stopPropagation() 也可以阻止冒泡
          alert('儿子被点击了')
        }
      }
    })
  </script>
</body>

运行效果
在这里插入图片描述

11 v-bind对样式控制的增强-操作class

为了方便开发者进行样式控制， Vue 扩展了 v-bind 的语法，可以针对 class 类名 和 style 行内样式 进行控制。

11.1 语法

<div :class = "对象/数组">这是一个div</div>

11.2 对象语法

当class动态绑定的是对象时，键就是类名，值就是布尔值，如果值是true，就有这个类，否则没有这个类

<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>

适用场景：一个类名，来回切换
.style

  <style>
    .box {
      width: 200px;
      height: 200px;
      border: 3px solid #000;
      font-size: 30px;
      margin-top: 10px;
    }
    .pink {
      background-color: pink;
    }
  
  </style>

.html

<body>
  <div id="app">
    <div class="box" :class="{'pink':true}">盒子1</div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {

      }
    })
  </script>
</body>

运行效果
在这里插入图片描述

11.3 数组语法

当class动态绑定的是数组时 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>

使用场景:批量添加或删除类
.style

  <style>
    .box {
      width: 200px;
      height: 200px;
      border: 3px solid #000;
      font-size: 30px;
      margin-top: 10px;
    }
    .pink {
      background-color: pink;
    }
    .big {
      width: 300px;
      height: 300px;
    }
  </style>

.html

<body>
  <div id="app">
    <div class="box" :class="{ pink: true}">盒子1</div>
    <div class="box" :class="['pink', 'big']">盒子2</div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {

      }
    })
  </script>
</body>