[上课笔记][20250224] 恆逸 Vue3-58码农网

my lesson note

老师範例的档案路径
\\10.0.1.2\share
帐：user
密：111

浏览器开发者工具先点击Vue页籤>Component>点击console页籤即可在主控台下指令$vm.data.msg(属性)取得vm的资料

Options API在网页中引用"vue.global.js"和"vue.esm-browser.js"这两个有什么差异？
https://grok.com/share/bGVnYWN5_98b56147-028c-4874-95f6-405af0215981

Options API与Composition API两者有何差异？我该使用哪种？
https://grok.com/share/bGVnYWN5_1f16d4c4-f748-4d08-9102-b1f705f6c681

从jQuery事件中呼叫Vue的方法&取得Vue的资料属性
https://grok.com/share/bGVnYWN5_6f0a37a9-8f17-4bce-b5a7-ad1f41cc703d

计算属性的简单範例

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
</head>

<body>
  <div id="app">
 
    <input type="text" v-model="msgUpper" />
    <p>{{ msg }}</p>
    <p>{{ msgUpper }}</p>
  </div>
  <script type="importmap">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
      }
    }
  </script>

  <script type="module">
    import { createApp } from 'vue'
    createApp({
      data() {
        return {
          msg: "Hello World ! ",
        };
      },
      computed: {
        msgUpper: {
          get  () {
            return this.msg.toUpperCase()
          },
          set  (newvalue) {
            this.msg = newvalue.toLowerCase()
          }
        },
      },
    }).mount("#app");
  </script>
</body>

</html>

侦听器(Watcher) 监看资料属性是否变动，简单範例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
</head>

<body>
  <div id="app">
    <input type="text" v-model="msg"/>   <br/>
    <p v-text="msg"></p>
  </div>
  <script type="importmap">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
      }
    }
  </script>

  <script type="module">
    import { createApp } from 'vue'
    const vue_vm = createApp({
      data() {
        return { 
          msg: "",
        };
      },
      watch: {
        msg: function (msg) {
          console.log("监看msg值:"+msg);
        },

      },
      methods: { 
      }, 
    }).mount("#app");
  </script>
</body>

</html>

在HTML DOM使用$event传递触发Vue JS事件的DOM物件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <a href="https://vuejs.org/" @click="showMsg" target="_blank">  Go To Vue.js  </a>
      <br/>
      <a href="https://vuejs.org/" @click="showMsg($event)" target="_blank">  Go To Vue.js  </a>

    </div>
  <script type="importmap">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
      }
    }
  </script>

  <script type="module">
    import { createApp } from 'vue'   
      createApp({
        data() {
          return {};
        },
        methods: {
          showMsg: function (event) {
            alert("No redirect !");
            event.preventDefault();
            console.log(event.target);
          },
        },
      }).mount("#app");
    </script>
  </body>
</html>

Vue3 与 Bootstrap-select 整合示例
https://grok.com/share/bGVnYWN5_81cf68da-5e16-4c4c-9178-f6e386cdb747

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <title>Vue 3 with Bootstrap-select Example</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap-select CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/css/bootstrap-select.min.css" rel="stylesheet">
</head>
<body>
    <div id="app" class="container mt-5">
        <h2>选择项目</h2>
        <!-- 搜寻框：data-live-search="true"  -->
        <select class="selectpicker" 
                v-model="selectedItemValue" 
                data-live-search="false"  
                title="请选择一个项目"
                @change="handleSelection">
            <option v-for="item in items" 
                    :key="item.id" 
                    :value="item.id" v-text="item.name"> 
            </option>
        </select>
        
        <div class="mt-3" v-if="selectedItemValue">
            getSelectedItemName: {{ getSelectedItemName }} <br/>
            selectedItemValue: {{selectedItemValue}}
        </div>
    </div>
    <!-- jQuery (bootstrap-select 依赖) -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> 
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Bootstrap-select JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/bootstrap-select.min.js"></script>

    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    items: [],
                    selectedItemValue: null
                }
            },
            computed: {
                getSelectedItemName() {
                    const item = this.items.find(item => item.id === this.selectedItemValue);
                    return item ? item.name : '';
                }
            },
            methods: {
                fetchItems() {
                    // 使用 Promise 替代 async/await
                    fetch('https://jsonplaceholder.typicode.com/users')
                        .then(response => response.json())
                        .then(data => {
                            // 转换资料格式
                            this.items = data.map(user => ({//集合转型
                                id: user.id,
                                name: user.name
                            }));
                            // 更新 bootstrap-select
                            this.$nextTick(() => {
                                $('.selectpicker').selectpicker('refresh');
                            });
                        })
                        .catch(error => {
                            console.error('获取资料失败:', error);
                        });
                },
                handleSelection() {
                    console.log('选择的项目ID:', this.selectedItemValue);
                }
            },
            mounted() {
                // Vue 挂载后 Ajax 获取资料
                this.fetchItems();
            },
            updated() {
                console.log("Vue updated");
                // 当 DOM 更新后重新刷新 selectpicker
                //$('.selectpicker').selectpicker('refresh');
            }
        }).mount('#app');
    </script>
</body>
</html>

子元件的props从父元件接收资料，基本用法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- 预设没v-bind给字串值 -->
      <welcome-component message="Hello"></welcome-component> 
      <!-- 给JS值 -->
      <welcome-component :message="'bind Hi'" :age="1+2"></welcome-component>
    </div>
    <script type="importmap">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
      }
    }
  </script>

  <script type="module">
    import { createApp } from 'vue'
      let welcome = {
        /*VS Code的es6-string-html 扩充套件帮忙高亮html字串*/
        template: /*html*/`<h1> {{ message }} : {{ age }}</h1>`,
        props: ["message","age"]
      };
      var app = createApp({
        components: {
          "welcome-component" : welcome
        },
      });
      app.mount("#app");
    </script>
  </body>
