插值语法

  1. 用于解析标签体内容

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8">
    5.  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.  <title>Document</title>
    8.  <script type="text/javascript" src="../01/js/vue.js"></script>
    9. </head>
    10. <body>
    11.  <div id="root">
    12.      <h1>hello,{{name}}</h1>
    13.  </div>
    15.  <script type="text/javascript">
    16.      Vue.config.productionTip = false
    17.          new Vue(
    18.          {
    19.              el:'#root',
    20.              data:{
    21.                  name:'插值语法',
    22.              }
    23.          }
    24.      );
    25.  </script> 
    26. </body>
    27. </html>

    指令语法

  2. 用于解析标签

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8">
    5.  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.  <title>Document</title>
    8.  <script type="text/javascript" src="../01/js/vue.js"></script>
    9. </head>
    10. <body>
    11.  <div id="root">
    12.      <a v-bind href="url">指令语法</a>
    13.  </div>
    15.  <script type="text/javascript">
    16.      Vue.config.productionTip = false
    17.          new Vue(
    18.          {
    19.              el:'#root',
    20.              data:{
    21.                  url:'www.baidu.com'
    22.              }
    23.          }
    24.      );
    25.  </script> 
    26. </body>
    27. </html>

    单项绑定

    <inputtype="text"v-bind:value="name">

    双向绑定

    v-model只能用于输入属性
    <inputtype="text"v-model:value="name2">