首页 技术杂谈Vue正文

我要学习Vue——Vue2.0 新手入门:制作页面

海南游达人 Vue 2018-01-02 132 0

通过前面的了解,先随便写一个简单的页面用于开始学习

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 第1步:导入Vue的包 -->
  <script src="./lib/vue.min.js"></script>
</head>

<body>
  <!-- 第3步: Vue 实例所控制的这个元素区域 -->
  <div id="app">
    <p>{{ msg }}</p>
  </div>

  <script>
    // 第2步:创建一个Vue的实例
    var vm = new Vue({
      el: '#app',  // 表示要控制的元素区域
      // 这里的 data 就是用来保存数据的地方
      data: { // data 属性中,存放的是 el 中要用到的数据
      msg: '开始学习Vue。 搜索关注公众号:游园密语”' // 通过 Vue 提供的指令,很方便的就能把数据渲染到页面上
      }
    })
  </script>
</body>

</html>


这样子一个最简单的页面就完成了。

访问就可以看到结果如下图所示:

(本人用的EditPlus写的代码,可以直接查看结果,小的测试页面推荐使用,方便快捷)

image.png

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论