一.Vue文件內容
<template>
</template>
<script>
</script>
<style>
</style>
template:Vue 組件中定義組件的模板部分。
script: 代碼區
style: CSS樣式區
二.VueAPI風格
(1)選項式
(2)組合式
三.Vue目錄結構
四.模板語法及屬性綁定
{{name}} :text文本語法。
使用示例:{{name}}, {{name+'!'}},{{name?'1':'2'}},{{name.split("").reverse()}}
（1）Vue標籤功能
|
綁定名稱
|
功能
|
示例
|
|
v-html
|
類似innerHTML功能
|
<p v-html="text" />
|
|
v-bind
|
屬性綁定
|
v-bind:id,v-bind:class 或者直接簡寫 :id
|
|
v-if
|
條件標籤,條件區塊內事件監聽和自組裝件會銷燬和重建，v-if 高切換開銷
|
<div v-if="flg">show</div> 當這個條件爲真時候就能看到show 這個文本
|
|
v-else
|
條件標籤的分支標籤
|
<div v-if="flg">show</div>
接<div v-else>hidden</div>
|
|
v-else-if
|
條件標籤的分支判斷標籤
|
<div v-if="flg">show</div>
接<div v-else-if=“flg2”>hello</div>
|
|
v-show
|
無論渲染如何，始終會被渲染，高初始渲染開銷
|
<div v-show="flg">show</div>
|
|
v-for
|
遍歷標籤，用於遍歷數組,對象
|
<p v-for="item in array" />
或
<p v-for="(item,index) in array"
:key="index" >{{item}} -{{index}}</p>
這種可以獲取遍歷序列index,key綁定特殊attribut屬性
或
<p v-for="(item,key,index) in array" >{{item}} -{{index}}</p>
這種可以獲取遍歷序列index 以及對象屬性名稱
|
|
v-on
|
點擊事件也可以用@來簡寫
裏面可以直接賦值參數也可以調用有參無參方法
|
<button @click="count++" />
<button v-on:click="count++" />
<button @click="add(3)" />
<button @click="add(item)" v-for="(item ,index) of array" :key="index"/>
|
|
v-model
|
表單輸入綁定,修飾符 lazy,number,trim.
lazy：用戶回車後得到輸入數據
|
在form表單下可以通過 <input type="text" v-model ="message"> {{message}} 得到用戶實時輸入的值
|
|
v-slot
|
在插槽中聲明插槽內容指明引用template，
可以通過#進行簡寫
|
在父級組件內容中<template v-slot:自定義名稱><h1>模板1</h1></template>，子集通過<slot name="插槽模板自定義名稱"></slot>得到對應模板。
子元素:變量可以傳遞參數 例:<slot :自定義名稱="變量名稱"></slot>，父元素在子組件標籤中通過 v-slot="slotProps" 具名可以用#自定義名稱=“slotProps” 的到子元素的變量例:slotProps.msg 得到子組件變量
|
|
:is
|
切換不同組件，使用這個屬性組件會被卸載
|
<components :is="自定義組件變量"/>
|
五.事件
|
事件名稱
|
用途
|
|
stop
|
@click.stop="doThis" 單擊事件將停止傳遞
|
|
prevent
|
@submit.prevent="onSubmit" 提交事件將不再重新加載頁面
@click.stop.prevent="doThat" 修飾語可以使用鏈式書寫
|
|
self
|
僅當 event.target 是元素本身時纔會觸發事件處理器 ，事件處理器不來自子元素
|
|
capture
|
添加事件監聽器時，使用 `capture` 捕獲模式，指向內部元素的事件，在被內部元素處理前，先被外部處理
|
|
once
|
點擊事件最多被觸發一次
|
|
passive
|
修飾符一般用於觸摸事件的監聽器 ，滾動事件的默認行爲 (scrolling) 將立即發生而非等待 `onScroll` 完成，以防其中包含 `event.preventDefault()
|
請勿同時使用 .passive 和 .prevent，因爲 .passive 已經向瀏覽器表明了你不想阻止事件的默認行爲。如果你這麼做了，則 .prevent 會被忽略，並且瀏覽器會拋出警告。
六.數組
（1）數據變更方法 ：push,pop,shift,unshift,splice,sort,reverse 可以UI同時得到更新
（2）替換方法：filter,concat,slice UI不會同時得到更新
七:樣式綁定
示例：
<p class="{'style':flg}">
<p class="{object}">
<p class="[param1,param2]">
<p class="[flg?'style1':'style2']">
<p class="[{'styple':flg},object]">
在style 標籤中 如果沒有添加 scoped 那麼你聲明的樣式將在全局中生效
八.節點
可以通過$refs來獲取dom節點
<div ref="node1" />
例如：this.$refs.node1 就可以獲取div的節點
九.組件
（一）局部組件引入
(1) import 引入組件 例: import { 組件名稱 } from '@路勁'
(2) 注入主鍵 在export 塊中components 聲明組件 例子 export default{components:{ keyName :yourModel}}
(3) 顯示組件 在template 中寫入你的組件 <yourModel />
(二) 全局引入
在main.js中註冊組件需要在createApp 和 mount 之間註冊組件
例: app.component("模塊","yourModel");
(三)參數傳遞
（1）props 可以傳遞字符串，數組，對象, 函數
<childMode :param1="hello"/>在子模塊通過props 來獲取例： props:[“param1”] 獲取，
函數傳遞：通過組件屬性的:onEvent="方法名" props:{onEvent:Function}
（2）數據驗證 可以在 props:{ param1:{ type:[聲明的數據類型]}}
（3）provide 可以通過元祖數據傳遞至所有子組件，子組件通過 inject來接受此數據。
例：provide:{msg:"This is a test"}
inject:["msg"]
（四）事件傳遞
A，B組件，A是B組件的父級。
B通過方法調用 this.$emit("自定義事件名稱")
在A組件中將子類組件 通過@自定義組件名稱來傳遞事件 例子<child @自定義事件名稱="觸發方法" />
(五)透傳屬性
可以直接在組件中聲明一個class 例:<MyComponents class="color"/> 這個class會被傳遞到這個組件中 在MyComponents 中可以直接禁止該class 例: export default{inheritAttrs:false}
但是如果這個組件存在多個標籤那麼這個class即失效
只能從父級傳遞到子級
(六) 生命週期
組件聲明週期分別四個部分：創建期,掛載期,更新期,銷燬期分別對應的調用前調用後函數爲:
創建期：前beforeCreate 後created
掛載期：前beforeMounte 後mounted
更新期：前beforeUpdate 後updated
銷燬期：前beforeUnmount 後unmounted
如果不想讓組件卸載可通過<keep-alive> 標籤可以保持組件的存活
（七）異步組件
可以通過 defineAsyncComponent方法異步加載組件例：
const CommponentA = defineAsyncComponent(()=> import("vue路徑"));
十.Slots
（一）html傳遞
聲明一個自己的MyComponent 在父類組件中通過標籤嵌套寫入HTML
父類VUE例:<MyComponent ><h3>This is a Test</h3></MyComponent >
在子類標籤中直接在tmplate 寫入 <slot></slot>即可將父類中MyComponent標籤嵌套的HTML 傳遞過來。如果父類沒有html數據可以通過在slot標籤中寫入html標籤從而到達默認數值。
在父級組件內容中<template v-slot:自定義名稱><h1>模板1</h1></template>，子集通過<slot name="插槽模板自定義名稱"></slot>得到對應模板