Vue的模板语法以及实战案例

2024-12-24 07:21:21

前言

相信模板语法大家多少都有所接触，例如百度模板引擎、ejs 等等。同样 Vue.js 也使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析，通俗的讲 Vue 模板语法就是在使用 Vue.js 开发时，你可以写在 HTML 元素上的操作语法，让你开发更高效，例如：绑定样式，循环出元素列表等。

一、双大括号表达式

在前端的发展历程中，为了提高开发效率，诞生了很多模板引擎，方便渲染元素或者绑定数据，很多引擎模板都采用 {{双大括号表达式}} 的语法进行插值。同样 Vue.js 也借鉴了 Angular.js 的双花括号的方式，进行向页面输出数据和调用对象方法。让我们感受一下双大括号表达式，在 IED 中新建一个.html 后缀文件，引入 Vue.js，输入以下代码，运行（open with Preview 或 Mini Browser）

<!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></title>
    <!-- 通过cdn方式引入 vue.js -->
    <script src="https://cdn.bootcss.com/vue/2.5.10/vue.min.js"></script>
  </head>
  <body>
    <!-- 数据双向绑定 -->
    <div id="app">
      <input type="text" v-model="msg" />
      <p>{{msg}}</p>
    </div>
    <script>
      var app = new Vue({
        el: "#app", //el: 挂载点

        data: {
          //data:数据选项

          msg: "hello",
        },
      });
    </script>
  </body>
</html>

双大括号中的 {{msg}}，绑定至底层 Vue 实例的数据，在浏览器中就被渲染成实例 data 选项中 msg 的值。

运行结果：

二、插值

上面初步了解了双大括号语法，接下来我们学习一下更多的插值方式。

2.1文本

在 Vue.js 中数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<div id="app">msg：{{msg}}</div>

双大括号中的值将会被替代为对应 data 对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。

但是通过使用 v-once 指令你也能执行一次性地插值，当数据 改变时，插值处的内容 不会更新。但是你需要注意一下，该元素节点下面其他数据的绑定，数据改变，内容也不会更新，所以，注意代码块的划分。

<p v-once>msg：{{msg}}</p>

2.2 原始 HTML

上面的双大括号表达式会将数据解释为普通文本，即使你的数据为 HTML 元素，也不会渲染成对应的标签元素，只能渲染成普通文本，而非 HTML 代码，例子：

<!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" />
    <!-- 通过cdn方式引入 vue.js -->
    <script src="https://cdn.bootcss.com/vue/2.5.10/vue.min.js"></script>
</head>
<body>
<!-- 数据绑定 -->
<div id="app">
    <p>{{msg}}</p>
</div>
<script>
    var app = new Vue({
        el: "#app", //el: 挂载点
        data: {
            //data:数据选项
            msg: "<h1>hello world</h1>",
        },
    });
</script>
</body>
</html>

运行结果：

上面明明我们写的是 HTML 标签，为什么没渲染出来，那就是因为双大括号表达式会将数据解释为普通文本。有的读者会问，有的需求就是要把标签渲染出来，那么我们就需要认识另外一个指令 v-html，使用它我们就能将它正确渲染，试一试，代码：

<!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" />
    <!-- 通过cdn方式引入 vue.js -->
    <script src="https://cdn.bootcss.com/vue/2.5.10/vue.min.js"></script>
</head>
<body>
<!-- v-html 渲染html元素-->
<div id="app" v-html="msg"></div>
<script>
    var app = new Vue({
        el: "#app", //el: 挂载点
        data: {
            //data:数据选项
            msg: "<h1>hello world</h1>",
        },
    });
</script>
</body>
</html>

2.3 特性

双大括号语法不能作用在 HTML 特性（标签属性）上，需要对标签属性操作，应该使用 v-bind 指令：

<div v-bind:class="syl-vue-course"></div>

