一 、Hello Vue

转在 https://www.cnblogs.com/moqiutao/p/8258353.html

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

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

out: Hello Vue!

现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。

2.vue核心最基本的功能
1>

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

 <span v-bind:title="message">
                           teste
  </span>

v-bind 特性被称为指令。
2>
条件与循环
v-if

<div id="app">
  <p v-if="seen">现在你看到我了</p>
</div>
var app = new Vue({
  el: '#app',
  data: {
    seen: true
  }
})

v-for

<div id="app">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
var app = new Vue({
  el: '#app',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})
//可以这样添加一个text,节点。
app.todos.push({ text: '新项目' })