由于我之前在Java EE的课程设计里面，使用过一些Vue，所以大致语法还是清楚的

因此这里只是对一些认为重要的内容，做总结记录

• <标签> {{data中的数据名}} </标签>

  <div id="root">
      <p>{{message}}</p>
  </div>
  

  new Vue({
      el: ‘root‘,
      data: {
          message: ‘this is a message in Vue data area‘
      }
  })
  

• v:bind:标签的属性名="data中的数据名"

  <a v-bind:href="url"></a>  <!-- 这里 url 就是Vue({}) 中data里面的 url 变量 -->
  <a :href="url"></a>  <!-- v-bind: 的简写形式 -->
  

• v:model:value="data中的数据名"

  <!-- 单向：从Vue里的data读取，流向html页面展示 -->
  单向数据绑定（v-bind）：<input type="text" :value="message"> <br><br>
  
  <!-- 双向：从Vue里的data读取，绑定到输入标签的value，当输入框里的内容改变，Vue的data里面的数据也相应的发生变化，而绑定的数据也随之改变 -->
  双向数据绑定（v-model）：<input type="text" v-model:value="message"> <br><br>
  
  <!-- v-model 的简写，一般都是针对输入类的dom元素，比如input、textarea等有value的元素 -->
  双向数据绑定（v-model简写）：<input type="text" v-model="message">
  

• new Vue({}) 里面的 el 的两种写法

  // el：第一种
  /* el写在Vue里，关联具体的标签id */
  new Vue({
      el: ‘#root‘,
      data: {
          message: ‘message in vue data‘,
      }
  })
  
  // el：第二种（不太常用）
  /* el不写，而是在Vue外面，挂载具体的id对应的标签 */
  const vue = new Vue({
      data: {
          message: ‘message in vue data‘,
      }
  })
  vue.$mount(‘#root‘)
  

• new Vue({}) 里面的 data 的两种写法

  // data: 第一种（HTML里使用Vue更常见）
  /* data是一个JSON对象 */
  new Vue({
      el: ‘#root‘,
      data: {
          message: ‘message in vue data‘,
      }
  })
  
  // data：第二种（Vue的组件里，必须使用函数式的data）
  /* data是一个函数 */
  new Vue({
      el: ‘#root‘,
      data: function () {
          return {
              message: ‘message in vue data‘,
          }
      }
  })
  /* data是一个函数，且函数简写 */
  new Vue({
      el: ‘#root‘,
      data() {
          return {
              message: ‘message in vue data‘,
          }
      }
  })
  

00_Vue基础语法