HTML 标签属性为布尔特性时，它们的存在表示为 true，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>vue</title>
    <!-- 通过cdn方式引入 vue.js -->
    <script src="https://cdn.bootcss.com/vue/2.5.10/vue.min.js"></script>
</head>
<body>
<!-- 布尔特性绑定-->
<div id="app">
    <input type="checkbox" v-bind:checked="isChecked" />
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            isChecked: false, // isChecked是否选中boolean
        },
    });
</script>
</body>
</html>

运行结果：

注意：如果 isChecked 的值是 null、undefined 或 false，则 checked 特性甚至不会被包含在渲染出来的 <input> 元素中，我们将 data 中的 isChecked 值改为 null

var app = new Vue({ el:'#app', data:{ isChecked:null // isChecked是否选中 } })

2.4 javascript 表达式

上面，我们只进行了绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持，感受强大的模板语法力量吧！例子：

<!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>vue</title>
    <!-- 通过cdn方式引入 vue.js -->
    <script src="https://cdn.bootcss.com/vue/2.5.10/vue.min.js"></script>
  </head>
  <body>
    <!-- javascript表达式-->
    <div id="app">
      <!-- 运算符 -->
      <p>num + 24 = {{num + 24}}</p>
      <!-- 三元表达式 -->
      <p>Are you ok? {{ok ? 'I am ok !':'no'}}</p>
      <!-- 对象方法直接调用 -->
      <p>名字倒过来写：{{name.split('').reverse().join('')}}</p>
      <!-- 属性值运算操作 -->
      <p v-bind:class="'col'+colNum">xnm</p>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          num: 20,
          ok: true,
          name: "小牛马",
          colNum: "12",
        },
      });
    </script>
  </body>
</html>

运行结果：

三、指令

指令 (Directives) 是带有 v- 前缀的特殊特性。

3.1 参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 特性，在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定，例子：

<!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>vue</title>
    <!-- 通过cdn方式引入 vue.js -->
    <script src="https://cdn.bootcss.com/vue/2.5.10/vue.min.js"></script>
</head>
<body>
<!-- 指令 参数-->
<div id="app">
    <a v-bind:href="url">小牛马</a>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            url: "https://www.lanqiao.cn",
        },
    });
</script>
</body>
</html>

另外一个例子，v-on 指令，用于监听 DOM 事件，例子：

<!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>vue</title>
    <!-- 通过cdn方式引入 vue.js -->
    <script src="https://cdn.bootcss.com/vue/2.5.10/vue.min.js"></script>
</head>
<body>
<!-- 指令 参数-->
<div id="app">
    <p>我叫：{{name}}</p>
    <!-- handleClick 使我们在实例 methods 中写的方法 -->
    <button v-on:click="handleClick">点我</button>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            name: "小牛马",
        },
        methods: {
            //实例方法对象
            handleClick: function () {
                this.name = this.name.split("").reverse().join("");
            },
        },
    });
</script>
</body>
</html>

运行结果：

3.2 动态参数

上面属性或者事件我们都是写死的，其实在 Vue 它也可以是动态的。

<!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>vue</title>
    <!-- 通过cdn方式引入 vue.js -->
    <script src="https://cdn.bootcss.com/vue/2.5.10/vue.min.js"></script>
</head>
<body>
<!-- 指令 动态参数-->
<div id="app">
    <p>我叫：{{name}}</p>
    <button v-on:[event]="handleClick">点我</button>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            name: "实验楼",
            event: "click",
        },
        methods: {
            handleClick: function () {
                this.name = this.name.split("").reverse().join("");
            },
        },
    });
</script>
</body>
</html>

event 此时的值为click，那我们点击按钮时就会触发事件回调，运行结果和上面一样。

3.3 修饰符

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定，大致分为三类，后面课程我们会一一接触到：

事件修饰符
按键修饰符
系统修饰符

例如，事件修饰符中的.prevent修饰符和原生 event.preventDefault() 效果一样，可以阻止事件默认行为，在表单中点击提交按钮，就会发生页面跳转，但是使用了 .prevent 就不会发生跳转，例如：

