vue one

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

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

var app=new Vue({
    el:'#app',
    data:{
        message:'hello kathy'
         }
})              

除了文本插值,还可以像下面这样来绑定元素特性:

<div id="app-2">
    <span v-bind:title="message">
      鼠标悬停几秒钟查看此处动态绑定的提示信息!
    </span>
</div>

var app2 = new Vue({
    el: '#app-2',
    data: {
      message: '页面加载于 ' + new Date().toLocaleString()
  }
})      

上面这一段代码里所看到的v-bind特性被称为指令。指令带有前缀v-,以表示它们是Vue提供的特殊特性。它们会在渲染的DOM上应用特殊的响应式行为。在这里指令的意思是:“将这个元素节点的title特性和Vue实例的message属性保持一致”

通过Javascript控制台,输入app.message=‘新消息’,就会再次看到这个绑定了title特性的HTML已经进行了更新。

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

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,082评论 0 29
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,245评论 0 6
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 7,276评论 0 25
  • 主要还是自己看的,所有内容来自官方文档。 介绍 Vue.js 是什么 Vue (读音 /vjuː/,类似于 vie...
    Leonzai阅读 3,384评论 0 25
  • Vue不支持IE8以及以下版本。 想要使用Vue的话可以通过直接下载vue.js,放置到项目中写好路径就可以,或者...
    酥枫阅读 653评论 0 0