Vue模板语法_前端培训

发布时间:2020年11月20日作者:atguigu浏览次数:655

Vue.js 模板语法

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

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

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

前端培训

插值文本

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

Html

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

属性

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

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

表达式

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

指令

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

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

参数

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

修饰符

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

用户输入

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

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值。

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

过滤器

Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化。


上一篇:
下一篇:
相关课程

java培训 大数据培训 前端培训 UI/UE设计培训

关于尚硅谷
教育理念
名师团队
学员心声
资源下载
视频下载
资料下载
工具下载
加入我们
招聘岗位
岗位介绍
招贤纳师
联系我们
全国统一咨询电话:010-56253825
地址:北京市昌平区宏福科技园2号楼3层(北京校区)

深圳市宝安区西部硅谷大厦B座C区一层(深圳校区)

上海市松江区谷阳北路166号大江商厦3层(上海校区)

武汉市东湖高新开发区东湖网谷(武汉校区)

西安市雁塔区和发智能大厦B座3层(西安校区)