Vue入门（一）

Vue基础

Vue简介

1. JavaScript框架
2. 简化Dom操作
3. 响应式数据驱动

Vue实例

• 示例：

  <body>
      <div id = "app">
          {{ message }}
      </div>
      
      <script src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <script>
      	var app = Vue({
              el : "#app" ,
              data :{
                  message : "Hello, world!"
              }
          })
      </script>
  </body>
  

• el挂载点：

  • 作用范围：

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

  • 选择器：

    可以使用id选择器、class选择器，但是建议使用id选择器。

  • dom元素：

    可以使用如<div>的双标签，不能使用HTML和Body。

• data数据对象：

  • Vue中用到的数据定义在data中。
  • data中可以写复杂类型的数据。
  • 渲染复杂类型数据时，遵守js的语法即可。

• 示例：

  <body>
      <div id = "app">
          {{ message }}
          <h1>
              {{ school.name }}, {{ school.moblie}}
          </h1>
          <ul>
              <li>{{ campus[0] }}</li>
              <li>{{ campus[1] }}</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 : {
                      name : "xx", 
                      mobile : "xxx-xxx-xxxx"
                  } ,
                  campus : ["X校区", "y校区"]
              }
          })
      </script>
  </body>
  

注：本博客内容主要来自B站黑马程序员的视频合集。