Vue.js模板入门-优快云博客

本文链接：https://blog.youkuaiyun.com/cvper/article/details/79999264

当你了解这个是怎么用的，是干嘛的，就可以了，更多，更具体的信息可以去vue的官网去看文档；

这里只是用更为直观的方式让你了解一下vue；

---------------------------------------------------------------------------------------------------------------

之前我们看了一些简单的一些概念性的东西，本篇我们看一下模板；

先来看一个之前写过的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue2基础</title>
    <script src="vue.js"></script>
</head>
<body>
     <div id="main">
         <span>{{message}}</span>
     </div>

     <script>
          let abc={
              message:"我们来学习模板吧"
          }
          new Vue({
              el:"#main",
              data:abc
          });
     </script>
</body>
</html>

上面的内容很简单，没什么复杂的内容，那么模板是什么呢？

  <div id="main">
         <span>{{message}}</span>
  </div>

这个就是vue的模板，其实就是html, 这只是其中一种方式；

第二种方式：

我们来看看代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue2基础</title>
    <script src="vue.js"></script>
</head>
<body>
     <div id="main">
         <span>{{message}}</span>
     </div>

     <script>
          let abc={
              message:"我们来学习模板吧"
          }

          var str="<div>我是模板</div>"

          new Vue({
              el:"#main",
              data:abc,
              template:str
          });
     </script>
</body>
</html>