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 ,所以能被遵循规范的浏览器和 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的模板语法用的是哪个web模板引擎的吗?说说你对这模板引擎的理解
[vue] 你知道vue的模板语法用的是哪个web模板引擎的吗?说说你对这模板引擎的理解 模板引擎: 负责组装数据,以另外一种形式或外观展现数据. 优点: 可维护性(后期改起来方便): 可扩展性(想要 ...
- 【Vue】—Vue的模板语法
[Vue]-Vue的模板语法 在template中写HTML时,如果需要渲染变量或者表达式,可以使用{{ }}形式来渲染,这个{{ }}就是模板语法,可以把变量或者表达式的结果渲染出来. 模板语法渲染 ...
- Vue的模板语法学习
模板语法 1.插值 a.文本 数据绑定最常见的形式就是使用 "Mustache" 语法(双大括号)的文本插值 我们在普通插值的时候无论何时,绑定的数据对象上 msg 属性发生了改变 ...
- 前端之Vue:模板语法、指令、Style 和 Class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制
目录 一. 模板语法 插值语法 二. 指令 2.1 文本指令 v-html:让HTML渲染成页面 v-text:标签内容显示js变量对应的值 v-show:显示/隐藏内容 v-if:显示/删除内容 2 ...
- Vue2(一):初识Vue、模板语法、数据绑定、el和data的两种写法、MVVM、数据代理、事件
Vue2学习笔记:第一章 一.初识Vue 1. Vue的特点 2. Vue实例中的el和data 3.总结 二.模板语法 1.插值语法 2.指令语法 三.数据绑定 1.单向数据绑定(v-bind) 2 ...
- Vue.js 模板语法
模板语法 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 H ...
- Vue 3 模板语法
模板语法 实验介绍 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层应用实例的数据.所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 ...
- 四、Vue.js 模板语法
本章概要 应用程序实例 插值 指令 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将呈现的 DOM 绑定至底层组件实例的数据.所有的 Vue.js 模板都是有效的 HTML ,可以 ...
- 从零学习Vue - 02模板语法、el与data两种写法、mvvm模型、数据代理
root容器里的代码被称为模板,有了模板会有特殊的模板语法.Vue模板中语法有两大类,一类是插值语法,另一类是指令语法. 插值语法 功能:用于解析标签体内容.写法:{{xxx}},xxx为js表达式, ...
最新文章
- 你知道吗?du 和 df 的统计结果为什么不一样
- JavaScript跨域方法
- [DOM Event Learning] Section 2 概念梳理 什么是事件 DOM Event
- 小红书最新用户量数据_小红书估值高达60亿美元?小红书超过蘑菇街了吗?
- 怎样把照片中的头像扶正_这些圣诞壁纸也太好看了吧,还能自制圣诞帽头像,换它...
- chrome jquery ajax请求,jQuery.ajax在Chrome中无法正常执行的解决办法
- Android之MediaProjectionManager实现手机截屏总结
- 深入理解 nvidia-docker 2.0
- java的类的设计_Java 类设计技巧
- Qml文件的两种加载方式
- TCP协议以及TCP的三次握手和四次挥手
- 51单片机蜂鸣器演奏《小苹果》C语言程序,C利用51单片机蜂鸣器演奏音乐
- 计算机实验室安全员责任书,实验室安全目标责任书
- 嵌入式软件开发之程序架构(一)
- MS08067 Web安全进阶实战班-第一期 强势来袭~
- 正则表达式re中的group和groups
- [转载]STED和STORM、PALM
- 微信|QQ扫码登录网页版二维码失效问题解决方案 网站无法访问PC网页版如何解决 安卓软件历史版本下载 FV fooview悬浮球帮助教程
- 联想小新14pro锐龙版网卡rtl8852ae在ubunru18.04装网卡驱动
- 2012年重要的软件开发发展
热门文章
- 当你输入信用卡号码的时候,有没有担心输错了而造成损失呢?其实可以不必这么担心,因为并不是一个随便的信用卡号码都是合法的,它必须通过Luhn算法来验证通过。 该校验的过程:1、从卡号最后一位数字开始,逆
- c实用技巧:纯c对于excel数据表的处理
- spacemacs email layer
- halcon之测量和拟合
- Ubuntu18.04下安装git记录
- python 3 日历模块
- Java、JSP物流车辆调度系统
- ad16以上的版本中怎么裁剪PCB板
- Ubuntu桌面出现Accept clipboard from viewers,Send clipboard to viewers,Send primary selection to vi等三行错误时
- 计算机网络 之 DNS (Domain Name System)域名服务器