游达人的花园
密不可宣的话语

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

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

Markup

<!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

赞(0) 打赏
游园密语网站创作未经允许不得转载:游园密语 » Vue2.0 新手入门:制作页面
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

惠买网 领券购买更便宜 更实惠

抢优惠券天天特卖

感谢你对本文的认可,谢谢

支付宝扫一扫打赏

微信扫一扫打赏