Vue2

createApp：每個應用都是通過createApp 函數創建的
create：頁面渲染前執行
mount：頁面渲染后執行
v-bind：

支持額外的值類型如字符串、對象或數組
```
<button v-bind:disabled="isDisabled">Biwin</button>

<button :disabled="isDisabled">Biwin</button>
```
不使用 v-bind，屬性的值將是表達式的字面量值，而不是 Vue 實例的里面數據屬性、

v-on：

監聽 DOM 事件

<a v-on:click="doSomething"> ... </a>
<!-- 簡寫 -->
<a @click="doSomething"> ... </a>

v-model：雙向綁定

v-model 在組件上都是使用屬性值作為 prop，并以 update:屬性值 作為對應的事件

v-model 指定一個參數來更改這些名字

注：

v-bind主要用于綁定數據和屬性以及表達式，使得vue中的數據能夠同步到頁面。這種綁定是單向的，意味著數據只能從Vue實例流向頁面元素。v-bind可以給任何屬性賦值，包括文本、屬性、表達式和HTML。
v-model則是一種雙向綁定，不僅可以將Vue實例中的數據同步到頁面，還可以捕獲用戶的輸入值，并將這些值賦值給Vue實例中的屬性。v-model主要用于表單元素，如text、radio、checkbox和selected等，這些元素具有value屬性。

ref：用于注冊一個引用信息
```
<div ref="biwin">Biwin</div>
```
在 Vue 實例中，你可以通過 this.$refs.biwin 來訪問這個 div 元素。這允許你直接操作 DOM 元素，而不是只能通過數據綁定或方法來影響視圖

類和樣式：

:style 和 style的區別：
:style	允許動態地將樣式綁定到特定的元素或組件
style	允許直接在元素上應用 CSS 樣式，不需要任何額外的 CSS 文件或樣式表
:class和class的區別：
:calss	可以動態綁定一個或多個樣式，可以實現條件的動態綁定、根據值列表進行動態綁定、根據類名長度進行動態綁定、根據綁定屬性的個數進行動態綁定等
class	只能聲明靜態樣式

v-if vs. v-show

v-if 是“真實的”按條件渲染，因為它確保了在切換時，條件區塊內的事件監聽器和子組件都會被銷毀與重建。

v-if 也是惰性的：如果在初次渲染時條件值為 false，則不會做任何事。條件區塊只有當條件首次變為 true 時才被渲染。

相比之下，v-show 簡單許多，元素無論初始條件如何，始終會被渲染，只有 CSS display 屬性會被切換。

總的來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要頻繁切換，則使用 v-show 較好；

如果在運行時綁定條件很少改變，則 v-if 會更合適

v-for：

情況1.
<el-option
  v-for="dict in dictList"
  :key="dict.value"
  :label="dict.label"
  :value="dict.value"
/>
情況2.
<li v-for="(value, key, index) in prodList">
  {{ index }}. {{ key }}: {{ value }}
</li>
prodList:[] //里面內容是對象
情況3.
<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

一般不和v-if一起用，但是一起用時，v-if優先級大于v-show

事件 @click
v-input：

v-model.lazy : 在默認情況下，是添加.lazy的，每次change都會改變輸入框里面的值

v-model.number : 輸入內容自動轉換為數字

v-model.trim : 去掉輸入內容前后空格

生命周期：初始化->銷毀有八個階段
1. beforeCreate：初始化事件和生命周期，在實例初始化之后，在數據監聽和事件配置之前觸發。在這個事件中我們是獲取不到data數據的。
2. created：在實例創建后調用，此時已經完成了數據的觀測，但是模板還未編譯/掛載。
3. beforeMount：鉤子函數，在組件被掛載到頁面之前觸發。一般我們可以在這個函數中進行一些頁面初始化的工作，比如通過ajax請求數據來對頁面進行初始化。
4. mounted：在實例被掛載后調用，此時模板已經編譯/掛載。
5. beforeUpdate：在響應式數據更新時觸發，發生在虛擬 DOM 重新渲染和打補丁之前，這個時候我們可以對可能會被移除的元素做一些操作，比如移除事件監聽器。
6. updated：在數據更新后調用，此時組件已經重新渲染。
7. beforeDestroy：在實例銷毀前調用。
8. destroyed：在實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁，所有的事件監聽器會被移除，所有的子實例也會被銷毀。

偵聽器：

用于觀察和響應Vue實例上的數據變化。當你在Vue組件中需要對某些數據進行實時監控并在數據變化時執行某些操作時，可以使用偵聽器

<template>  
  <div>  
    <input v-model="inputValue" />  
    <p>{{ message }}</p>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      inputValue: '',  
      message: ''  
    };  
  },  
  watch: {  
    inputValue(newVal) {  
      // 當 inputValue 發生變化時，執行此函數  
      this.message = `你輸入了: ${newVal}`;  
    }  
  }  
};  
</script>

模板引用：ref

引用元素：

<template>  
  <div>  
    <button ref="myButton">Click me</button>  
    <p>The button has been clicked {{ buttonClickCount }} times.</p>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      buttonClickCount: 0  
    };  
  },  
  mounted() { 
      //addEventListener使用js事件監聽器
    this.$refs.myButton.addEventListener('click', () => {  
      this.buttonClickCount++;  
    });  
  }  
};  
</script>

父組件調用子組件的方法以及屬性值

子組件：

<template>  
  <div>  
    <button @click="showMessage">點擊我</button>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      message: 'Hello from Child Component!'  
    };  
  },  
  methods: {  
    showMessage() {  
      alert(this.message);  
    }  
  }  
};  
</script>

父組件：

<template>  
  <div>  
    <ChildComponent ref="childRef" />  
    <button @click="callChildMethod">從父組件調用子組件方法</button>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: { ChildComponent },  
  methods: {  
    callChildMethod() {  
      console.log(this.$refs.childRef.message); // 訪問子組件的 message 屬性值  
      this.$refs.childRef.showMessage(); // 調用子組件的 showMessage 方法  
    }  
  }  
};  
</script>

組件基礎

父組件傳遞值給子組件：

父組件：

<script setup>
import { ref } from 'vue'
import BlogPost from './BlogPost.vue'
  
const posts = ref([
  { id: 1, title: 'My journey with Vue' },
  { id: 2, title: 'Blogging with Vue' },
  { id: 3, title: 'Why Vue is so fun' }
])
</script>
?
<template>
    <BlogPost
    v-for="post in posts"
      :key="post.id"
    :name="post.title"
    ></BlogPost>
</template>

子組件：

<script setup>
defineProps(['name'])
</script>
?
<template>
  <h4>{{ name }}</h4>
</template>

組件，監聽與觸發

目的：觸發子組件的方法，父組件接收到子組件傳來的值

<!-- 子組件 -->  
<template>  
  <button @click="handleClick">Click me</button>  
</template>  
  
<script>  
export default {  
  methods: {  
    handleClick() {  
      this.$emit('custom-event', 'Hello from child component!');  
    }  
  }  
};  
</script>
//點擊按鈕時，子組件會觸發一個名為 custom-event 的自定義事件，并傳遞字符串 'Hello from child component!' 給父組件
<!-- 父組件 -->  
<template>  
  <ChildComponent @custom-event="handleCustomEvent" />  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: { ChildComponent },  
  methods: {  
    handleCustomEvent(eventData) {  
      console.log(eventData); // 輸出 "Hello from child component!"  
    }  
  }  
};  
</script>

posted @ 2024-01-25 09:33 jessi呀閱讀(34) 評論(0) 收藏舉報

刷新頁面返回頂部

jessi不吃西瓜

Vue2

Vue2

公告