</html>

父元件透过子元件的props传递资料，子元件透过$emit传递事件给父元件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
</head>

<body>
  <div id="app">
    <input type="text" v-model="name">
    <welcome-component v-bind:user-name="name" v-on:sayhello="onsayhello" v-on:inputchange="childinputchange" >
    </welcome-component>
  </div>
  <script type="importmap">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
      }
    }
  </script>

  <script type="module">
    import { createApp } from 'vue'
    let welcome = {
      /*子元件的input v-model不可直接修改唯读的props userName*/
      template: /*html*/`<div>子元件：
                    <label> {{labelText}} </label>
                    <input type="text" v-model="inputText" />
                    <button v-on:click="$emit('sayhello', inputText)">
                  sayhello
              </button>
                    </div>`,
      props: ["userName"],
      data: function () {
        return {
          labelText: " Hello ",
          inputText: this.userName,/*预设值，只执行一次，读取父元件传来的userName*/
        };
      },
      watch: {
        userName : function(newValue,oldValue) {
          console.log(`userName newValue:${newValue},userName oldValue:${oldValue}`);
          this.inputText = newValue;
        },
        inputText: function(newValue,oldValue){
          console.log(`inputText newValue:${newValue},inputText oldValue:${oldValue}`);
          this.$emit('inputchange',newValue);

        }
      },
    };

    var app = createApp({
      data() {
        return {
          name: "mary",
        };
      },
      components: {
        "welcome-component": welcome,
      },
      methods: {
        onsayhello: function ( msg ) {
         alert(msg );
        },
        childinputchange:function(childInputText)
        {
          this.name = childInputText;
        }
      },
    });
    app.mount("#app");
  </script>
</body>

</html>

父元件透过物件传递参考给子元件，在子元件中编辑传递过来的物件属性会有嚮应式连动效果，子元件不必像上述一样使用watch来监听

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
</head>

<body>
  <div id="app">
    <input type="text" v-model="user.name">
    <welcome-component v-bind:user="user" v-on:sayhello="onsayhello"  >
    </welcome-component>
  </div>
  <script type="importmap">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
      }
    }
  </script>

  <script type="module">
    import { createApp } from 'vue'
    let welcome = {
      /*子元件的input v-model不可直接修改唯读的props参考*/
      template: /*html*/`<div>子元件： 
                    <input type="text" v-model="user.name" />
                    <button v-on:click="$emit('sayhello', user)">
                        sayhello
                    </button>
                    </div>`,
                    props: {
                               user : Object         
                           },
      data: function () {
        return {  
        };
      },
      watch: { 
      },
    };

    var app = createApp({
      data() {
        return {
          user:{    name:"myName"   }
        };
      },
      components: {
        "welcome-component": welcome,
      },
      methods: {
        onsayhello: function (user) {
          alert(`this.user.name:${this.user.name}，user.name:${user.name}`);
        } 
      },
    });
    app.mount("#app");
  </script>
</body>

</html>

Bootstrap 5 Alert 整合 Vue 3 (使用子元件)
https://grok.com/share/bGVnYWN5_b256d2bf-6d2e-474d-8000-5cdd5d82fe1e

ASP.NET MVC 整合 Vite建立的Vue专案
https://grok.com/share/bGVnYWN5_4e62978a-cbdc-47fe-8c93-621f328a022d

Vue3 Composition API 介绍
https://grok.com/share/bGVnYWN5_90603467-94cf-44a1-88a0-7c7e4071c1d1

<scrip setup>改成setup()的写法：setup()函式多了 export default 且须回传资料给setup()函式，可以在ASP.net MVC的视图中使用setup()函式写法，<script setup>标籤则是Vue专案专用
https://grok.com/share/bGVnYWN5_d40a054d-7a20-4251-a5b7-928b9d126c51

使用ref创建基本型别、null、undefined的嚮应式对象；阵列、物件用reactive创建嚮应式对象

 <template>
  <h1> Home </h1>
  <div>
    <p> Employee Name :{{ empName }} </p>
    <p> Age : {{ age }} </p> 
    <p> Is Married : {{ isMarried }} </p>
    <p> Array Value: {{ arry[0] }} </p> <!-- 显示阵列的第一个值 -->
  </div>
  <div>
    <button @click="buttonClick" >Click me</button>
  </div>
</template> 
<script>
import { ref, reactive } from "vue";

export default {
  setup() {
    let empName = "shadow";
    let age = ref(39);//基本型别
    let isMarried = false;
     let arry = reactive([0,1]);//阵列、物件用reactive创建嚮应式对象
    const buttonClick = () => {
      arry[0]++;//这里累加1效果 
      age.value++;
    };

    // 回传要暴露给模板的变数和函数
    return {
      empName,
      age,
      isMarried,
      arry,
      buttonClick
    };
  }
};
</script>

给这篇文章的作者打赏

关于作者: 网站小编

相关文章

[记录] SSMS 20 geometry 支援度

[AI] Azure Document Intelligence自订模型的栏位

[AI] Azure PII进行资料遮罩

热门文章

1 点赞(415) 阅读(108)

2透过 Transporter 发布 iOS 应用程式到 App Store Connect

3Visual Studio 存取 Apple Developer Account 但凭证却不在 Keychain 当中

4经由 Visual Studio 发布 iOS 应用程式到 App Store Connect 时所需的 App 专属密

5 点赞(415) 阅读(67)