Day61 (Vue)

學習筆記

rouoxo 2021-09-15 03:04:40 ‧ 944 瀏覽

分享至

影片Vue01

1.Vue (Part_1 > Lab_HelloVueJS > hello_VueJs.HTML)
(1)引用vue

   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

(2)建立顯示區 {{}}等同react{}

     <div id="app1">{{ message }}</div>

(3)宣告app1，Vue在HTML與DATA之間，DATA改變立即顯示
用法：{{}}　物件
Vue特性：無需使用類似React setState也會更新內容(測試：檢查後輸入app1.message = 123)

　　　<div id="app1">{{ message }}</div>

      var app1 = new Vue({

        // element
        el: "#app1",

        // 與{{ message }}</div>對應
        data: {
          message: "Hello Vue!",
        },
      });

(4)宣告app2
用法：v-bind:title、:title 物件

    <div id="app2">
    <!-- title HTML語法 -->
    <span title="滑鼠放到此處會顯示提示"> 請將滑鼠移動到本區上方1 </span><br />

    <!-- 5. v-bind:title Vue語法 等同{{}} -->
    <!-- 方法1. -->
    <span v-bind:title="message"> 請將滑鼠移動到本區上方2 </span><br />
    <!-- 方法2. 簡寫-->
    <span :title="message"> 請將滑鼠移動到本區上方3 </span><br />
    </div>


      //用法：v-bind:title、:title
      var app2 = new Vue({
        // element
        el: "#app2",
        // 與v-bind:title="message"對應
        data: {
          message: Date(),
        },
      });

(5)宣告app3
用法：v-if　booling
無需使用類似React setState也會更新內容(測試：檢查後輸入app3.seen = ture ;)

      <div id="app3">
         <span v-if="seen">Now you see me</span>
      </div>

      var app3 = new Vue({
        // element
        el: "#app3",
        data: {
          seen: true,
          //   seen: false,
        },
      });

使用在事件v-on + if else

  <div id="app3_1">
    <!-- @ 是 v-on 的縮寫 -->
    <button @click="seen=!seen">點我觀看v-if-else</button>
    <span v-if="seen">v-if</span>
    <span v-else>v-else</span>
  </div>

(6)宣告app4
用法：v-for for迴圈

     <!-- 9. for迴圈 todoItem 可以改 但要一致 此處只是要求要一個變數-->

     <div id="app4">
       <!-- todoList變數內 的 text-->
       <ol>
         <li v-for="todoItem in todoList">{{ todoItem.text }}</li>
       </ol>

       <!-- todoList變數內 的 text + key -->
       <ul>
         <li v-for="(doItem, key) in todoList">{{doItem.text}} -- {{key}}</li>
       </ul>
       <ul>

         <!-- .text 幾個跑幾次 -->
         <li v-for="todoItem in todoList">A</li>
       </ul>
     </div>

      var app4 = new Vue({
        // element
        el: "#app4",
        data: {
          todoList: [{ text: "Learn JavaScript" }, 
                     { text: "Learn Vue" }, 
                     { text: "Build something awesome" }],
        },
      });

(7)宣告app1_1
用法：function v-on=@ 事件

    <div id="app1_1">
      {{ message }}<br />
      <!-- reverseMessage方法名稱 -->
      <button v-on:click="reverseMessage">Reverse Message</button>
    </div>


      var app1_1 = new Vue({
        el: "#app1_1",
        data: {
          message: "Hello Vue!",
        },
        // 方法
        methods: {
          // 無需使用=>函式也能抓到this
          reverseMessage: function () {
            this.message = this.message.split("").reverse().join("");
            // this.message = DATA();
          },
        },
      });

(8)宣告app1_2
用法：function v-on 事件並 + 參數

    <div id="app1_2">
      {{ message }}<br />
      <!-- reverseMessage方法名稱 -->
      <button v-on:click="reverseMessage(3)">Reverse Message</button>
    </div>


      var app1_2 = new Vue({
        el: "#app1_2",
        data: {
          message: "Hello Vue!",
        },
        // 方法
        methods: {
          // 無需使用=>函式也能抓到this
          reverseMessage: function (x) {
            // split把字串拆成[] ; reverse相反 ; join連接在一起
            this.message = x;
            // this.message = DATA();
          },
        },
      });

(9)宣告app1_3
v-mould 雙向改變
用法：input = text 顯示值

    <div id="app1_3">
      <input v-model="message" /><br />
      {{ message }}<br />
      <!-- reverseMessage方法名稱 -->
      <button v-on:click="reverseMessage">此處資料會隨著text換掉</button>
    </div>

(10)宣告app5
用法：迴圈如何知道點到第幾個?(偵錯用，放入變數)

      <div id="app5">
        <!-- todoList變數內 的 text + key -->
        <ul>
          <li v-for="(doItem, key) in todoList" v-on:click="liClick(key)">{{doItem.text}} -- {{key}}</li>
        </ul>
      </div>

      var app5 = new Vue({
        // element
        el: "#app5",
        data: {
          todoList: [{ text: "Learn JavaScript" }, { text: "Learn Vue" }, { text: "Build something awesome" }],
        },
        methods: {
          liClick: function (x) {
            alert(x);
          },
        },
      });

