Vue的基础知识之插值操作

最新推荐文章于 2025-05-11 17:25:52 发布

Chil_G

最新推荐文章于 2025-05-11 17:25:52 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript node.js

本文链接：https://blog.csdn.net/Chil_G/article/details/120155981

本文介绍了Vue的基础知识，包括插值操作的v-on、v-once、v-if/v-else/v-if-else、v-for、v-html、v-text和v-show。特别强调了响应式方法在数组操作中的应用，如push、pop、shift等，并提醒了通过索引修改数组元素非响应式的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在学习之前如果你没有ES6的相关知识补充，请先去看看博主的这篇文章

关于VUE中ES6的基础知识

1、Vue的基础知识

Vue是一个渐进式框架

渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。

Vue有很多特点和Web开发中常见的高级功能

解耦视图和数据

可复用的组件

前端路由技术

状态管理

虚拟DOM

（一）插值操作

v-on:事件监听（语法糖是@）

①、在前端开发中，我们需要经常和用于交互。这个时候，我们就必须监听用户发生的时间，比如点击、拖拽、键盘事件等等在Vue中如何监听事件呢？使用v-on指令

当通过methods中定义方法，以供@click调用时，需要注意参数问题：

情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去

情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件


<div id="app">
<!--  事件调用的方法没有参数-->
  <button @click="btn1Click">按钮1</button>
  <button @click="btn1Click()">按钮1</button>


  <button @click="btn2Click('丘梓安')">按钮2</button>
  <!--  在事件定义时，写方法时省略了小括号，但是方法本身是需要一个参数的，这个时候
Vue会默认将浏览器产生的event事件对象作为参数传入到方法-->
  <button @click="btn2Click">按钮2</button>
<!--  如果函数需要参数，但是没有传入，那么函数的形参为undefined-->
  <button @click="btn2Click()">按钮2</button>
<!--方法定义时候，我们需要event对象，同时有需要其他参数-->
<!--在调用方式，如何手动的获取到浏览器参数的event对象：$event-->
  <button @click="btn3Click('丘梓安',$event)">按钮3</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            message:'你好啊'
        },
        methods:{
            btn1Click(){
                console.log('btn1Click');
            },
            btn2Click(abc){
                console.log(abc,'------');
            },
            btn3Click(abc,event){

                console.log('+++++',abc, event);
            }
        }
    })
</script>

②、在某些情况下，我们拿到event的目的可能是进行一些事件处理。

Vue提供了修饰符来帮助我们方便的处理一些事件：

.stop - 调用 event.stopPropagation()。

<!-- 1、 .stop修饰符的使用-->
  <div @click="divClick">
    <button @click.stop="btnClick">按钮1</button>
  </div>

.prevent - 调用 event.preventDefault()。

<!--  2、 .prevent修饰符的使用-->
  <form action="http://baidu.com">
    <input type="submit" value="提交" @click.prevent="submitClick">
  </form>

.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

<!--  3、 .监听某个键盘的键帽-->
  <input type="text" @keyup.enter="keyUp">

.native - 监听组件根元素的原生事件。

.once - 只触发一次回调。

<!--  4、 .once修饰符的使用-->
  <button @click.once="btn2Click">按钮</button>

2、v-once：在某些情况下，我们可能不希望界面随意的跟随改变

一次赋值指令（后面不需要跟任何的表达式）

该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的) 该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变

3、v-if,v-else,v-if-else（条件判断）：

v-if的原理： v-if后面的条件为false时，对应的元素以及其子元素不会渲染。也就是根本没有不会有对应的标签出现在DOM中。

<div id="app">
  <h2 v-if="score>=90">优秀</h2>
  <h2 v-else-if="score>80&&score<90">良好</h2>
  <h2 v-else-if="score>70&&score<80">较好</h2>
  <h2 v-else-if="score>60&&score<70">及格</h2>
  <h2 v-else="score<60">良好</h2>


</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            score:68,
        }
    })
</script>

用户切换登录模式的小案例：

需求：用户在登录时，可以切换使用用户账号登录还是邮箱地址登录。类似如下情景：

代码实现：

<div id="app">

  <span v-if="isUser">用户账号
    <label for="user"></label>
  <input type="text" id="user" placeholder="用户账号">
  </span>

  <span v-else>用户邮箱
    <label for="email"></label>
  <input type="text" id="email" placeholder="用户邮箱">
  </span>

  <button @click="isUser=!isUser">切换类型</button>

</div>

<script src="../js/vue.js"></script>

<script>

    const app=new Vue({
        el:'#app',
        data:{
            message:'你好啊',
            isUser:true
        }
    })
</script>

以上代码可以实现案例需求，但是出现了一个小问题。那就是用户在点击切换登陆类型的时候，输入框内原有的文字并不会消除，而是保留，如何解决？（涉及到了Vue的底层逻辑，虚拟dom中保留了该输入框）

解决思路：

  <input type="text" id="user" placeholder="用户账号" key="username">


  <input type="text" id="email" placeholder="用户邮箱" key="email">

