Vue语法和标签的入门使用教程

2025-07-01 12:16:02

前言：

最近两周一直在忙于公司业务的学习，一直没有时间进行总结，作为后端开发人员来说，需要了解一些前端的知识，因此今天把最近复习的Vue的知识总结了一下，希望能加深总结的印象以及帮助到各位大佬。

设置代码片段

首先从比较基本的设置开始说起。

所谓的设置代码片段，就是可以方便我们的开发。具体的设置，点击文件，首选项，选择配置用户代码片段，新建全局代码片段文件，将下面的代码复制到大括号内即可使用。

{
 "vue html": {
 "scope": "html",
 "prefix": "vuehtml",
 "body": [
 "<!DOCTYPE html>",
 "<html lang=\"en\">",
 "",
 "<head>",
 "    <meta charset=\"UTF-8\">",
 "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
 "    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
 "    <title>Document</title>",
 "</head>",
 "",
 "<body>",
 "    <div id=\"app\">",
 "",
 "    </div>",
 "    <script src=\"vue.min.js\"></script>",
 "    <script>",
 "        new Vue({",
 "            el: '#app',",
 "            data: {",
 "                $1",
 "            }",
 "        })",
 "    </script>",
 "</body>",
 "",
 "</html>",
 ],
 "description": "my vue template in html"
 }
}

设置完成后，新建HTML文件，输入vuehtml即可使用

Vue的指令

v-bind指令

v-bind是单向数据绑定，这个指令一般用在标签属性里面，用来获取值，接下来用案例解释

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
      <h1 v-bind:title="message">
         {{question}}
      </h1>
      <!--简写-->
      <h2 :title="message">
      {{content}}
      </h2>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                question:"现在是几点来着?",
                message:"现在是:" + new Date().toLocaleString()
            }
        })
    </script>
</body>
</html>

输出

v-model指令

v-model指令是双向绑定，当一边发生比变化时，另一边也会发生变化。相应的测试代码如下，感兴趣的小伙伴儿们可以测试一些哦。

<body>
    <div id="app">
      <input type="text" v-bind:value="key.value"/>
      <input type="text" v-model="key.value"/>
      <p>{{key.value}}</p>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data:{
                key:{
                  value:"xiaowei"
                }
            }
        })
    </script>
</body>

v-on标签

v-on标签用于绑定事件，v-on:click表示处理鼠标点击的事件，事件调用的方法应写在methods节点中。案例如下:

<body>
    <div id="app">
      <button v-on:click="query1()">测试相貌</button>
      <!--第二种写法-->
      <button　＠click="query2()">测试相貌2</button>

    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
               key:{
                 value:"xiaowei"
               }
           },
           methods:{
            query1(){
           alert("你是帅哥")
            },
            query2(){
               alert("你是靓仔")
               }
           }

            }
        )
    </script>
</body>

修饰符

修饰符 (Modifiers) 是以“.”指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

即阻止事件原本的默认行为，案例测试如下：

<body>
    <div id="app">
<form action="save" v-on:submit.prevent="Submit">
    <label for="username">
        <input type="text" id="username" v-model="user.username"/>
        <button type="submit">保存</button>
    </label>
</form>
    </div>
    <script>
        new Vue({
            el: '#app',
            data:{
               user:{}
            },
            methods: {
                     Submit() {
                    if (this.user.username) {
                      alert('提交表单')
                    } else {
                           alert('请输入用户名')
        }
    }
}
          }
        )
    </script>
</body>

v-if和v-show标签

首先根据小案例演示v-if和v-else的用法

<body>
   <div id="app">
      <input type="checkbox" v-model="ok">你长得帅吗</input>
      <h1 v-if="ok">帅!</h1>
      <h1 v-else>非常帅!</h1>
   </div>
    <script>
      new Vue({
         el:"#app",
      data:{
         ok:true
      }
      })

    </script>
</body>

v-if和v-show的用法很相似，它们的区别是什么呢？

这是前端面试中经常被问到的一个问题。

1.v-show性能比v-if好一点。这是因为v-show在编译时只编译一次，而v-if会不停的创建，销毁。
2.v-show经常用于控制css样式，而v-if控制的是DOM，添加或删除DOM元素，所以相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
3.一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-for标签

v-for为循环指令，可以用于遍历等。案例如下：