<!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>vue</title>
    <!-- 通过cdn方式引入 vue.js -->
    <script src="https://cdn.bootcss.com/vue/2.5.10/vue.min.js"></script>
</head>
<body>
<!-- 指令 修饰符-->
<div id="app">
<!--    <form action="/" v-on:="submit">-->
    <form action="/" v-on:submit.prevent="submit">
        <button type="submit">提交</button>
    </form>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {},
        methods: {
            submit: function () {
                console.log("成功提交！");
            },
        },
    });
</script>
</body>
</html>

没有加修饰符，发生默认跳转，运行效果：

使用了 .prevent ，阻止了默认跳转，运行结果：

四、指令缩写

v- 是 Vue.js 中特定的标志，用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为时，v- 前缀很有帮助，但是频繁使用到，也会让人感觉不到代码的简洁之道，就会感到不是太人性化。同时，在构建由 Vue 管理所有模板的单页面应用程序时，v- 前缀也变得没那么重要了。因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

4.1 v-bind

上面例子中我们使用了 v-bind 绑定属性

<a v-bind:href="url">小牛马</a>

我们可以简写为：

<a :href="url">小牛马</a>

同样的使用 v-bind 绑定的其他属性也可以简写：

v-bind:class="className" 简写为 :class="className" v-bind:value="myValue" 简写为
:value

4.2 v-on

上面 v-bind 指令提供简写，同样 v-on 指令也提供简写，但是与 v-bind 有一些差异，v-on: 使用 @ 简写。

<!-- 完整语法 -->
<button v-on:click="handleClick">点我</button>
<!-- 缩写 -->
<button @click="handleClick">点我</button>

总结

本文讲解 Vue.js 模板语法，了解双大括号表达式，以及模板插值，模板上简单的指令应用，指令的缩写模式等，相信大家对 Vue.js 已经有了初步了解。

下文讲解Vue的计算属性和侦听属性与过滤器

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

Vue.js的模板语法详解

Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统. 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上. 使用"Mustache"语法 (即用双大括号包裹) 的文本插值: <span>Message: {{ msg }}</span>
Vue.js项目模板搭建图文教程

前言从今年(2017年)年初起,我们团队开始引入「Vue.js」开发移动端的产品.作为团队的领头人,我的首要任务就是设计整体的架构 .一个良好的架构必定是具备丰富的开发经验后才能搭建出来的.虽然我有多年的前端开发经验,但就「Vue.js」来说,仍然是个新手.所幸「Vue.js」有一个配套工具「Vue-CLI」,它提供了一些比较成熟的项目模板,很大程度上降低了上手的难度.然而,很多具体的问题还是要自己思考和解决的. 项目划分我们公司的H5产品大部分是嵌套在手机客户端里面的页面.每个项目的功能
VUE 自定义组件模板的方法详解

本文实例讲述了VUE 自定义组件模板的方法.分享给大家供大家参考,具体如下: 先说下需求吧,因为客户的用户群比较大,如果需求变动,频繁更新版本就需要重新开发和重新发布,影响用户的体验,考虑到这一层就想到,页面展示效果做动态可配,需求更新时,重新配置一份模板录入到数据库,然后根据用户选择的模板进行展示. 关于页面展示做的动态可配,我是参考vue的Component组件方式,开始时可能会遇到组件定义后不能加载的情况,并在控制台如下错误:You are using the runtime-only b
vue模板语法-插值详解

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

1.第一种使用script标签 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <di
探讨Vue.js的组件和模板

