ylbtech-Vue.js:模版语法
1.返回顶部
1、

Vue.js 模板语法

Vue.js 使用了基于 HTML 的模版语法允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据

Vue.js 的核心是一个允许你采用简洁的模板语法声明式将数据渲染进 DOM 的系统

结合响应系统,在应用状态改变时Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上


插值

文本

数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值

文本插值

<div id="app">
<p>{{ message }}</p>
</div>

尝试一下 »

Html

使用 v-html 指令用于输出 html 代码:

v-html 指令

<div id="app">
<div v-html="message"></div>
</div> <script>
new Vue({
el: '#app',
data: {
message: '<h1>菜鸟教程</h1>'
}
})
</script>

尝试一下 »

属性

HTML 属性中的值应使用 v-bind 指令。

以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类

v-bind 指令

<div id="app">
<label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
<br><br>
<div v-bind:class="{'class1': class1}">
directiva v-bind:class
</div>
</div> <script>
new Vue({
el: '#app',
data:{
class1: false
}
});
</script>

尝试一下 »

表达式

Vue.js 都提供了完全的 JavaScript 表达式支持

JavaScript 表达式

<div id="app">
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">菜鸟教程</div>
</div> <script>
new Vue({
el: '#app',
data: {
ok: true,
message: 'RUNOOB',
id : 1
}
})
</script>

尝试一下 »


指令

指令是带有 v- 前缀的特殊属性

指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子:

实例

<div id="app">
<p v-if="seen">现在你看到我了</p>
</div> <script>
new Vue({
el: '#app',
data: {
seen: true
}
})
</script>

尝试一下 »

这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素

参数

参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性:

实例

<div id="app">
<pre><a v-bind:href="url">菜鸟教程</a></pre>
</div> <script>
new Vue({
el: '#app',
data: {
url: 'http://www.runoob.com'
}
})
</script>

尝试一下 »

在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定

另一个例子是 v-on 指令,它用于监听 DOM 事件:

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

在这里参数是监听的事件名。

修饰符

修饰符是以半角句号 . 指明的特殊后缀,用于指出一个指定应该以特殊方式绑定。例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

<form v-on:submit.prevent="onSubmit"></form>

用户输入

在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定

字符串反转

<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div> <script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
}
})
</script>

尝试一下 »

按钮的事件我们可以使用 v-on 监听事件,并对用户的输入进行响应。

以下实例在用户点击按钮后对字符串进行反转操作:

字符串反转

<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转字符串</button>
</div> <script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>

尝试一下 »


过滤器

Vue.js 允许你自定义过滤器被用作一些常见的文本格式化。由"管道符"指示, 格式如下:

<!-- 在两个大括号中 -->
{{ message | capitalize }} <!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

过滤器函数接受表达式的值作为第一个参数。

以下实例对输入的字符串第一个字母转为大写:

实例

