Vue学习笔记之Vue基础语法
1. 概述
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
2. 插值
2.1. 文本
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
<div id="app">
{{message}}
</div>
整个页面完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue基础语法</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data:{
message: "Vue基础语法"
}
})
</script>
</body>
</html>
其显示结果如下：
Mustache 标签将会被替代为对应数据对象上 message property 的值。无论何时，绑定的数据对象上 message property 发生了改变，插值处的内容都会更新。我们在控制台改变message这个属性：
可以看到DOM即页面元素随机更新
通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：
<div id="app" v-once>
{{message}}
</div>
再次运行：
可以看到DOM即页面元素没有更新
2.2. 原始HTML
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：
<div id="app" v-html="message">
{{message}}
</div>
整个页面完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue基础语法</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" v-html="message">
{{message}}
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data:{
message: "<h1>Vue基础语法</h1>"
}
})
</script>
</body>
</html>
其显示结果如下：
可以看到message被解析为HTML，如果不加 v-html="message"：
则message被解析为普通文本
- 注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。反之，对于用户界面 (UI)，组件更适合作为可重用和可组合的基本单位
- 你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值——可参考XSS(跨站脚本攻击)详解
2.3. Attribute
Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令：
<div id="app">
<p v-bind:style="style">{{message}}</p>
</div>
整个页面完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue基础语法</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-bind:style="style">{{message}}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data:{
message: "Vue基础语法",
style: {
color: "red"
}
}
})
</script>
</body>
</html>
其显示结果如下：
指令的意思是：“将这个元素节点的style特性和Vue实例的style属性保持一致”
如果你再次打开浏览器的JavaScript控制台， 输入app.style={color: "bule"}，就会再一次看到这个绑定了style特性的HTML已经进行了更新:
对于布尔 attribute (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同，在这个例子中：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue基础语法</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button v-bind:disabled="isButtonDisabled">Button</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data:{
message: "Vue基础语法",
isButtonDisabled:{}
}
})
</script>
</body>
</html>
如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的 <button> 元素中:
2.4. 使用 JavaScript 表达式
迄今为止，在我们的模板中，我们一直都只绑定简单的 property 键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue基础语法</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message.split('').reverse().join('') }}
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data:{
message: "Vue 基础 语法",
}
})
</script>
</body>
</html>
其展示结果如下：
可以看到表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析
有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效：
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
- 注意：模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量
3. 指令
指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML attribute：
<p v-bind:style="style">{{message}}</p>
在这里 style 是参数，告知 v-bind 指令将该元素的 style attribute 与表达式 style 的值绑定
v-bind之前已经使用过，现在讲述一些常用的指令
3.1. v-if和v-else
显而易见的判断指令：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue基础语法</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-if="OK">OK</h1>
<h1 v-else>NO</h1>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data:{
message: "Vue 基础 语法",
OK: false
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue基础语法</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-if="OK">OK</h1>
<h1 v-else>NO</h1>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data:{
message: "Vue 基础 语法",
OK: true
}
})
</script>
</body>
</html>
3.2. v-else-if
组合判断：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue基础语法</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-if="type === 'A'">OK</h1>
<h1 v-else-if="type === 'B'">OK</h1>
<h1 v-else>C</h1>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data:{
message: "Vue 基础 语法",
type: 'A'
}
})
</script>
</body>
</html>
3.3. v-for
大致语法形式：
<div id="app">
<li v-for="(item,index) in items">
{{item.message}}---{{index}}
</li>
</div>
- 注：items是数组，item是数组元素迭代的别名
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue基础语法</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<li v-for="(item,index) in type">
{{item}}---{{index}}
</li>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data:{
type: ['A', 'B', 'C']
}
})
</script>
</body>
</html>
实现效果：
测试：在控制台输入app.type.push('D')，尝试追加一条数据，你会发现浏览器中显示的内容会增加一条D
3.4. v-on
v-on用于监听 DOM 事件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue基础语法</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button type="button" v-on:click="sayHi()">Hi</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data:{
type: ['A', 'B', 'C']
},
methods:{
sayHi:()=>{
console.log("Hi")
}
}
})
</script>
</body>
</html>
效果：
3.5. 动态参数
从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：
<a v-bind:[attributeName]="url"> ... </a>
这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data 属性为 attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue基础语法</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<a v-bind:[attributeName]='url'>
百度
</a>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data:{
attributename: "herf",
url: 'www.baidu.com'
}
})
</script>
</body>
</html>
实现效果：
- 注意：在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写：
<!--
在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
除非在实例中有一个名为“someattr”的 property，否则代码不会工作。
-->
<a v-bind:[someAttr]="value"> ... </a>
- 动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。
- 动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。例如：
<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>
4. 缩写
v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写
4.1. v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>
4.2. v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>
5. 参考资料
[1]模板语法 — Vue.js 中文文档 (bootcss.com)
[2]Vue课堂笔记/03基础语法指令.md · 卢泽华/Vue - 码云 - 开源中国 (gitee.com)
Vue学习笔记之Vue基础语法的更多相关文章
- 【Vue学习笔记】—— vue的基础语法 { }
学习笔记 作者:oMing vue v-on: 简称 @ <div id='app'> <button v-on:click='Show1'> </button> ...
- 【Vue学习笔记】—— vuex的语法 { }
学习笔记 作者:o_Ming vuex Vuex ++ state ++ (用于存储全局数据) 组件访问 state 中的全局数据的方式1: this.$store.state.全局数据 组件访问 s ...
- vue学习笔记(二)vue的生命周期和钩子函数
前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...
- vue学习笔记：vue的认识与特点与获取
Vue了解 Vue:读作 view Vue是一个渐进式框架 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...
- <学习笔记 之 JQuery 基础语法>
jQuery 库 - 特性 jQuery 是一个 JavaScript 函数库. jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaSc ...
- Vue学习笔记之Vue学习前的准备工作
0x00 起步 1.扎实的HTML/CSS/Javascript基本功,这是前置条件. 2.不要用任何的构建项目工具,只用最简单的<script>,把教程里的例子模仿一遍,理解用法.不推荐 ...
- vue学习笔记—bootstrap+vue用户管理
vue,读音view,简单易用的前端框架.特点如下: 1.一个mvvm的前端框架,内部做好了html中dom对象和后台用js语言定义的变量的双向绑定 2.中国人尤雨溪维护的个人项目,中文资料多,和go ...
- Java 学习笔记(1)——java基础语法
最近抽时间在学习Java,目前有了一点心得,在此记录下来. 由于我自己之前学过C/C++,而Java的语法与C/C++基本类似,所以这一系列文章我并不想从基础一点点的写,我想根据我已有的C/C++经验 ...
- VUE学习笔记之vue cli 构建项目
一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...
- Vue学习笔记之Vue组件
0x00 前言 vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来.组件的使用更使我们的项目解耦合.更加符合vue的设计思想MVVM. 那接下来就跟我看一下如何在一个Vue实例 ...
随机推荐
- 【Shell脚本案例】案例5：找出CPU/内存率占用高的进程
一.背景 找出占用高的进程 使用脚本编写找出占用CPU的进程 二.分析 1.查看进程 top 输入后按C,就可以列出 其他: ps aux 2.思路 awk进行排序,如top10 即ps aux |a ...
- Hexo博客搭建和简单部署
title: Hexo博客搭建和简单部署 date: 2020-03-02 12:00:00 categories: - [IT,博客] - [IT,软件,程序] - [IT,软件,搭建与配置] ta ...
- 编程思想的转变 软件开发目录规范 collections、time、datetime、 random模块
目录 编程思想的转变 软件目录开发规范(重要) 内置模块:collections模块 简介 具名元组 namedtuple 实现二维坐标系 实现扑克牌 队列与堆栈 collection.deque() ...
- 区块链,中心去,何曾着眼看君王?用Go语言实现区块链技术,通过Golang秒懂区块链
区块链技术并不是什么高级概念,它并不比量子力学.泡利不相容原则.哥德巴赫猜想更难以理解,但却也不是什么类似"时间就是金钱"这种妇孺皆知的浅显道理.区块链其实是一套统筹组织记录的方法 ...
- [OpenCV实战]30 使用OpenCV实现图像孔洞填充
在本教程中,我们将学习如何填充二值图像中的孔.考虑下图左侧的图像.假设我们想要找到一个二值掩模,它将硬币与背景分开,如下图右侧图像所示.在本教程中,包含硬币的圆形区域也将被称为前景. 请注意,硬币的边 ...
- [R语言] 基于R语言实现环状条形图的绘制
环状条形图(Circular barplot)是条形图的变体,图如其名,环状条形图在视觉上很吸引人,但也必须小心使用,因为环状条形图使用的是极坐标系而不是笛卡尔坐标系,每一个类别不共享相同的Y轴.环状 ...
- SSM框架——MyBatis
Mybatis 1.Mybatis的使用 1.1给项目导入相关依赖 我这里有几个下载好的依赖包提供给大家 点我下载--junit4.13.2 点我下载--maven3.8.1 点我下载--mybati ...
- C++获取含有中文字符的string长度
:前言 造车轮的时候要用到中文字符串的长度辨别,发现char的识别不准,进行了一番研究. > 开始研究 在Windows下,中文字符在C++中的内存占用为2字节,此时采用字符串长度获取函数得到的 ...
- 练习:集合元素处理(传统方式)-练习:集合元素处理(Stream方式)
练习:集合元素处理(传统方式) 题目 现在有两个ArrayList集合存储队伍当中的多个成员姓名,要求使用传统的for循环(或增强for循环依次进行以下若干操作步骤︰ 1.第一个队伍只要名字为3个字的 ...
- C++中进程间相互通信的方法
详细资料查看https://www.cnblogs.com/swunield/articles/3893250.html 在我看来主要分方式就是 1.共享内存 2.postmessage发送出去 3. ...