引入Vue.js

Vue官方下载地址

建议下载开发版而不是mini版， 开发版有提示错误信息，方便调试，发布时再替换成mini版。

将Vue.js源码通过script标签引入到html.

<script src="js/vue.js"></script>

第一个Vue程序

我们通过Vue的基本程序结构用MVC框架来实现一个 'Hello, Vue'。

第一步 创建Vue的实例

  • 通过new Vue()创建一个实例对象:
  • Vue的实例能帮我实现一个MVC框架
<script>   
  // 将Vue实例赋值给变量，vm可以改名。  
  var vm = new Vue()
</script>

// 如果不使用这个变量, 可以只定义一个Vue的实例。
new Vue()
  • 在实例化Vue时需要传入一个配置参数 {}
  • 配置参数可以包含挂载元素(el)，数据(data)， 方法(methods)等
  • Vue实例里的el, data, method为固定名称, 不可改变
<script>   
  var vm = new Vue({   // 将配置对象作为参数
    el: '',            // 用来关联一个视图View
    data: {},          // 用来关联Model中的数据
    methods: {}        // 用来关联Model中的方法
  })
</script>

第二步 准备数据模型 Model

  • 将Model中的数据放在data中。
  • 将Model中的方法放在methods中。
<script>                   
  var vm = new Vue({
    el: '', 
    data: {                     // 用来关联Model中的数据
      message: 'Hello Vue'      // 使用JSON格式的数据
    },
    methods: {                  // 在这个例子中我们没用到方法
     // add: function(){}
    }    
  })
</script>

第三步 关联视图 View

  • el是element的缩写。
  • el中用CSS选择器赋值，这点和jQuery相似。
  • 创建Vue实例要在el对应的Dom元素加载完成之后执行，这样在关联el时才能找到Dom。
<div id="app">
  <p></p>
</div>

<script>                   
  var vm = new Vue({
    el: '#app', 
    data: {                     // 用来关联Model中的数据
      message: 'Hello Vue'  // 使用JSON格式的数据
    },
    methods: {                  // 在这个例子中我们没用到方法
     // add: function(){}
    }    
  })
</script>

第四步 数据绑定

  • 通过前面的步骤，我们关联好了Model和View，现在就可以View中使用Model中的数据了。
<div id="app">
  <p>{{ message }}</p> <!--{{ message }}将会替换为Hello Vue-->
</div>

测试数据同步

  • 在控制台修改data中message的值，界面上就会自动修改，完全不用操作Dom，这就是MVC中的数据绑定。
$app.data.message = "Hello LiKang"; // 未测试

为什么要使用MVC?

  • MVC是一种设计思想，专注业务数据，而不是显示。
  • MVC框架帮我们将数据（Model）与显示（View）进行了分离。
  • 一个应用程序可以完全没有界面，它的本质是数据。

完整代码

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Vue01</title>
  <script src="js/vue.js"></script>
</head>
  <body>
      <div id="app">
        <p>{{ message }}</p>
      </div>

      <!-- js代码放在指定的HTML元素之后 -->
      <script>
      var vm = new Vue({
        el:'#app',
        data: {
          message:'Hello World!'
        },
        methods:{}
      });
      </script>
  </body>
</html>

作业

  • 用Vue这个MVC框架将ToDoList中的数据和显示进行分离。
<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Vue01</title>
  <script src="js/vue.js"></script>
</head>
  <body>
      <div id="app">
        <p>{{ tasks}}</p>
      </div>

      <!-- js代码放在指定的HTML元素之后 -->
      <script>
      var vm = new Vue({
        el:'#app',
        data: {
          tasks:[
              {text:"吃饭", priority:0, completed: false},
              {text:"睡觉", priority:0, completed: false},
              {text:"打豆豆", priority:0, completed: false}
          ]
        }
      });
      </script>
  </body>
</html>

results matching ""

    No results matching ""