摘要: 指令是Vue.js中一个重要的特性, 主要提供了一种机制将数据的变化映射为DOM行为. 那什么交数据的变化映射为DOM行为, Vue.js是通过数据驱动的, 所以我们不会直接去修改DOM结构, 不会出现类似$('ul').append('<li>one</li>')这样的操作, 当数据变化时,指令会一句设定好的操作对DOM进行修改, 这样就可以只关注数据的变化, 而不用去管理DOM的变化和状态, Vue的内置指令 1. v-bind v-bind主要用于绑定DOM元素属性(
Vue的模板语法以及实战案例

目录前言一.双大括号表达式二.插值 2.1文本 2.2 原始 HTML 2.3 特性 2.4 javascript 表达式三.指令 3.1 参数 3.2 动态参数 3.3 修饰符四.指令缩写 4.1 v-bind 4.2 v-on 总结前言相信模板语法大家多少都有所接触,例如百度模板引擎.ejs 等等.同样 Vue.js 也使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规
Vue.js 模板语法和数据绑定

目录模板语法数据绑定 el的两种写法 data的两种写法模板语法 Vue 模板语法有两大类插值语法: 功能:用于解析标签体内容写法:{{xxx}},xxx是js表达式,可以读取到 data 中属性指令语法: 功能:用于解析标签(标签属性.标签体内容.绑定事件...) 写法:v-bind:href="xxx" 或简写为 :href="xxx",xxx是js表达式,可以读取到 data 中属性 <!DOCTYPE html> <html l
vue父子模板传值问题解决方法案例分析

本文实例讲述了vue父子模板传值问题解决方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <one></o
浅谈VUE uni-app 模板语法

1.v-bind(简写 :) 组件属性中要使用data中定义的数据变量,或组件属性要使用表达式,需用v-bind指定简写 : 2.v-on(简写@) 监听DOM事件 click.stop 可以阻止事件穿透 3.v-model 数据双向绑定 4.v-if,v-else-if,v-else 条件判断,决定某个内容是否挂载 5.v-show 条件判断,决定某个内容是否显示 6.三元运算符 7.空标签 block 8.v-for:列表渲染 <template> <view v-bind:cla
vue中拆分组件的实战案例

目录一.组件化诞生的历史二.为什么业务组件越开发越难维护人的问题技术问题 2.1 项目现状 2.2 理想目标三.举一个实际的例子 3.1 需求背景 3.2 开发之前: 前端设计文档数据流向图目录结构逻辑控制拆分的原则 3.3 受控组件和非受控组件 3.4 开发进行: 逻辑变量和UI变量四.持续的优化五.可能的问题五.实践是学习前端的捷径总结组件化是一种思维的表现,这种技能映射到人的本质是,一个人是否有能力把一个复杂的问题拆解.简单化的能力. 一.组件化诞生的历史我们
Vue基础之MVVM,模板语法和数据绑定

目录 1. Vue概述 Vue官网 MVVM架构模式 Vue简介 2. 初识Vue 3. 模板语法 1.插值语法: 2.指令语法: 4. 数据绑定 5. el与data的两种写法 1.el有2种写法new 2.data有2种写法 3.一个重要的原则: 总结 1. Vue概述 Vue官网英文官网: https://vuejs.org/ 中文官网: https://cn.vuejs.org/ MVVM架构模式 MVVM简介 MVVM 由 M:Model 模型,V:View 视图 ,VM:ViewM
Vue.js学习笔记之常用模板语法详解

本文介绍了Vue.js 常用模板语法,分享给大家,具体如下: 一.文本渲染 Vue支持动态渲染文本,即在修改属性的同时,实时渲染文本内容.同时为了提高渲染效率,也支持只渲染一次,即第一次渲染出文本后,文本内容不再跟随属性值的变化而变化. 实时渲染 <div class="row"> <h2>文本 - 实时渲染</h2> <input type="text" v-model="msg" class=&quo
Vue模板语法中数据绑定的实例代码

1.单项数据绑定 <div id="di"> <input type="text" :value="input_val"> </div> <script> var app = new Vue({ el: '#di', data: { input_val: 'hello world ' } }) </script> 通过浏览器 REPL 环境可以进行修改 app.input_val = '