Vue3 基本语法

我就是我 2023-10-12 23:19 96阅读 0赞

尤雨溪

### 文章目录 ###

*  前言
 *  MVVM框架
 *  认识Vue
 *  文本渲染指令 v-text
 *  属性绑定指令
 *   *  title 属性动态绑定
     *  class属性动态绑定
     *  style 属性动态绑定
 *  事件绑定 @事件名
 *  条件渲染指令
 *   *  v-if
     *  ❗v-if 和 v-show
     *  v-else 和 v-else-if
 *  循环遍历指令 v-for
 *   *  【例】Vue商品列表删除操作
     *  【例】遍历商家

--------------------

# 前言 #

`提示：这里可以添加本文要记录的大概内容：`

学习前端Vue框架有以下几个原因：

1.  Vue是一种轻量级前端框架，易于学习和使用；
2.  Vue具有完善的文档和社区支持，可以轻松地找到解决问题的方法；
3.  Vue使用组件化的编程方式，可以帮助你更好地管理和组织代码；
4.  Vue具有丰富的生态系统，包括大量的第三方组件和插件，可以帮助你更快速地开发应用程序；
5.  Vue在移动端开发中有很好的表现，可以帮助你快速构建响应式的用户界面；
6.  Vue在大型项目中的性能表现也很好，可以满足高要求的开发需求。

Vue开发核心的关注点：数据的变化  
简化DOM编程

--------------------

`提示：以下是本篇文章正文内容，下面案例可供参考`

# MVVM框架 #

![在这里插入图片描述][33d7f63d23b54f80981b12651c846f33.png]

# 认识Vue #

vue.js的在线引用地址(vue 官方引入地址)：

以下是使用Vue.js写一个简单的"Hello World"应用程序的示例：

