入门

简单使用

编写html文件:

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>计数器</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="asserts/js/vue@3.2.33/vue.global.js"></script>
  </body>

  <script type="text/x-template" id="template">
    <button v-on:click="addOne">加1</button>
    <button v-on:click="minusOne">减1</button>
    <div>Counter: {{ counter }}</div>
  </script>
  <script>
    const App = {
      template: document.querySelector("#template").text,
      data() {
        return {
          counter: 0,
        };
      },
      methods: {
        addOne() {
          this.counter++;
        },
        minusOne() {
          this.counter--;
        },
      },
    };
    const app = Vue.createApp(App);
    app.mount("#app");
  </script>
</html>

image

Bootstrap v4

警告框

  • 必须采用vue的关闭方式,data-dismiss="alert"会销毁整个元素
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>警告框</title>
    <link rel="stylesheet" href="asserts/bootstrap@4.6.1/css/bootstrap.css" />
  </head>
  <body>
    <div id="app"></div>
    <script src="asserts/jquery/jquery-3.6.0.js"></script>
    <script src="asserts/vue@3.2.33/vue.global.js"></script>
    <script src="asserts/popper.js@1.16.1/popper.min.js"></script>
    <script src="asserts/bootstrap@4.6.1/js/bootstrap.js"></script>
  </body>

  <script type="text/x-template" id="template">
    <button class="btn btn-primary" type="button" @click="() => show=true">显示</button>
    <button class="btn btn-secondary" type="button" @click="() => show=false">关闭</button>
    <div v-if="show" ref="alert" class="alert alert-warning alert-dismissible" role="alert">
      <strong>警告!</strong> 后台程序发生异常.
      <button type="button" class="close" aria-label="Close" @click="() => show=false">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  </script>
  <script>
    const App = {
      template: document.querySelector("#template").text,
      data() {
        return { show: true };
      },
      methods: {},
    };
    const app = Vue.createApp(App);
    app.mount("#app");
  </script>
</html>

image-1653273011927

面包屑导航

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>面包屑导航</title>
    <link rel="stylesheet" href="asserts/bootstrap@4.6.1/css/bootstrap.css" />
  </head>
  <body>
    <div id="app"></div>
    <script src="asserts/jquery/jquery-3.6.0.js"></script>
    <script src="asserts/vue@3.2.33/vue.global.js"></script>
    <script src="asserts/popper.js@1.16.1/popper.min.js"></script>
    <script src="asserts/bootstrap@4.6.1/js/bootstrap.js"></script>
  </body>

  <script type="text/x-template" id="template">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#" @click="click">Home</a></li>
        <li class="breadcrumb-item"><a href="#" @click="click">Library</a></li>
        <li class="breadcrumb-item active" aria-current="page" @click="click">Data</li>
      </ol>
    </nav>
    <div>
      当前点击: {{text}}
    </div>
  </script>
  <script>
    const App = {
      template: document.querySelector("#template").text,
      data() {
        return { text: "" };
      },
      methods: {
        click(e) {
          this.text = e.target.text;
        },
      },
    };
    const app = Vue.createApp(App);
    app.mount("#app");
  </script>
</html>

image-1653273972397

按钮

下拉菜单

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>样例</title>
    <link rel="stylesheet" href="asserts/bootstrap@4.6.1/css/bootstrap.css" />
  </head>
  <body>
    <div id="app"></div>
    <script src="asserts/jquery/jquery-3.6.0.js"></script>
    <script src="asserts/vue@3.2.33/vue.global.js"></script>
    <script src="asserts/popper.js@1.16.1/popper.min.js"></script>
    <script src="asserts/bootstrap@4.6.1/js/bootstrap.js"></script>
  </body>

  <script type="text/x-template" id="template">
    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
        下拉菜单
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#" @click="show">菜单1</a>
        <a class="dropdown-item" href="#" @click="show">菜单2</a>
        <a class="dropdown-item" href="#" @click="show">菜单3</a>
      </div>
    </div>
    <div>
      当前选择: {{text}}
    </div>
  </script>
  <script>
    const App = {
      template: document.querySelector("#template").text,
      data() {
        return {
          text: "",
        };
      },
      methods: {
        show(e) {
          this.text = e.target.text;
        },
      },
    };
    const app = Vue.createApp(App);
    app.mount("#app");
  </script>
</html>

image-1653271574702