Vue中每个应用都是通过构建Vue的实例来完成的，基本的形式

  1. var vm = new Vue({
  2.   // 选项
  3. })

vue中的数据与方法

Vue中data对象中所有属性加入到了Vue响应式系统中，注意data并不是Vue的一个属性，而是vue实例的一个对象。我们不妨构建一个对象然后赋值给data对象。

data demo

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="../lib/bulma.css">
  7. </head>
  8. <body>
  9. <div id="app"  class="container">
  10.     <span>{{msg}}</span>
  11. </div>
  13. <script src="../lib/vue.js"></script>
  14. <script>
  15.     var data = {
  16.       msg:'我的剑就是你的剑'
  17.     };
  18.     var vm = new Vue({
  19.         el:'#app',
  20.         data:data
  22.     })
  24. </script>
  25. </body>
  26. </html>

效果

image.png

如果我们修改data数据，视图也会改变。
image.png

至于方法则一般是以某某事件触发执行其中逻辑，大部分是对数据(data项)的操作。