vuejs之第一个vue程序

<html>

<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    {{ message }}
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    });
  </script>
</body>

</html>

结果：

（1）首先要引入https://cdn.jsdelivr.net/npm/vue/dist/vue.js，相当于引入Jquery那样。

（2）在创建一个Vue对象时需要关注两个参数，一个是挂载点el，另一个是数据data。

（3）挂载点el：挂载点用于定位哪个标签，可以使用id选择器、类选择器和标签选择器，一般建议使用id选择器。因为一般在开发中id是唯一的，而类名可以是不唯一的。

（4）在获取数据是，利用{{}}。

（5）Vue实例的作用范围：el选项中命中的元素以及其内部的后代元素。

（6）Vue是否可以设置其他的DOM元素：可以，但是不能使用html和body标签。

（7）data数据中可以存储复杂的对象：

<html>

<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app" class="app">
    <ul>
      <li>{{ message }}</li>
      <li>{{school.name}}</li>
      <li>{{school.age}}</li>
      <li>{{hobby[0]}}</li>
      <li>{{hobby[1]}}</li>
    </ul>

  </div>
  <script>
    var app = new Vue({
      el: '.app',
      data: {
        message: 'Hello Vue!',
        school: {
          name: "张三",
          age: 18,
        },
        hobby: ["gameing", "reading"]
      }
    });
  </script>
</body>

</html>

渲染数据类型时，遵守js的语法即可。