1.  引入Vue.js文件
2.  创建vue实例对象，需要传入配置对象（最重要的：data）
3.  将创建的vue实例对象，挂载到视图中某个标记上（vm.mount(‘\#xxx’) CSS语法）
4.  最大的div内使用插值语法

【示例代码】：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            
            <h1>{
        {
        title}}</h1>
        </div>
    </body>
    
    <script src="./js/vue3.js"></script>
    
    <script>
        // 2.创建vue实例对象，需要传入配置对象
        // 配置对象中需要指定若干个配置项 data代表数据配置项
        let vm = Vue.createApp({
        
            data() {
        
                return {
        
                    title: 'Hello World'
                }
            },
        })
    
        // 3.将创建的vue实例对象，挂载到视图中某个标记上
        vm.mount('#app')
        // css选择器思想
    </script>
    </html>

输出效果：  
![在这里插入图片描述][09fbe46e1f7b416092bcf7122895dda4.png]  
上面是单项绑定，下面是双向绑定

<body>
        <div id="app">
            
            <h1>{
        {
        title}}</h1>
            <input type="text" v-model="title">
        </div>
    </body>

输出效果：  
![在这里插入图片描述][33b6b98f6eed425babf3c45e22c6c7be.png]  
在输入框内更改内容，上面h1内容也会随之改变  
![在这里插入图片描述][3dd5495dff40403abffd320808fc1948.png]

# 文本渲染指令 v-text #

v-text指令：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <div v-text="x">
            </div>
        </div>
    </body>
    <script src="../js/vue3.js"></script>
    <script>
        let vm = Vue.createApp({
        
            data() {
        
                return {
        
                    x: '<h1>xxx</h1>'
                }
            },
        })
        vm.mount('#app')
    </script>
    </html>

输出效果：  
把里面内容当做纯文本写出  
![在这里插入图片描述][3eb9b69fb27d4588966dfd3a8aee1897.png]  
把v-text改成插值语法：

效果一样  
![在这里插入图片描述][3399a7d6283e46e98fbe12f6a3c4c1a5.png]  
**v-text 修改innerText属性 v-html修改innerHtml 属性**  
**v-text 等同于\{ \{插值语法\}\}**

# 属性绑定指令 #

它可以动态地绑定一个属性的值。  
可以将一个组件的class属性绑定到Vue实例中的一个数据属性上，以实现动态的样式控制

## title 属性动态绑定 ##

和class和style属性绑定类似，通过v-bind指令，我们可以将元素的title属性与Vue实例中的数据属性绑定起来，实现动态绑定，当绑定的数据属性发生变化时，title属性的值也会随之动态更新，从而实现动态绑定

【示例代码】：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <a :href="address">跳转</a>
        </div>
    </body>
    <script src="../js/vue3.js"></script>
    <script>
        let vm = Vue.createApp({
        
            data() {
        
                return {
        
                    address:'https://rej177.blog.csdn.net/article/details/131444680'
                }
            },
        })
    
        vm.mount('#app')
    </script>
    </html>

输出结果  
![在这里插入图片描述][b0960639c6864644b150f9aa28125d83.png]

## class属性动态绑定 ##

可以将一个或多个class类名与Vue实例中的数据属性进行绑定，当数据属性的值发生变化时，class类名也会随之动态更新

【示例代码】：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .one{
        
                color: aqua;
            }
            .two{
        
                color: yellowgreen;
            }
            .three{
        
                font-size: 50px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <p :class="className">杰瑞</p>
            <p :class="[className,className1]">汤姆</p>
            <p :class="{one: flag}">斯派克</p>
        </div>
    </body>
    <script src="../js/vue3.js"></script>
    <script>
        let vm = Vue.createApp({
        
            data() {
        
                return {
        
                    className: 'two',
                    // 改成one变成湖绿色
                    // className: 'one',
                    // 多个属性配置中间加逗号分割
                    className1: 'three',
                    flag: true,
                    // true生效，false不生效
                }
            },
        })
    
        vm.mount('#app')
    </script>
    </html>

输出效果：  
![在这里插入图片描述][8d82a8da920d4656a41fba210dedcdd5.png]

## style 属性动态绑定 ##

可以将一个或多个样式属性与Vue实例中的数据属性进行绑定，当数据属性的值发生变化时，样式属性也会随之动态更新

【示例代码】：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <p :style="{textAlign: a,backgroundColor: b}">二哈喇子！</p>
        </div>
    </body>
    <script src="../js/vue3.js"></script>
    <script>
        let vm = Vue.createApp({
        
            data() {
        
                return {
        
                    a: 'center',
                    b: 'pink'
                }
            },
        })
    
        vm.mount('#app')
    </script>
    </html>

输出效果：  
![在这里插入图片描述][7c6733e26b4341a793a6ef1fa03319bc.png]

# 事件绑定 @事件名 #

**Vue中事件执行的函数，必须编写在methods配置项中**

**methods函数体中想要访问data配置项中配置的数据，必须加this.前缀**

【示例代码】：

模拟购物车的加减数据  
![在这里插入图片描述][a5fb464a297f4d7bbedfc1e4dbf7acdc.jpeg]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        
        
        <div id="app">
            <button @click="minus">-</button>
            {
        {
        num}}
            <button @click="plus">+</button>
            
            <div @click="b" style="width: 200px;height: 200px;border: 1px solid red;">
                <div @click.stop="a" style="width: 50px;height: 50px;background-color: yellow;"></div>
            </div>
        </div>
    </body>
    <script src="../js/vue3.js"></script>
    <script>
        let vm = Vue.createApp({
        
            data() {
        
                return {
        
                    num: 1
                }
            },
            // Vue中事件执行的函数，必须编写在methods配置项中
            methods: {
        
                // methods中定义的函数，function可以省略
                plus: function (event) {
        
                    event.preventDefault()
                    // methods函数体中想要访问data配置项中配置的数据，必须加this.前缀
                    this.num++
                },
                minus: function (event) {
        
                    event.preventDefault()
                    if (this.num > 0) {
        
                        this.num--
                    }
                },
                a: function () {
        
                    console.log('点击子标记')
                },
                b: function () {
        
                    console.log('点击父标记');
                }
            },
        })
        vm.mount('#app')
    
    </script>
    
    </html>

输出效果：  
![在这里插入图片描述][66b5d0c2ae4e48f9ae893d042bea202f.png]

上述代码是一个基本的 Vue 应用，实现了一个计数器和一个嵌套的 div 元素，其中包含一个子元素。下面是代码的详细解释：

这段代码是一个基本的 HTML + Vue.js 页面，它包含了一个加减按钮和一个反弹的黄色小方块。

这个页面的主要步骤如下：

1.  在页面头部使用`<script>`标签引入 Vue.js 库。
2.  在页面的`<body>`标签中添加一个`<div>`标签，它有一个 ID 属性值为“app”。
3.  在这个`<div>`标签中添加两个按钮，分别是“+”和“-”，并绑定对应的事件处理函数 plus 和 minus。
4.  在这个`<div>`标签中添加一个反弹的黄色小方块，它有一个父元素和一个子元素。我们可以通过给这两个元素绑定鼠标点击事件来观察事件冒泡和阻止冒泡的效果。
5.  在标签底部使用`<script>`标签定义一个 Vue 实例 vm，并在实例中定义 data 属性和 methods 方法。
6.  data 属性中只有一个数值类型变量 num，表示当前数值。
7.  methods 方法中包含了四个函数 plus、minus、a 和 b，分别用于增加数值、减少数值、输出点击子标记和输出点击父标记。
8.  使用 `vm.mount` 方法将 Vue 实例挂载到页面中的 app 元素上。

当用户在页面上点击加减按钮或小方块时，Vue 实例会执行对应的函数来改变数据，并将改变后的数据重新渲染到页面上。同时也能看到事件冒泡和阻止冒泡的效果。

# 条件渲染指令 #

条件渲染指令是指在前端框架（如Vue、React等）中，根据条件判断是否渲染DOM节点的指令。  
在Vue中，条件渲染指令包括`v-if`和`v-show`两种：

## v-if ##

v-if指令会根据表达式的值（true或false）来添加或删除DOM节点，如果值为false，则节点会从DOM中删除；如果值为true，则节点会添加到DOM中。  
该指令的优点是可以节省DOM节点的渲染，但缺点是在条件切换时会重新渲染整个节点。

【示例代码】：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <div id="app">
        <div v-if="isShow">条件渲染</div>
        <div v-if="price<=800">价格太贵了，买不起</div>
      </div>
    </body>
    <script src="../js/vue3.js"></script>
    <script>
      let vm = Vue.createApp({
        
        data() {
        
          return {
        
            // 显示的值为true时会显示出来
            isShow: true,
            // 默认不显示，只有price<=800时会显示
            price: 900
          }
        },
      })
      vm.mount('#app')
    </script>
    </html>

## ❗v-if 和 v-show ##

`v-if`和`v-show` **区别：**

1、`v-if`是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。  
2、`v-if`是惰性的，只有当条件为 true 时才会渲染，如果条件为 false 则什么都不做  
3、`v-if`有很高的切换开销，适用于条件不太容易改变的时候  
4、`v-show`不管条件是 true 还是 false 都会进行渲染。并且只是简单地基于CSS进行切换  
5、`v-show`有很高的初始渲染开销，适用于非常频繁地切换

【示例代码v-if】：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <div id="app">
        <div v-if="flag">hello world</div>
        <button @click="change">切换</button>
      </div>
    </body>
    <script src="../js/vue3.js"></script>
    <script>
      let vm = Vue.createApp({
        
        data() {
        
          return {
        
            flag: true
          }
        },
        methods: {
        
          change(){
        
            this.flag=!this.flag
          }
        },
      })
      vm.mount('#app')
    </script>
    </html>

![请添加图片描述][995512e430b6465b996e4855cf3a9bb6.gif]  
【示例代码v-show】：  
把第十行的`<div v-if="flag">hello world</div>`换成v-show  
![请添加图片描述][8ccd65614cd34421a9197314b6500a3c.gif]

## v-else 和 v-else-if ##

该示例中还引入了Vue 3的JS文件vue3.js，并在HTML的尾部使用vm.mount挂载Vue实例到`<div id="app">`处，从而使得Vue能够监视和响应数据的变化，实现动态更新页面内容

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <div id="app">
        <div v-if="type==1">A</div>
        <div v-else-if="type==1">B</div>
        <div v-else>C</div>
      </div>
    </body>
    <script src="../js/vue3.js"></script>
    <script>
      let vm = Vue.createApp({
        
        data() {
        
          return {
        
            type: 1
          }
        },
      })
      vm.mount('#app')
    </script>
    </html>

如果type等于1，则显示文本“A”；  
如果type不等于1，但等于1的话，则显示文本“B”；  
如果type既不等于1也不等于2，则显示文本“C”。

# 循环遍历指令 v-for #

循环指令要放在对应的位置，并不是那个最大的标记

在 Vue 中，可以使用 v-for 指令来循环遍历数组或对象，并生成相应的元素。

<div v-for="(item, index) in items">
      {
        {
         index }} - {
        {
         item }}
    </div>

其中，items 是要遍历的数组或对象，item 表示当前循环的元素，index 表示当前元素的索引。

如果是数组，index 就是当前元素的下标；  
如果是对象，index 就是当前元素的键名。

除了数组和对象，还可以循环遍历数字，例如：

上述代码会生成 5 个 div 元素，分别显示数字 1 到 5。

【循环遍历指令示例代码】：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <div id="app">
        <ul>
          <li v-for="game in arr">{
        {
        game}}</li>
        </ul>
      </div>
    </body>
    <script src="../js/vue3.js"></script>
    <script>
      let vm = Vue.createApp({
        
        data() {
        
          return {
        
            arr: ['我的世界','英雄联盟','CS：GO']
          }
        },
      })
      vm.mount('#app')
    </script>
    </html>

输出效果：  
![在这里插入图片描述][74d317aa150d4dbababbb237336dd7e5.png]

## 【例】Vue商品列表删除操作 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>商品列表</title>
        <style>
            table{
        
                width: 100%;
                border-collapse: collapse;
                border: 1px solid #298cce;
                margin-top: 20px;
            }
            th, td{
        
                padding: 10px;
                text-align: center;
                border: 1px solid #298cce;
            }
            th{
        
                background-color: #f2f2f2;
            }
            tr:nth-child(even){
        
                background-color: #f2f2f2;
            }
            button{
        
                background-color: #298cce;
                color: #fff;
                border: none;
                padding: 6px 10px;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
       <div id="app">
            <table>
                <caption><h2>商品列表</h2></caption>
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>品牌</th>
                        <th>型号</th>
                        <th>成色</th>
                        <th>售后服务</th>
                        <th>连接方式</th>
                        <th>套餐类型</th>
                        <th>价格</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(goods, index) in goods">
                        <td>{
        {
        index+1}}</td>
                        <td>{
        {
        goods.brand}}</td>
                        <td>{
        {
        goods.model}}</td>
                        <td>{
        {
        goods.fineness}}</td>
                        <td>{
        {
        goods.after}}</td>
                        <td>{
        {
        goods.connection}}</td>
                        <td>{
        {
        goods.type}}</td>
                        <td>{
        {
        goods.price}}</td>
                        <td><button @click="del(index)">删除</button></td>
                    </tr>
                </tbody>
            </table>
       </div> 
    </body>
    <script src="../js/vue3.js"></script>
    
    <script>
        let vm = Vue.createApp({
        
            data() {
        
                return {
        
                    goods: [
                        {
        
                            brand: 'OPES',
                            model: 1.0,
                            fineness: '全新',
                            after: '一年质保',
                            connection: '有线/无线',
                            type: '基础版',
                            price: '500',
                        },
                        {
        
                            brand: 'OPES',
                            model: 1.0,
                            fineness: '全新',
                            after: '两年质保',
                            connection: '有线/无线',
                            type: '进阶版',
                            price: '600'
                        },
                        {
        
                            brand: 'OPES',
                            model: 1.0,
                            fineness: '全新',
                            after: '一年质保',
                            connection: '无线',
                            type: '战损版',
                            price: '500'
                        },
                        {
        
                            brand: 'OPES',
                            model: 1.0,
                            fineness: '全新',
                            after: '两年质保',
                            connection: '有线/无线',
                            type: '高级版',
                            price: '700'
                        },
                    ]
                }
            },
            methods: {
        
                del(i){
        
                    this.goods.splice(i,1)
                }
            },
        })
        vm.mount('#app')
    </script>
    </html>

输出效果：  
![在这里插入图片描述][a8bf6bf89e574ca1a08233307c50bada.png]

## 【例】遍历商家 ##

遍历，遍历的是数据，写在`li`里面

<ul class="business-list">
                
                <li v-for="(item, index) in items" :key="index" @click="gotofood(index)">
                    <img src="../assets/img/sj01.png" alt="">
                    <div class="business-info">
                        
                        <div class="business-name">
                            <h3>{
        {
         item.businessName }}</h3>
                            <div>•</div>
                        </div>
                        
                        <div class="business-star">
                            <div class="business-star-left">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <p>4.9 月售1000单</p>
                            </div>
                            <div class="business-star-right">
                                商家配送
                            </div>
                        </div>
                        
                        <div class="business-delivery">
                            <p>¥{
        {
         item.startPrice }}元起送 | ¥{
        {
         item.deliveryPrice }}元配送</p>
                            <p>2.3KM | 18分钟</p>
                        </div>
                        
                        <div class="business-explain">
                            <div>{
        {
         item.businessExplain }}</div>
                        </div>
                        
                        <div class="business-promotion">
                            <div class="business-promotion-left">
                                <p>新</p>
                                <p>新用户首单白嫖</p>
                            </div>
                            <div class="business-promotion-right">
                                <p>2个活动</p>
                                <i class="fa fa-caret-down"></i>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>

items 要写在`data`中，他是个数据，用数组形式  
gotofood 是上面定义的事件，要写在方法`methods`里

// 定义数据 
        data() {
        
            return {
        
                items: [], // 存储商家信息
            }
        },
        methods: {
        
            gotofood(index) {
        
                // 点击商家跳转到商家页面，并将商家信息存储在 session 中
                router.push('/food')
                sessionStorage.setItem('business', JSON.stringify(this.items[index]))
            }
        },

效果：  
![在这里插入图片描述][91a288563f4f473596b24cb8b6a508ac.png]

[33d7f63d23b54f80981b12651c846f33.png]: https://img-blog.csdnimg.cn/33d7f63d23b54f80981b12651c846f33.png
[09fbe46e1f7b416092bcf7122895dda4.png]: https://img-blog.csdnimg.cn/09fbe46e1f7b416092bcf7122895dda4.png
[33b6b98f6eed425babf3c45e22c6c7be.png]: https://img-blog.csdnimg.cn/33b6b98f6eed425babf3c45e22c6c7be.png
[3dd5495dff40403abffd320808fc1948.png]: https://img-blog.csdnimg.cn/3dd5495dff40403abffd320808fc1948.png
[3eb9b69fb27d4588966dfd3a8aee1897.png]: https://img-blog.csdnimg.cn/3eb9b69fb27d4588966dfd3a8aee1897.png
[3399a7d6283e46e98fbe12f6a3c4c1a5.png]: https://img-blog.csdnimg.cn/3399a7d6283e46e98fbe12f6a3c4c1a5.png
[b0960639c6864644b150f9aa28125d83.png]: https://img-blog.csdnimg.cn/b0960639c6864644b150f9aa28125d83.png
[8d82a8da920d4656a41fba210dedcdd5.png]: https://img-blog.csdnimg.cn/8d82a8da920d4656a41fba210dedcdd5.png
[7c6733e26b4341a793a6ef1fa03319bc.png]: https://img-blog.csdnimg.cn/7c6733e26b4341a793a6ef1fa03319bc.png
[a5fb464a297f4d7bbedfc1e4dbf7acdc.jpeg]: https://img-blog.csdnimg.cn/a5fb464a297f4d7bbedfc1e4dbf7acdc.jpeg
[66b5d0c2ae4e48f9ae893d042bea202f.png]: https://img-blog.csdnimg.cn/66b5d0c2ae4e48f9ae893d042bea202f.png
[995512e430b6465b996e4855cf3a9bb6.gif]: https://img-blog.csdnimg.cn/995512e430b6465b996e4855cf3a9bb6.gif
[8ccd65614cd34421a9197314b6500a3c.gif]: https://img-blog.csdnimg.cn/8ccd65614cd34421a9197314b6500a3c.gif
[74d317aa150d4dbababbb237336dd7e5.png]: https://img-blog.csdnimg.cn/74d317aa150d4dbababbb237336dd7e5.png
[a8bf6bf89e574ca1a08233307c50bada.png]: https://img-blog.csdnimg.cn/a8bf6bf89e574ca1a08233307c50bada.png
[91a288563f4f473596b24cb8b6a508ac.png]: https://img-blog.csdnimg.cn/91a288563f4f473596b24cb8b6a508ac.png