Vue模板语法总结
文本
数据绑定最常见的方式就是使用“Mustache”语法(两个大括号{{ }})的文本插值
<span>Message: {{ msg }}</span>
Mustache标签将会被替代为对应数据对象msg的值,无论何时,绑定的数据对象上msg属性发生变化,插入处的内容都会更新。
通过v-once指令,执行一次性的插入,当数据改变时,插入处的值不会更新。但他会影响其他标签元素的数据绑定:
<span v-once>这个将不会改变: {{ msg }}</span>
使用javascript表达式
对于所有的数据绑定,vue都提供了完全的javascript表达式的支持。
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
这些表达式会在Vue实例数据作用域下作为javascript被解析。
有个限制就是每个绑定都只能包含单个表达式。所以下面的例子都不会生效
<div id="app">
<!-- 支持三目运算符 -->
{{ 1 > 2 ?'真':'假' }}
<!--
不支持变量声明
{{ var a = 10}}
不支持if{{ if(ok) { return "哈哈" }}}
-->
<!--
但是三目运算可以访问用户的全局变量
-->
{{ ok ? '哈哈' : "呵呵s"}}
</div>
const app = new Vue({
el:"#app",
data:{
ok:true,
}
})
由于模板表达式都被放在沙盒中,只能访问全局变量的一个白名单,如Math和Date。
指令
指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论)。
指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式的作用于DOM
<p v-if="seen">现在你看到我了</p>
这里v-if指令将根据seen的值真假来插入/移除元素。
参数
一些指令能够接受一个参数,在指令名称之后以冒号表示,例如,v-bind指令可以用于响应式地更新HTML特性。
<a v-bind:href="url">...</a>
在这里 href 是参数,告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。
另一个例子是v-on,它用于监听DOM事件
<a v-on:click="doSomething">...</a>
在这里参数是监听的事件名.
缩写
v-bind的缩写是一个冒号(
Vue模板语法总结的更多相关文章
- Vue模板语法(二)
Vue模板语法(二) 样式绑定 class绑定 使用方式:v-bind:class="expression" expression的类型:字符串.数组.对象 1.2 style绑 ...
- Vue模板语法(一)
Vue模板语法 一.插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达 ...
- Vue模板语法(一)
Vue模板语法 一 vue简介 Vue.js是一套构建用户界面的渐进式框架. 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与 ...
- Vue 模板语法 && 数据绑定
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- 初始Vue、Vue模板语法、数据绑定(2022/7/3)
文章目录 1.Vue简介 1.1.Vue的安装使用 1.2.实际的运用案例 1.3.vue开发工具的使用(这个需要在浏览器中安装) 2.初始Vue 2.1 .基础知识 2.1 .代码实例 2.2 .页 ...
- (Vue)vue模板语法
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统. ...
- Vue模板语法与常用指令
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数,结合相应系统,在应用状态改变时 ...
- Vue模板语法(二)
Vue基础模板语法 二 1. 样式绑定 1.1 class绑定 使用方式:v-bind:class="expression" expression的类型:字符 ...
- (32)Vue模板语法
模板语法 文本: <span>Message: {{ msg }}</span> v-once 一次性地插值,当数据改变时,插值处的内容不会更新 <span v-once ...
- 11 - Vue模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. 所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML ...
随机推荐
- 洛谷 P1850 换教室 解题报告
P1850 换教室 题目描述 对于刚上大学的牛牛来说,他面临的第一个问题是如何根据实际情况申请合适的课程. 在可以选择的课程中,有\(2n\)节课程安排在\(n\)个时间段上.在第\(i(1≤i≤n) ...
- 【bzoj1187】 HNOI2007—神奇游乐园
http://www.lydsy.com/JudgeOnline/problem.php?id=1187 (题目链接) 题意 一个$n*m$的矩阵,其中每一个位置有一个权值,求一条回路使得经过的位置的 ...
- 【bzoj3527】 Zjoi2014—力
http://www.lydsy.com/JudgeOnline/problem.php?id=3527 (题目链接) 题意 $${F_i=\sum_{j<i} {\frac{q_iq_j}{( ...
- ThinkPHP 5.x远程命令执行漏洞分析与复现
0x00 前言 ThinkPHP官方2018年12月9日发布重要的安全更新,修复了一个严重的远程代码执行漏洞.该更新主要涉及一个安全更新,由于框架对控制器名没有进行足够的检测会导致在没有开启强制路由的 ...
- LGP4588[JSOI2018]扫地机器人
题解 需要先说明一点东西: 1 同一副对角线方向相同,共有$gcd(n,m)$条不同的副对角线,机器人的行为是一个$gcd(n,m)$的循环:: 如果左上方是$(1,1)$,容易看出所有的路径是从左或 ...
- Activity工作流(2)-入门安装运行第一个例子
转: Activity工作流(2)-入门安装运行第一个例子 置顶 2017年05月24日 15:58:50 li_ch_ch 阅读数:24432 版权声明:本文为博主原创文章,未经博主允许不得转载 ...
- bashttpd使用手册
http://note.youdao.com/noteshare?id=15775dca9fcdc7326e80158082572ed5
- day8 java基础细节回顾
java之父——James Gosling java吉祥物——duke 编译: 源文件(.java文件)-->java编译器==>.class文件 运行:类装载器-->字节码校验器- ...
- python使用数组作为索引遍历数组
python使用数组作为索引遍历数组 觉得有用的话,欢迎一起讨论相互学习~Follow Me python使用数组作为索引遍历数组 import numpy as np a=np.arange(0,5 ...
- 安装解压版的mariadb
今天尝试了安装解压版的mariadb,在官网上https://downloads.mariadb.org/下载了5.5版本的mariadb的zip压缩包, 经过实践发现mariadb解压版安装与mys ...