Vue（五）：Vue模板语法
1.{{...}}（双大括号）
文本插值
<div id="app">
<p>{{ message }}</p>
</div>
2.v-html指令
用于输出 html 代码
<div id="app">
<div v-html="message"></div>
</div> <script>
new Vue({
el: '#app',
data: {
message: '<h1>hi,jacke</h1>'
}
})
</script>
3.v-bind 指令和缩写
HTML 属性中的值应使用 v-bind 指令。
以下实例判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
</head>
<style>
.class1{
background: #444;
color: #eee;
}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="app">
<div v-bind:class="{'class1': class1}">
v-bind:class 指令
</div>
</div> <script>
new Vue({
el: '#app',
data:{
class1: true
}
});
</script>
<div id="app">
<pre><a v-bind:href="url">百度</a></pre>
</div> <script>
new Vue({
el: '#app',
data: {
url: 'http://www.baidu.com'
}
})
</script>
缩写
<!-- 缩写 -->
<a :href="url">...</a>
4.JavaScript表达式
<div id="app">
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">Lily</div>
</div> <script>
new Vue({
el: '#app',
data: {
ok: true,
message: 'Jacke',
id : 1
}
})
</script>
5.v-on指令和缩写
<div id="app">
<p id="content">注意我的背景色</p>
<input type="button" v-on:click="setBgColor" value='点我'/>
</div> <script>
new Vue({
el:'#app',
methods:{
setBgColor:function(){
document.getElementById('content').style.background='red';
}
}
})
</script>
缩写
<!-- 缩写 -->
<a @click="doSomething">...</a>
6.v-model双向数据绑定
<div id="app">
{{message}}
<input type="text" v-model="message" />
</div> <script>
new Vue({
el:"#app",
data:{
message:"hello"
}
})
</script>
7.自定义过滤器
Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：
<!-- 在两个大括号中 -->
{{ message | capitalize }} <!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>
示例，
<div id="app">
<!-- 过滤器可以串联 -->
{{message|subMessage|toUpper}}
<br>
<!-- 过滤器是 JavaScript 函数，因此可以接受参数 -->
<!-- 这里job是第一个参数，apple是第二个参数，表达式2+3运行后的结果是第三个参数 -->
{{job|doWhat('apple',2+3)}} </div> <script>
new Vue({
el:"#app",
data:{
message:"hello my friend",
job:"sale"
},
filters:{
subMessage:function(value){
return value.substring(0,7)
},
toUpper:function(value){
return value.toLocaleUpperCase()
},
doWhat:function(v1,v2,v3){
return v1+" "+v2+" "+v3
}
}
})
</script>
Vue（五）：Vue模板语法的更多相关文章
- Vue实例与模板语法
VUE基础使用方法 一.安装 1.NPM 在用 Vue 构建大型应用时推荐使用 NPM 安装[1].NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用.同时 Vue ...
- Vue介绍以及模板语法-插值
1.Vue的介绍 Vue是一套用于构建用户界面的渐进式框架. 注意:Vue是一个框架,相对于jq库来说,是由本质的区别的:https://cn.vuejs.org/ Vue不支持IE8及一下版本,因为 ...
- 前端框架VUE——数据绑定及模板语法
一.数据绑定 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统: <div id="app"> {{ msg }} </di ...
- Vue API 3模板语法 ，指令
条件# v-if# v-if 指令用于条件性地渲染一块内容.这块内容只会在指令的表达式返回 truthy 值的时候被渲染. v-show# v-show 指令也是用于根据条件展示一块内容.v-show ...
- vue学习笔记 模板语法（三）
<div id="kk"> <div>直接输出文本:{{msg}}</div> <div>自定义过滤器输出文本:{{msg|capi ...
- Vue笔记之模板语法
插值 比较常用的就是插值,插值就是{{ foobar }}用两个大括号包起来的一个变量,显示的时候会将双大括号标签替换为这个变量的值. 基本的用法就是: <p>{{ message }}& ...
- Vue详细介绍模板语法和过滤器的使用！
表达式 {{ XXX }}使用过滤器 {{ XXX | yyy}}使用多个过滤器 {{ XXX | yyy | yyy1}}过滤器带参数 {{ XXX | yyy(123,"zhuiszhu ...
- Vue.js模板语法介绍
Vue.js模板.指令 模板语法概述 1.如何理解前端渲染? 把数据填充到HTML标签中,一般我们使用Ajax将数据从后台查询出,结合模板() 2.前端渲染方式 2.1.原生js拼接字符串 使 ...
- 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法
Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...
- 【Vue】浅谈Vue(一)：从模板语法数据绑定、指令到计算属性
写在前面 今年前端届比较有意思,从大漠穷秋发表文章比较angular和vue,继而致歉vue作者.社区,从谷歌辞去Angular Developer PM in China一职并且呼吁大家停止各种无谓 ...
随机推荐
- 让网络编程更轻松和有趣 t-io
原文:https://www.oschina.net/p/t-io 注意:还是尽量去看原文,因为原文下面的评论也很有意思,可以参考大牛的讨论学习到新的东西 授权协议:Apache 开发语言:Java ...
- CDC方式及优缺点
什么是数据抽取? 数据抽取是指从源数据源系统抽取目的数据源系统需要的数据.实际应用中,数据源较多采用的是关系数据库.数据抽取的方式分为全量抽取和增量抽取 全量抽取类似于数据迁移或数据复制,它将数据源中 ...
- MSVC下使用Boost的自动链接
简述 好久没有用过boost库了,以前用也是在linux下,需要哪个部分就添加哪个部分到Makefile中. 最近要在Windows下使用,主要是mongocxx库依赖它,不想自己去编译它了,就直接在 ...
- zuul（springboot）设置静态资源代理和默认首页代码一例
直接上代码: public class StaticResourcesConfig extends WebMvcConfigurerAdapter { private static final Log ...
- 代理Proxy初探
Proxy,也就是"代理"了. 意思就是.你不用去做,别人取代你去处理.比方说:租房.你仅仅要找到"我爱我家"中介,把全部的事情交给他们去代劳, "我 ...
- 使用PHP打造QQ空间神奇图片
说明 你一定在qq空间遇到过这样的东西:打开一张图片,上面有你的QQ号和昵称,你觉得很神奇,是不是? 其实原理很简单,那张图片是动态生成的,上面显示的信息是根据你访问的Url获得的,然后用程序动态的画 ...
- Oracle的悲观锁和乐观锁
为了得到最大的性能,一般数据库都有并发机制,不过带来的问题就是数据访问的冲突.为了解决这个问题,大多数数据库用的方法就是数据的锁定. 数据的锁定分为两种方法,第一种叫做悲观锁,第二种叫做乐观锁.什么叫 ...
- Python中的两种路径
Java中有两种路径,一种是操作系统的路径path,另一种是类路径classpath. Python中也是如此,一种是操作系统环境变量中的path,另一种是PYTHONPATH. 当import xx ...
- 使用import简化spring的配置 spring import 标签的解析 使用import或加载spring配置时，报错误There is no ID/IDREF 多个Spring配置文件import resource路径配置
spring-import 标签的解析.使用案例: 对于spring配置文件的编写,我想,对于经历过庞大项目的人,都有那种恐惧的心理,太多的配置文件.不过,分模块都是大多数人能想到的方法,但是,怎么分 ...
- IT公司管理发展经验
2012-11-14 内容存档在evernote,笔记名"IT公司管理发展经验"