vue是一个简化Dom操作、响应式数据驱动的JavaScript框架，其开发者为尤雨溪，国产开源项目，值得骄傲。中文文档主页为：https://cn.vuejs.org 。近期找了一套教程学习下。有兴趣的同学，可以小额捐赠下，找我要视频和教程相关资料。

一、第一个Vue程序

这里先不涉及vue-cli的使用，先直接引入html页面中使用。使用步骤为：

  • 导入开发版本的Vue.js
  • 创建Vue实例对象, 设置el属性和data属性
  • 使用简洁的模板语法把数据渲染到页面上

我们先写一段简单的代码，如下：

<pre data-language="HTML">```markup

<html lang="en">
<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>Vue基础</title>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el:"#app",
      data:{
        message:" 你好 www.361way.com! "
      }
    })
  </script>
</body>
</html>


此时上面的{{message}}，就会被script里的data下的message替换，在页面上正常输出” 你好 www.361way.com! ” 。这里我们使用的是div标签，js和页面内容通过id=”app”进行链接，其他标签中能不能使用呢？继续往下看。

### 二、el挂载点

el是element的缩写，el是用来设置Vue实例挂载（管理）的元素。开始之前，我们先看下如下三个问题：

Vue实例的作用范围是什么呢？是否可以使用其他的选择器？是否可以设置其他的dom元素呢？

这里只黏下中间body部分：

```markup

  {{ message }}
  

    {{ message }}
     {{ message }} 
  

  
  
  


可以把中间//注释的部分，分别地行尝试。对比下前三个和第四的输出，会发现有如下区别：



    
    
        vue-el
    
    
    
vue-el




通过上面的测试可以发现上面的三个问题，对应的解答结果如下：


    

  • Vue会管理el选项命中的元素及其内部的后代元素
    • 

  • 可以使用其他的选择器,但是建议使用ID选择器
    • 

  • 可以使用其他的双标签,不能使用HTML和BODY
    • 



三、vue data数据


Vue中用到的数据定义在data中，data中可以写复杂类型的数据，渲染复杂类型数据时,遵守js的语法即可。这里也只列下body部分：


<pre data-language="HTML">```markup
<body>
    <div id="app">
        {{ message }}
        <h3> {{ school.site }} {{ school.email }}</h3>
        <ul>
            <li>{{ campus[0] }}</li>
            <li>{{ campus[3] }}</li>
        </ul>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"你好 运维之路!",
                school:{
                    site:"www.361way.com",
                    email:"itybku@139.com"
                },
                campus:["北京校区","上海校区","广州校区","深圳校区"]
            }
        })
    </script>
</body>


具体效果如下：

![vuedata](https://blog.361way.com/wp-content/uploads/2019/06/vuedata.png "vuedata")

</body></html>