Vue初级教程

声明式渲染 Declarative Rendering

https://vuejs.org/v2/guide/#Declarative-Rendering

js代码  这个叫做脚本

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

html代码  这个叫做视图

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

html里面div元素的id是app,同时有一个模板{{message}}用来填充数据

js里面构造一个Vue，元素就是html的div，并且数据里面是message，两边名字匹配。

Conditionals and Loops

除了往html插入文本，还可以进行绑定元素的attribute。

通过使用v-bind attribute指令来处理，意思是，将这个元素节点的title这个attribute和Vue实例的message实例保持一致。

This example demonstrates that we can bind data to not only text and attributes, but also the structure of the DOM. Moreover, Vue also provides a powerful transition effect system that can automatically apply transition effects when elements are inserted/updated/removed by Vue.

Handling User Input

Composing with Components