VUE 学习笔记 三 模板语法
1.插值
a.文本
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值
<span>Message: {{ msg }}</span>
v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新
<span v-once>这个将不会改变: {{ msg }}</span>
b.原始HTML
双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html 指令
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
注意: 站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,绝不要对用户提供的内容使用插值。
c.特性
Mustache 语法不能作用在 HTML 特性上,遇到这种情况应该使用 v-bind 指令:
<div v-bind:id="dynamicId"></div>
在布尔特性的情况下,它们的存在即暗示为 true,v-bind 工作起来略有不同,在这个例子中:
<button v-bind:disabled="isButtonDisabled">Button</button>
如果 isButtonDisabled 的值是 null、undefined 或 false,则 disabled 特性甚至不会被包含在渲染出来的 <button> 元素中。
d.使用 JavaScript 表达式
{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id"></div>
2.指令
指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
<p v-if="seen">现在你看到我了</p>
这里,v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。
a.参数
一些指令能够接收一个“参数”,在指令名称之后以冒号表示。例如,v-bind 指令可以用于响应式地更新 HTML 特性
<a v-bind:href="url">...</a>
在这里 href 是参数,告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。
另一个例子是 v-on 指令,它用于监听 DOM 事件:
<a v-on:click="doSomething">...</a>
b.修饰符
修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():
<form v-on:submit.prevent="onSubmit">...</form>
3.缩写
Vue.js 为 v-bind 和 v-on 这两个最常用的指令,提供了特定简写
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a> <!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
VUE 学习笔记 三 模板语法的更多相关文章
- vue学习笔记(三)class和style绑定
前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...
- Angular 5.x 学习笔记(1) - 模板语法
Angular 5.x Template Syntax Learn Note Angular 5.x 模板语法学习笔记 标签(空格分隔): Angular Note on github.com 上手 ...
- VUE学习(三)语法
模板语法 Mustache 语法 1.插值 <span v-once>这个将不会改变: {{ msg }}</span> v-once,一次性,否则就会绑定 {{ }} ...
- Webpack4 学习笔记三 ES6+语法降级为ES5
前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 Webpack 将es6.es7语法降级为es5 需要通过 babel JavaScript编译器. 安装: npm i babel ...
- Vue学习笔记三:v-bind,v-on的使用
目录 v-bind:绑定属性值,内容相当于js,缩写: v-on:绑定方法,缩写@ 总结 v-bind:绑定属性值,内容相当于js,缩写: 我添加了一个input标签,如下 <input typ ...
- Vue学习2:模板语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue学习笔记(三):vue-cli脚手架搭建
一:安装vue-cli脚手架: 1:为了确保你的node版本在4.*以上,输入 node -v 查看本机node版本,低于4请更新. 2:输入: npm install -g vue-cli ...
- vue学习笔记三:常见的表单绑定
<template> <div id="app"> <input type="checkbox" id="checked ...
- vue学习笔记(四)事件处理器
前言 在上一章vue学习笔记(三)class和style绑定的内容中,我们学习了如何在vue中绑定class和style,介绍了常用的绑定方法,class的数组绑定和对象绑定以及style的数组绑定和 ...
随机推荐
- Thinkphp 查询条件 and 和 or同时使用即复合查询
thinkphp 3.2快捷查询OR查询&分割表示AND查询讲解 快捷查询方式是一种多字段查询的简化写法,可以进一步简化查询条件的写法,在多个字段之间用|分割表 ...
- C#如何优雅的结束一个线程
大家都知道在C#里面,我们可以使用 Thread.Start方法来启动一个线程,当我们想停止执行的线程时可以使用Thread.Abort方法来强制停止正在执行的线程,但是请注意,你确定调用了Threa ...
- js中的event
event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等.event对象只在事件发生的过程中才有效.event的某些属性只对特定的事件有意义.比如,fromElement ...
- CUDA 新版本 Visual Studio 和 CUDA 兼容性的小问题
▶ 升级到 Visual Studio 2017 和 CUDA 9.1 之后,直接编译以前的 CUDA C 程序出现了如下报错: 严重性 代码 说明 项目 文件 行 禁止显示状态 错误(活动) E00 ...
- 小米笔记本pro CPU GPU 做科学计算的算力对比
小米笔记本pro:15.6寸,i7-8850,16G,256G,GPU:MX150 测试对象Caffe,MNIST训练 使用纯CPU训练: 1.耗时:11分58秒 2.功耗:35W 使用GPU训练: ...
- UGUI 锚点设置为四方扩充模式然后设置局部坐标为0将出现什么问题
UGUI 锚点设置为四方扩充模式然后设置局部坐标为0将出现什么问题? 情形:按钮A挂在主画布上.四方扩充模式.A的中心和画面中心不重合. 这时候用代码设置A.localPosition = new V ...
- mac 下 python链接mysql
安装过程 :http://blog.topspeedsnail.com/archives/6018 注意 报错的话要先装一个东西 http://cdn.mysql.com/Downloads/Conn ...
- Oracle的服务端_默认_启动的服务
- 文件上传:input file FileReader
js: window.onload = function () { var input = document.getElementById('input-file'), info = document ...
- 存储过程返回update结果集和insert主键
update teacher set name ='111' where id in(286,289);print @@rowcount;--或select将查出,是@@rowcount,不是@row ...