在div中加入以下代码，代表n从0开始遍历。

<ul>
    <li v-for="n in 10">{{ n }} </li>
</ul>

页面结果：

遍历对象的形式如下：

<body>
   <div id="app">
   <table>
      <tr v-for="user in userList">
         <td>{{user.id}}</td>
         <td>{{user.name}}</td>
      </tr>
   </table>
   </div>
    <script>
      new Vue({
         el:"#app",
         data: {
    userList: [
        { id: 1, name: '荔枝' },
        { id: 2, name: '油饼' },
        { id: 3, name: '虾头'},
        { id: 4, name: '树枝'}]}
      })
    </script>
</body>

输出：

总结

到此这篇关于Vue语法和标签使用的文章就介绍到这了,更多相关Vue语法和标签使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Vue实现多标签选择器

本文实例为大家分享了Vue实现多标签选择器展示的具体代码,供大家参考,具体内容如下实现效果实现代码 <html lang="en"> <head> <title>Document</title>  <link rel="stylesheet" href="static/element-ui/index.css" > <script s
vue3 封装自定义组件v-model的示例

首先要注意 vue3中 v-model 默认绑定的变量名变了,从原理的 value 改成了 modelValue,如果要改变变量的值,要执行一个事件 this.$emit("update:modelValue", value); <template> <div class="inline"> <input :type="password ? 'password' : 'text'" ref="input&q
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题

Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下面给大家介绍Vue.js表单标签中的单选按钮.复选按钮和下拉列表的取值问题. 摘要: 表单标签取值问题中,单选按钮.复选按钮和下拉列表都比较特殊.这里总结一下vue.js中关于单选按钮.复选按钮和下拉列表不同情况的取值特殊性问题. 表单标签取值问题中,单选按钮.复选按钮和下拉列表都比较特殊.这里总结一下vue.js中关于单选按钮.复选按钮和下拉列表不同情况的取值特殊性问题. 一.单选按钮单选按钮:单选按钮用
vue实现点击当前标签高亮效果【推荐】

