Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数,结合相应系统,在应用状态改变时,Vue 可以智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

一、插值

1、文本

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

<p>{{message}}</p>

使用 v-once 指令,可以执行一次插值,后面如果有改变,将不会更新:

<p v-once>{{message}}</p>

2、HTML

使用 v-html 指令,可以插入 HTML 代码,示例如下:

JS 代码:

new Vue({
el: '#app',
data: {
message: '<h1>一级标题</h1>'
}
})

未使用 v-html 指令时:

<div id="app">
<div>{{message}}</div>
</div> <!-- 运行结果 -->

使用 v-html 指令后:

<div id="app">
<div v-html="message"></div>
</div> <!-- 运行结果 -->

3、属性

使用 v-bind 指令,可以将 Mustache 语法作用在 HTML 属性中

CSS 代码:

.red{
color: red;
}

HTML 代码:

<div id="app">
<p v-bind:class="{'red': temp}">颜色</p>
</div>

JS 代码:

new Vue({
el: '#app',
data:{
temp: true
}
});

4、JavaScript 表达式

对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持

HTML 代码:

<div id="app">
<div>{{1+1}}</div>
<div>{{ok?'YES':'NO'}}</div>
<div>{{message.split('').reverse().join('')}}</div>
<div v-bind:id="'list-' + id">我的id是list-1</div>
</div>

JS 代码:

new Vue({
el: '#app',
data: {
ok: true,
message: 'RUNOOB',
id :
}
})

二、常用指令

指令是带有 v- 前缀的特殊属性,用于在表达式的值改变时,将某些行为应用到 DOM 上,常见的指令如下:

  • v-once

  • v-html

  • v-bind

使用 v-bind 指令绑定属性

<a v-bind:[attributeName]="url"> ... </a>

示例:

<a v-bind:href="url">...</a>

简写:

<a :href="url">...</a>
  • v-on

使用 v-on 指令绑定事件监听器

<a v-on:[eventName]="doSomething"> ... </a>

示例:

<a v-on:click="doSomething">...</a>

简写:

<a @click="doSomething">...</a>
  • v-text

使用 v-text 指令输出{{}}里的原文本

<span v-text="msg"></span>
<!-- 与下面效果相同 -->
<span>{{msg}}</span>
  • v-show

使用 v-show 指令来根据条件展示元素

HTML 代码:

<div id="app">
<h1 v-show="ok">一级标题</h1>
</div>

JS 代码:

new Vue({
el: '#app',
data: {
ok: true
}
}) // 运行结果
  • v-model

使用 v-model 指令在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值

HTML 代码:

<div id="app">
<input v-model="message">
<p>输入框: {{ message }}</p>
</div>

JS 代码:

new Vue({
el: '#app',
data: {
message: '',
}
}) // 运行效果:
  • v-if

使用 v-if 指令进行条件判断

HTML 代码:

<div id="app">
<p v-if="him">他</p>
<p v-if="her">她</p>
</div>

JS 代码:

new Vue({
el: '#app',
data: {
him: false,
her: true
}
}) // 运行结果:她

与 v-show 的区别在于:v-if 显示隐藏是将 dom 元素整个添加或删除,而 v-show 隐藏则是为该元素添加 display:none,dom 元素还在

  • v-else

可以用 v-else 指令给 v-if 添加一个 "else" 块

HTML 代码:

<div id="app">
<div v-if="him">他</div>
<div v-else>她</div>
</div>

JS 代码:

new Vue({
el: '#app',
data: {
him: false,
her: true
}
}) // 运行结果:她
  • v-else-if

v-else-if 在 2.1.0 新增,用作 v-if 的 else-if 块(可以链式的多次使用)

HTML 代码:

<div id="app">
<div v-if="him">他</div>
<div v-else-if="it">它</div>
<div v-else-if="me">我</div>
<div v-else>她</div>
</div>

JS 代码:

new Vue({
el: '#app',
data: {
him: false,
it:false,
me:false,
her: true
}
}) // 运行结果:她
  • v-for

使用 v-for 指令来进行循环

JS 代码:

new Vue({
el: '#app',
data: {
names: {
me: 'Winnie',
she: 'Honey',
we: 'Winney'
}
}
})

HTML 代码:

<div id="app">
<ul>
<li v-for="value in names">{{ value }}</li>
</ul>
</div> <!-- 运行结果 -->

可以提供第二个的参数为键名:

HTML 代码(注意 key 和 value 的位置):

<div id="app">
<ul>
<li v-for="(value,key) in names">{{key}}:{{value}}</li>
</ul>
</div> <!-- 运行结果 -->

如果有第三个参数,则第三个参数作为为索引

