vue3学习————第二天

最新推荐文章于 2025-11-09 00:17:31 发布

原创最新推荐文章于 2025-11-09 00:17:31 发布 · 98 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #前端 #javascript #vue.js #html #前端框架

vue3 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了Vue3中的模板语法，包括基本数据绑定、v-bind指令、表达式支持以及指令的使用，通过一个实现姓名添加和删除功能的实例，展示了如何在实际项目中运用这些概念。

一、模板语法

1、最基本的数据绑定形式是文本插值，使用大括号语法

<span>超级英雄：{{message}}</span>

双大括号标签会被替换为相应组件实例中message的值，同时message属性，每次更改时，同步更新。

2、双大括号不能在html 属性中使用，想要响应式的绑定一个attribute，应该使用v-bind指令，

<div  v-bind:id="dyid"></div>

v-bind指令将元素的id属性和组件的dyid属性保持一致，如果绑定的值是null或者undefined，那么该属性就会从渲染的元素上移除。

3、表达式的支持

在双大括号内部或者双引号内部可以包含表达式，而表达式的类型可以是

{{number+1}}
{{isLogin?'Yes':'No'}}
{{message.split('').reverse().join('')}}
<div :id="`list-${id}`"></div>

4、指令

<a v-on:click="dosomething"></a>可简写为<a @click="dosomething"></a>

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

二、vue指令案例

先上一张图，告诉我们最终这个小案例实现了什么

如图中所示，该案例实现了，在输入框中输入姓名，之后点击添加，该名字就会添加到列表的底部并显示出来，在点击删除我的时候，就会把相对应的一条记录删除掉。

<!DOCTYPE html>
<html lang="en">
<head>
  <!--  引入vue,不然vue无法正常使用-->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <title>vue3指令小案例</title>
</head>
<body>
  <div id="box">
    <div>请在下方输入你要添加的姓名：</div>
    &nbsp;&nbsp;&nbsp;<input type="text" name="" id=""  v-model="mytext">
    &nbsp;&nbsp;&nbsp;<button @click="add()">添加</button>
    <ul>
      <li v-for="(item,index) in namelist">{{item}}&nbsp;&nbsp;&nbsp;<button  @click="deleteme(index)">删除我</button></li>
    </ul>
  </div>
</body>
</html>

<script>
  let obj={
    data(){
      return{
        mytext:"",
        namelist:["小强","小盛","小兰"]
      }
    },
    methods:{
      //添加函数，添加一个名字进列表中并显示出来
      add(){
        this.namelist.push(this.mytext)
        this.mytext=""
      },
      //删除函数
      deleteme(index){
        this.namelist.splice(index,1   )
      }
    }
  }
  Vue.createApp(obj).mount("#box")
</script>

到这里，一个小案例就完成啦。

在这里补充一下js中splice()函数的用法：

举例：var str=[ "刘备","关羽","张飞" ]

str.splice(2,0,'赵云','曹操')

其中的参数的含义是：2代表的意思是在什么位置添加或者删除元素（必选）

0代表用不用删除元素，删除几个（必选）

后面的参数代表添不添加参数，添加几个写几个（可选）