在输入框的属性中增加一个key属性，Vue底层会判断key值是否相同，如果相同则保留虚拟输入框，如果不同则更换输入框

3、v-for:当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。

v-for的语法类似于JavaScript中的for循环。

格式：item in items的形式。

①、v-for可以用户遍历对象：比如某个对象中存储着你的个人信息，我们希望以列表的形式显示出来。

<div id="app">
<!--1.在遍历对象的过程中，如果只是获取对象的一个值，那么获取到的是value-->
  <ul>
    <li v-for="item in info">{{info}}</li>
  </ul>

  <!--2.获取key 和value（value,key）-->
  <ul>
    <li v-for="(value,key) in info">{{key}}-{{value}}</li>
  </ul>

  <!--3.获取key和value和index格式，(value,key,index)-->
  <ul>
    <li v-for="(value,key,index) in info">{{index+1}}.{{key}}-{{value}}</li>
  </ul>



</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            info:{
                name:'qza',
                height:1.88,
                age:18,
            }


        }
    })
</script>

②、获取数组：如果在遍历的过程中不需要使用索引值 v-for="movie in movies" 依次从movies中取出movie，并且在元素的内容中，我们可以使用Mustache语法，来使用movie 如果在遍历的过程中，我们需要拿到元素在数组中的索引值呢？语法格式：v-for=(item, index) in items 其中的index就代表了取出的item在原数组的索引值。

<div id="app">
<!--1、在遍历过程中没有使用到下标值-->
  <ul>
    <li v-for="item in names">{{item}}</li>
  </ul>

<!--  2、在遍历的过程中获取我们的索引值-->
  <ul>
    <li v-for="(item,index) in names">{{index+1}}-{{item}}</li>
  </ul>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            names:['qza','neymar','sky','hxy']
        }
    })
</script>

4、v-html:某些情况下，我们从服务器请求到的数据本身就是一个HTML代码如果我们直接通过{{}}来输出，会将HTML代码也一起输出。但是我们可能希望的是按照HTML格式进行解析，并且显示对应的内容。如果我们希望解析出HTML展示可以使用v-html指令该指令后面往往会跟上一个string类型会将string的html解析出来并且进行渲染

当服务器返回的url是一个以a标签返回的，那么我们可以使用v-html指令（v-html=’url‘）

5、v-text：跟mustache语法有些相似，但是只能接受一个string类型

6、v-pre:用于跳过这个元素和它子元素的编译过程，直接显示原本的mustache语法

7、v-show用法及与v-if的区别

用于决定一个元素是否渲染

v-if和v-show都可以决定一个元素是否渲染，那么开发中我们如何选择呢？

v-if当条件为false时，压根不会有对应的元素在DOM中。

v-show当条件为false时，仅仅是将元素的display属性设置为none而已。

当需要在显示与隐藏之间切片很频繁时，使用v-show 当只有一次切换时，通过使用v-if

注意事项！！！：

因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新。 Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。

（1）、push()向最后面添加元素

btnClick() {
                // 1.push方法
                // this.letters.push('aaa')
                // this.letters.push('aaaa', 'bbbb', 'cccc')}

（2）、pop()删除最后面的元素

btnClick() {
                // 2.pop(): 删除数组中的最后一个元素
                // this.letters.pop();
}

（3）、shift()删除第一个元素

btnClick() {
       // 3.shift(): 删除数组中的第一个元素
                // this.letters.shift();
}

（4）、unshift()在最前面添加元素

btnClick() {

                // 4.unshift(): 在数组最前面添加元素
                // this.letters.unshift()
                // this.letters.unshift('aaa', 'bbb', 'ccc')
}

（5）、splice()可以删除替换增加元素（由第二个参数来决定功能）

btnClick() {
 // 5.splice作用: 删除元素/插入元素/替换元素
                // 删除元素: 第二个参数传入你要删除几个元素(如果没有传,就删除后面所有的元素)
                // 替换元素: 第二个参数, 表示我们要替换几个元素, 后面是用于替换前面的元素
                // 插入元素: 第二个参数, 传入0, 并且后面跟上要插入的元素
                // splice(start)
                // splice(start):
                //this.letters.splice(1, 3, 'm', 'n', 'l', 'x')
                // this.letters.splice(1, 0, 'x', 'y', 'z')
}

（6）、sort()排序数组

btnClick() {
// 5.sort()
                // this.letters.sort()
}

（7）、reverse()反转数组

btnClick() {
                // 6.reverse()
                // this.letters.reverse()
}

以上七个方法都是响应式的方法！

注意！！！！下面这段代码是通过索引值也可以更改数组中的元素，但是并不是响应式的，所以会导致数组已经被更换，但是页面中无法显示被更换的结果

// 注意: 通过索引值修改数组中的元素
                // this.letters[0] = 'bbbbbb';
                // this.letters.splice(0, 1, 'bbbbbb')



//但是用下面这个set的话页面可以同步刷新
                // set(要修改的对象, 索引值, 修改后的值)
                // Vue.set(this.letters, 0, 'bbbbbb')