SOURCE

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var obj = {
  foo: 'bar'
}
Object.freeze(obj)

var app = new Vue({
  el: '#app',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString(),
    message1: "1111",
    seen: true ,
    todos: [
      { text: '学习 JavaScript' },
      { text: "学习 Vue" },
      { text: "整个项目" }
    ],
    groceryList: [
      { id: 0, text: '素菜'},
      { id: 1, text: '奶酪'},
      { id: 2, text: '随便'}
    ]
    
  },
  methods: {
  	reverseMessage: function(){
  		this.message = this.message.split('').reverse().join('')
}
}
})

 new Vue({
  el: '#app2',
  data: obj
})

<script src="https://cdn.jsdelivr.net/npm/vue">
</script>
<div id="app">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
  <p v-if="seen">现在你看到我了</p>
  <ol>
    <li v-for="todo in todos">
      {{todo.text}}
    </li>
  </ol>
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转信息</button>
  <p>{{ message1 }}</p>
  <input v-model="message1">
  <ol>
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>
<div id="app2">
    <p>{{ foo }} </p>
    <button v-on:click="foo = 'baz'" >Change it</button>
</div>