Vue 六角学院-学习笔记(商品管理介面)

官网cdn

建立环境

先将以下(载入bs)贴到head标籤其他css前(一般多使用npm)

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

并将以下加入body

   <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>    <div id="app">{{ message }}</div>    <script>      const { createApp } = Vue;      createApp({        data() {          return {            message: "Hi Vue",          };        },        created() {},        methods: {},      }).mount("#app");    </script>

之后可用vite快速建置环境以上环境

从0开始作业练习

原始码参考

大原则：input 都用v-model双向绑定 v-for要配:key
製作需操作的按钮等 可直接先命名@click并写入methods
有外部资料记得在created週期中先加入
写逻辑的时候 想像点下去 应该要看到或发生的事

不熟悉的地方

可外包div class="text-end"将inline-block靠右
动态属性(会跟着资料变动)记得加上v-bind 如 :src
製作table时 格式参考

          <table class="table">        <thead>          <tr>            th*4          </tr>        </thead>        <tbody>          <tr>            td*4          </tr>        </tbody>      </table>

练习用参考资料 一般放在script内最前

const products = [        {          id: "1",          imgUrl:            "https://images.unsplash.com/photo-1516906571665-49af58989c4e?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=300&q=80",          name: "MacBook Pro",          onStock: false,        },        {          id: "2",          imgUrl:            "https://images.unsplash.com/photo-1512499617640-c74ae3a79d37?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80",          name: "iPhone",          onStock: false,        },      ];