vue学习笔记之初识vue——模板声明与绑定

模板的存在的唯一目的，是为了和数据绑定。

Vue.js在标准HTML语法基础上，增加了一些扩展的语法来声明数据的绑定。

数据绑定语法

在Vue.js的模板中，最常见的一种数据绑定语法，是使用模板引擎Mustache 的插值写法：{{}}。例如，下面的模板绑定了实例上下文中的name变量：

<h1>{{name}}</h1>

当Vue.js渲染此模板时，将使用实例数据上下文中的name变量值，来计算最终的 渲染结果。

数据模型声明

在创建Vue实例时，使用data配置项来声明Vue实例的数据模型。

例如，下面的示例创建了一个具有初始模型{name:'Elthon John'}的Vue实例：

var vm = new Vue({
  template:'<h1>{{name}}</h1>',
  data:{
    name:'Elton John'
  },
  el:'#app'
})

Vue.js根据data配置项声明的初始模型构造数据上下文，进而和template配置项 所声明的模板执行绑定，因此，上面示例的最终渲染结果是：<h1>Elton John</h1>。