<div id="app">
{{ message | capitalize }}
</div> <script>
new Vue({
el: '#app',
data: {
message: 'runoob'
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
</script>

尝试一下 »

过滤器可以串联

{{ message | filterA | filterB }}

过滤器是 JavaScript 函数,因此可以接受参数

{{ message | filterA('arg1', arg2) }}

这里,message 是第一个参数,字符串 'arg1' 将传给过滤器作为第二个参数, arg2 表达式的值将被求值然后传给过滤器作为第三个参数


缩写

v-bind 缩写

Vue.js 为两个最为常用的指令提供了特别的缩写:

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
2、
2.返回顶部
 
3.返回顶部
1、给元素绑定href时可以也绑一个target,新窗口打开页面。
new Vue({
el: '#app',
data: {
url: 'http://www.runoob.com',
target:'_blank'
}
})
2、
4.返回顶部
 
5.返回顶部
1、
2、
 
6.返回顶部
 
作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

Vue.js:模版语法的更多相关文章

  1. Vue.js 模板语法

    本章节将详细介绍 Vue.js 模板语法,如果对 HTML +Css +JavaScript 有一定的了解,学习起来将信手拈来. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 ...

  2. Vue.js 数据绑定语法详解

    Vue.js 数据绑定语法详解 一.总结 一句话总结:Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue ...

  3. vue.js 常用语法总结(一)

    作者:曾萍,目前就职于京东商城. 概述 2016年已经结束了.你是否会思考一下,自己在过去的一年里是否错过一些重要的东西?不用担心,我们正在回顾那些流行的趋势.通过比较过去12个月里Github所增加 ...

  4. Vue.js 基本语法

    插值 Html 使用 v-html 指令用于输出 html 代码: <div id="app"> <div v-html="message"& ...

  5. Vue.js基础语法(一)

    vue学习的一系列,全部来自于表哥---表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 前言: 前端解析数 ...

  6. Vue.js模板语法介绍

    Vue.js模板.指令 模板语法概述 1.如何理解前端渲染? ​ 把数据填充到HTML标签中,一般我们使用Ajax将数据从后台查询出,结合模板() 2.前端渲染方式 2.1.原生js拼接字符串 ​ 使 ...

  7. 第六篇:vue.js模板语法(,属性,指令,参数)

    Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统. 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上.( ...

  8. Vue.js模板语法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Vue.js基础语法(三)

    vue学习的一系列,全部来自于表哥---表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 1过滤器filte ...

  10. Vue.js基础语法(二)组件

    vue学习的一系列,全部来自于表哥---表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 把一段经常要用的东 ...

随机推荐

  1. scala学习手记19 - Option类型

    看到Option类型就知道这本教材应该要说那个了. 使用过guava后,应该知道guava中的Optional类的作用是什么.算了找下原始文档好了: Optional<T> is a wa ...

  2. 控制语句1:真假与if 语句

    一.真假与运算符 1.1 真假的划分.查看 任何数据都可以分为两类:True 与 False False : 0,None,空的数据结构例如:[] ,{},str1 = '' True  :除了上面情 ...

  3. C#-foreach与yield

    (转自:http://www.jb51.net/article/34627.htm) 1. foreach语句 C#编译器会把foreach语句转换为IEnumerable接口的方法和属性. fore ...

  4. webpack4工具链升级排坑记录

    1.webpack4号称是0配置,于是我就只设置了entry.resolve.output.module->rules之类的属性,结果通过webpack-bundle-analyzer跑出来发现 ...

  5. 登录页面jsp跳转到另一个jsp 与jsp-Servlet-jsp

    登录页面jsp 到另一个jsp,与jsp-Servlet-jsp  都是可以从表单提交参数信息. 但是jsp-jsp ,只能通过<%=request.getParameter("use ...

  6. EditPlus保存时不生成bak文件(转)

    如何设置EditPlus保存时不生成bak文件 EditPlus是一个强大的编辑工具,不单单是编辑文字强大,很多的刚开始学习编程语言的初学者会选择它,例如html,js,php,java.小编刚开始学 ...

  7. 网站 安全 ---- 常见的 web 攻击

    网站 安全 ---- 常见的 web 攻击 1 sql 注入(常用的攻击性)(django的orm是做过sql防护处理的) 危害: 非法读取,篡改,删除数据库中的数据 盗取用户的各类敏感信息.获取利益 ...

  8. js实现checkbox组 全选和取消全选

    做后台管理程序时,用到一个checkbox组的全选和取消全选的功能, 主要是逻辑上的坑,理清后大概是: 1.全选点击后,小弟1~4都要选上,点击取消,小弟们也要取消 2.只要有一个小弟取消时,全选要取 ...

  9. js将json数据动态生成表格

    今天开发中遇到需要展示动态数据的问题, 具体要求是后端传来的json字符串,要在前端页面以table表格的形式展示, 其实没啥难的,就是拼接table标签,纯属体力活,于是自己写了个呆萌,保存起来,以 ...

  10. linux下 /boot 分区空间不足及其衍生问题

    linux的/boot引导分区有时会提示空间不足的问题,虽不影响系统的正常运行,但是人类天生对于未知的恐惧感总是影响心情的.而且在按安装其他软件的过程在中可能会出现以下问题: gzip: stdout ...