2.Vue CLI command line
透過命令列產生專案

(1)終端機下，查看是否有安裝過Vue物件
C:\XXX\VueJS
按下 Ctrl + ` 組合鍵也可開啟終端機視窗

vue --version 查看是否有安裝過Vue物件

第一次通常沒有

(2)安裝Vue物件

npm install -g @vue/cli

-g 全域安裝

(3)建立 Vue.js 專案

vue create hello-vue-cli

利用上下鍵切換，選擇
Default (Vue 3) ([Vue 3] babel, eslint)
選好之後，按下鍵盤鍵

出現hello-vue-cli資料夾

(4)開啟hello-vue-cli終端機，並跑伺服器

npm run serve

如果瀏覽器沒有自動啟動，請手動在瀏覽器輸入:
http://localhost:8080/

(5)建立AppHeader.vue檔案
hello-vue-cli\src\components\AppHeader.vue

public資料夾內是前端
src/main.js把App.vue內的App物件放到public/index/內的#App

(6)建立AppHeader元件於AppHeader.vue內

     <template>
       <header>
           <!-- AppHeader元件放在這 -->
         <h1>{{ headerMessage }}</h1> 
         <hr />
       </header>
     </template>
     
     <script>
     export default {
       name: "AppHeader", //AppHeader元件
       data() {
         return {
           headerMessage: "eeeeeeeeeeeeeeeeeeeeeeeeeeeHello! Vue.js",
         };
       },
     };
     </script>

(7)把AppHeader元件顯示出來
hello-vue-cli\src\app.vue

import AppHeader from './components/AppHeader.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
    AppHeader
  }
}

查看畫面，會改變
http://localhost:8080/

3.把React改成Vue專案
VUEJS > React_demo_change_Vue

(1)複製React檔案(Lab_WebAPI\public\index_已連線資料庫.html)
css、fonts、js、index_已連線資料庫.html

(2)貼到React_demo_change_Vue，並複製一份改名為index.html

(3)引用Vue.js
index.html

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

(4)製作元件

    <div id="app1">{{ message }} + {{ date }}</div>

      var app1 = new Vue({
        el: "#app1",
        data: {
          message: "Hello Vue!",
          date: Date(),
          newsList: [
            { newsId: 1, ymd: "2017-05-01", title: "Item 1" },
            { newsId: 2, ymd: "2017-05-01", title: "Item 2" },
            { newsId: 3, ymd: "2017-05-02", title: "Item 3" },
            { newsId: 4, ymd: "2017-05-03", title: "Item 4" },
            { newsId: 5, ymd: "2017-05-04", title: "Item 5" },
          ],
        },
      });

(5)讓畫面(html)只留下First item

(6)製作迴圈for在First item

   <li v-for="(newsItem, key) in newsList"

此處注意，要記得綁#app1，否則吃不到(有區域性)

(7)First item由固定改為變數{{newsItem.title}}

(8)並增加[{{newsItem.ymd}}]

(9)按鈕增加事件

   <button v-on:click="editButtonClick(key)"

(10)增加元件方法

   methods: {
          editButtonClick: function (key) {
            alert(key);
          },
        },

此處的key由(6)取得

(11)新增對話盒元件

      var dlg = new Vue({
        el: "#newsModal",
        data: {
          title: "aaa",
          ymd: "bbb",
        },
      });

(12)對話盒增加v-mould 雙向改變

      v-model="title"
      v-model="ymd"

(13)變更app1方法
跳出對話盒

        methods: {
          editButtonClick: function (key) {
            alert(key);
            $("#newsModal").modal({ backdrop: "static" });
          },
        },

(14)讓title與ymd由固定轉變數

(14-1)dlg元件

      var dlg = new Vue({
        el: "#newsModal",
        data: {
          title: "",
          ymd: "",
        },
      });

(14-2)app1元件方法新增抓值

        methods: {
          editButtonClick: function (key) {
            // alert(key);
            dlg.title = this.newsList[key].title;
            dlg.ymd = this.newsList[key].ymd;
            $("#newsModal").modal({ backdrop: "static" });
          },
        },

(15)確定紐綁事件，讓編輯鈕可以使用

(15-1)按編輯紐時，讓被編輯的元素key=-1

        methods: {
          editButtonClick: function (key) {
            dlg.currentIndex = key; //按確定按鈕時，送新的key值(-1)進去

        var dlg = new Vue({
          currentIndex: -1,

(15-1)按下確定時，抓-1值進行變更，並隱藏跳窗

        <button type="button" v-on:click="okButtonClick" id="okButton" 
        class="btn btn-success">
        <span class="glyphicon glyphicon-ok"></span> 確定


        var dlg = new Vue({
        el: "#newsModal",
        data: {
          currentIndex: -1,
          title: "",
          ymd: "",
        },
        methods: {
          okButtonClick: function () {
            var key = this.currentIndex;
            app1.newsList[key].title = this.title;
            app1.newsList[key].ymd = this.ymd;
            $("#newsModal").modal("hide");
          },
        },
      });