Vuejs学习系列(十五)--模板语法(一)

Vue.js使用了基于HTML的模版语法,允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有Vue.js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析。

在底层的实现上,Vue将模板编译成虚拟DOM渲染函数。结合响应系统,在应用状态改变时,Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。

1.文本插值

数据绑定最常见的形式就是使用“Mustache”语法(双大括号)的文本插值:

Message: {{ msg }}

Mustache标签将会被替代为对应数据对象上msg属性的值。无论何时,绑定的数据对象上msg属性发生了改变,插值处的内容都会更新。

通过使用v-once指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定

This will never change: {{ msg }}

这里我们通过一个例子,来看一下文本插值,我们在html文件中引入vuejs库,可以子啊官方网站下载该库。

运行之后页面显示的是Hello vue.js

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 6,678评论 0 6
  • Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有...
    白水螺丝阅读 3,663评论 0 0
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 10,468评论 0 29
  • 岁月变换着逝去 回忆着我们的爱 远方思念的女友 用内心的力惊起幻想 爱抚着你可爱的倩影 怀着但怯忧伤的温柔 梦醒时...
    念江子阅读 1,755评论 0 2
  • 自从创世之初,世界上有两种人存在,一种是“我们”,还有一种是“他们”。现在世界上仍然有这两种人,将来还是要有这两种...
    天水讼阅读 2,563评论 0 4