实现点击按钮使当前按钮高亮,其他按钮复原的效果实现思路 •在data中定义即将渲染的数据,及active data() { return { wpList: [ { name: '食品饮料' }, { name: '鲜花' }, { name: '蛋糕' }, { name: '水果生鲜' }, { name: '服装鞋帽' }, { name: '其它' } ], active:'' } } ... •定义高亮的标签类名 .active { background: #fd7522; bord
vue中v-for循环给标签属性赋值的方法

1.给每个按钮添加class的属性值以及icon图标属性值,通过v-for实现自动添加样式,发现属性值无法显示,切记在属性前加上v-bind <html> <head> <meta charset="utf-8"> <title>v-for在线测试实例</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"> &
vue3组件中v-model的使用以及深入讲解

目录 v-model input中使用双向绑定数据组件中的v-model 其他写法总结 v-model input中使用双向绑定数据 v-model在vue中我们经常用它与input输入框的输入值进行绑定,简单的实现原理大家也应该都知道通过v-bind绑定value值及结合@input输入事件动态改变绑定的value值来实现双向绑定,如下vue3实现代码: <template> <input type="text" :value="tryText&q
vue模板语法-插值详解

1.文本数据绑定最常见的形式就是使用'Mustache'语法(双打括号)的文本插值: <span>message:{{msg}}</span> 使用v-once指令,也能执行一次性的插值,当主句改变时,插值处的内容不会更新. 但请留心这回影响到该节点上所有的数据绑定: <span v-once>this will nver change:{{message}}</span> 2.纯html 双打括号会将数据解释为纯文本,而非html.为了输出html可以使
Vue语法和标签的入门使用教程

目录前言: 设置代码片段 Vue的指令 v-bind指令 v-model指令 v-on标签修饰符 v-if和v-show标签 v-for标签总结前言: 最近两周一直在忙于公司业务的学习,一直没有时间进行总结,作为后端开发人员来说,需要了解一些前端的知识,因此今天把最近复习的Vue的知识总结了一下,希望能加深总结的印象以及帮助到各位大佬. 设置代码片段首先从比较基本的设置开始说起. 所谓的设置代码片段,就是可以方便我们的开发.具体的设置,点击文件,首选项,选择配置用户代码片段,新建全局代
Vue中transition标签的基本使用教程

目录 transition 标签配合 animation 配合 transition transition-group 标签动画库 animate.css 总结 transition 标签 transition 标签:Vue 的内置动画标签作用:在 [插入] / [更新] / [移除] DOM 元素时,在合适的时候给元素添加样式类名(配合 CSS 样式使用,实现动画效果) 注意事项 transition 标签只能包含 1 个元素:如果里面写了多个元素,则只生效第一个 transition
vue中keep-alive组件的入门使用教程

一.问题触发并解决最近自己在写vue练习,内容相对简单,主要是对vue进行熟悉和相关问题发现,查漏补缺.简单说下练习的项目内容及问题的产生: 练习使用的vue-cli 2.0脚手架搭建,内容就是简单的仿音乐播放app,功能也相对简单,大体就是单页router切换各个专辑列表,点击进入专辑内容页面,单击歌曲名称可以进行播放.暂停.下一曲功能. 简单的背景介绍完了,说下问题产生的情形:在从整个歌曲列表页点击跳转到单个专辑列表页,然后点击返回按钮返回歌曲列表页时,页面保存了之前的浏览位置,但是接口重
Vue.js 十五分钟入门图文教程

TypeScript 为 JavaScript 带来静态类型检查,让 JavaScript 编写中大型应用的时候可以应用工具来避免部分错误. Vue 很早就支持 TypeScript,但配置起来比较麻烦,幸好有了 Vue CLI 3.0.安装好 vue-cli 之后,使用 vue create 项目名称来创建项目,vue 脚本手架自动创建以项目名称命名的目录. vue-cli 3 生成的项目结构比较科学,尤其是通过 components 和views 将作为控件的组件和作为页面的组件分离开来,
Vue全家桶入门基础教程

1. Vue概述 Vue(读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用. 渐进式: 声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建可以使用其中的一个或者多个优点: 易用:熟悉HTML,CSS.JavaScript知识后,可快速上手Vue 灵活:在一个库和一套完整框架之间自如伸缩高效:20kB运行大小,超快虚拟DOM 2. Vue的基本使用 2.1 传统开发模式对比 /
Vue.js 60分钟快速入门教程

vuejs是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM.它通过一些特殊的HTML语法,将DOM和数据绑定起来.一旦你创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相应地更新. 当
Vue.js快速入门实例教程

什么是vue vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 一.基本结构 index.html代码: <script src="../vue.js"></script> <div id="app"> {{ message }} </div> <script src="app.js"></script> <
Vue + OpenLayers 快速入门学习教程

Openlayers 是一个模块化.高性能并且功能丰富的WebGIS客户端的JavaScript包,用于显示地图及空间数据,并与之进行交互,具有灵活的扩展机制. 简单来说,使用 Openlayers(后面简称ol) 可以很灵活自由的做出各种地图和空间数据的展示.而且这个框架是完全免费和开源的. 前言本文记录 Vue 使用 OpenLayers 入门,使用 OpenLayers 创建地图组件,分别使用 OpenLayers 提供的地图和本地图片做为地图. Overview OpenLayers
IDEA入门级使用教程你居然还在用eclipse?

参考链接亲测试以下版本成功激活附激活教程. idea下载链接(对应版本号下载): https://www.jetbrains.com/idea/download/other.html IDEA 2020.2.3版本 IntelliJ IDEA 2020.2.3永久激活码(亲测有效) IDEA 2020.2.2版本 IDEA2020.2.2激活与IntelliJ IDEA2020注册码及IntelliJ全家桶激活码的详细教程(有你足矣) IntelliJ IDEA 2020.1版本 IDEA 2
FluentMybatis快速入门详细教程

使用fluent mybatis可以不用写具体的xml文件,通过java api可以构造出比较复杂的业务sql语句,做到代码逻辑和sql逻辑的合一. 不再需要在Dao中组装查询或更新操作,在xml或mapper中再组装参数. 对底层数据表关联关系的处理,我们总是绕不开什么一对一,一对多,多对多这里比较烦人的关系. 业界优秀的ORM框架也都给出了自己的答案,简单来说就以下几种方式: hibernate和JPA对开发基本屏蔽了底层数据的处理,只需要在model层设置数据级联关系即可.但这种设置也往往