Vue-基本语法

 

Vue: v-bind 绑定事件;

el：是挂起的含义，“”里填类名;

 

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 导入vue文件 -->
    <script src="vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  </head>
  <body>
    <div id="app">
      <a v-bind:href="URL">点击一下</a>
    </div>
    <script>
      const app = new Vue({
        el: "#app",
        data() {
          return {
            username: "",
            URL: "https://www.baidu.com/",
          };
        },
      });
    </script>
  </body>
</html>

 

Vue: v-model 绑定事件;

 

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 导入vue文件 -->
    <script src="vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  </head>
  <body>
    <div id="app">
      <input name="username" v-model="username" type="text" />{{username}}
    </div>
    <script>
      const app = new Vue({
        el: "#app",
        data() {
          return {
            username: "",
          };
        },
      });
    </script>
  </body>
</html>

 

Vue: v-on 简写 @click绑定事件;

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <input @click="tests()" value="登录" type="button" />
    </div>
    <script src="vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        methods: {
          tests() {
            alert("12346");
          },
        },
      });
    </script>
  </body>
</html>

 


Vue: v-if ，v-if-else，V-show 绑定事件;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div v-if="ttt">当ttt为true时显示(这是if和else)</div>
      <div v-else>当ttt为false时显示(这是if和else)</div>
      <div v-show="ttt">当ttt为true时(这是show)</div>
    </div>
    <script src="vue.js"></script>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          ttt: false,
        },
      });
    </script>
  </body>
</html>

 

v-for

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div v-for="add in adds">{{add}}</div>
    </div>
    <script src="vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            adds: ["我爱你", "静香"],
          };
        },
      });
    </script>
  </body>
</html>

 

posted @ 2022-10-29 20:34  しゅおく  阅读(23)  评论(0)    收藏  举报