Vue.js快速入门-优快云博客

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

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

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

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

vue 不支持ie8；

使用vue有多种方式，开发中我们使用npm下载模块，现在我们学习基础，可以直接引入vue.js

就和引入jquery一样，没有什么区别，特别简单；

好吧，什么也别想，什么也别困惑，学着学着就明白了，坚持就行：

第一步：引入我们的vue.js 文件，别把vue看的很难，就当成jquery来学就简单了；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue2基础</title>
     <!-- 在这里引入我们的vue文件 -->
    <script src="vue.js"></script>
</head>
<body>
      第一步，先引入vue.js 文件 要自己去下载咯，这里不提供
</body>
</html>

第二步：我们在<body>中添加点内容吧；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue2基础</title>
     <!-- 第一步  在这里引入我们的vue文件 -->
    <script src="vue.js"></script>
</head>
<body>
    <!-- 第二步,在网页中添加点内容吧 -->
     <div id="main">
         <span>我是静态的内容</span>
     </div>
</body>
</html>

第三步：这一步很重要，写法需要记住，就是死的东西，固定好的；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue2基础</title>
     <!-- 第一步  在这里引入我们的vue文件 -->
    <script src="vue.js"></script>
</head>
<body>
    <!-- 第二步,在网页中添加点内容吧 -->
     <div id="main">
         <span>{{abc}}</span>
     </div>

     <script>
          // 第三步首先new 一个Vue()，这一步是固定的，就这么写就行了,
          // 下面首先会设置 el  这个也是固定的，el代表我们这个Vue绑定到哪个元素上，
          // 后面写上div的ID就可以了，我们的ID 是 main, 注意加# 
          // data代表数据，可以理解为一个data对象，这个是固定的,我们在对象里面写了一个 abc 属性
          // 并且  abc 的值为：我就是数据部分 ; abc 是随便起的名字，
          // 这么简单的设置之后，我们在span 中写上{{ abc }},就可以在span 中显示 abc;
          
          new Vue({
               el:"#main", 
               data:{    
                   abc:"我就是数据部分"
               }
          });
           
     </script>
     
</body>
</html>