<div id="app">
<ul>
<li v-for="(value,key,index) in names">{{key}}:{{value}}--{{index}}</li>
</ul>
</div> <!-- 运行结果 -->

Vue模板语法与常用指令的更多相关文章

  1. Vue模板语法(二)

    Vue模板语法(二) 样式绑定  class绑定 使用方式:v-bind:class="expression" expression的类型:字符串.数组.对象 1.2 style绑 ...

  2. Vue模板语法(一)

    Vue模板语法 一.插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达 ...

  3. Vue模板语法(一)

    Vue模板语法 一 vue简介 Vue.js是一套构建用户界面的渐进式框架. 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与 ...

  4. Vue 模板语法 && 数据绑定

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  5. 初始Vue、Vue模板语法、数据绑定(2022/7/3)

    文章目录 1.Vue简介 1.1.Vue的安装使用 1.2.实际的运用案例 1.3.vue开发工具的使用(这个需要在浏览器中安装) 2.初始Vue 2.1 .基础知识 2.1 .代码实例 2.2 .页 ...

  6. Vue.js入门及其常用指令

    一.Vue框架 https://cn.vuejs.org/ 官网 前端领域有三大框架 Angular诞生于2009年,是由谷歌公司创建出来的框架: React诞生于2013年,是由facebook公司 ...

  7. 【Vue】浅谈Vue(一):从模板语法数据绑定、指令到计算属性

    写在前面 今年前端届比较有意思,从大漠穷秋发表文章比较angular和vue,继而致歉vue作者.社区,从谷歌辞去Angular Developer PM in China一职并且呼吁大家停止各种无谓 ...

  8. vue 的基本语法和常用指令

    什么是vue.js Vue.js是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于Wee ...

  9. vue 快速入门、常用指令(1)

    1. vue.js的快速入门使用 1.1 vue.js库的下载 vue.js是目前前端web开发最流行的工具库之一,由尤雨溪在2014年2月发布的. 官方网站 中文:https://cn.vuejs. ...

随机推荐

  1. 如何在 cmd 命令行中查看、修改、删除与添加环境变量

    Windows 和 linux 区别 一.查看所有环境变量的名称和值:Linux下:exportWindows下:set二.根据名称查该环境变量的值:Linux下:echo $环境变量名比如:echo ...

  2. python中的基本数据类型之 int bool str

    一.基本数据类型 1. int  ==>  整数.主要用来进行数学运算. 2.str  ==>  字符串.可以保存少量的数据,并进行相应的操作. 3.bool  =>  布尔值.判断 ...

  3. java集合框架collection(2)ArrayList和LinkedList

    ArrayList是基于动态数组实现的list,而LinkedList是基于链表实现的list.所以,ArrayList拥有着数组的特性,LinkedList拥有着链表的特性. 优缺点 ArrayLi ...

  4. 阿里云主机CentOS7设置远程连接MySQL数据库

    有一个困扰了我好久的问题,今天终于解决了. 看网上的答案只有一部分.今天把完整的发篇博客纪念一下下. 首先,连接阿里云主机并登录数据库, 1.添加一个Host mysql>select User ...

  5. Flume 简介及基本使用

    一.Flume简介 Apache Flume是一个分布式,高可用的数据收集系统.它可以从不同的数据源收集数据,经过聚合后发送到存储系统中,通常用于日志数据的收集.Flume 分为 NG 和 OG (1 ...

  6. js 数组去重方法

    var arr = ['a',1,2,3,'a',4,2,3,1,4,2,8,10,null,'a']; // 方法一 var newArr = [...new Set(arr)]; console. ...

  7. ZTree简单粗暴快速使用

    是什么:功能强大的树形插件 tip:查资料时痛苦的地方,自我改进 1.没有注明版本:版本不对应导致配置完成后各种无端的错误,特别难查找,运气好能找到英文的解答 2.没有写明配置文件,或者不指明配置文件 ...

  8. phpstorm+xdebug手机app调试

    1.安装过程网上搜一下全都是,这里省略. 2.由于debug调试需要去判断cookie中XDEBUG_SESSION,然后去调试.由于app接口请求没法去传,而且就算去传递也很麻烦,还要让app去改动 ...

  9. Java学习笔记——String类型转换

    一滴水里观沧海,一粒沙中看世界 ——一带一路欢迎宴致辞 上代码: package cn.stringtoobj; public class TypeConversion { public static ...

  10. IAR for STM8的简介、下载、安装及注册教程

    一.简介 1.关于IAR for STM8 IAR for STM8 是一个嵌入式工作平台,主要应用于STM8 系列芯片的开发,现在(2018年3.10版本)能够支持市面上所有的STM8芯片. 个人认 ...