是。畝拆VUE是iOS和ANDROID平台上的一款Vlog社區與編輯工具，vue傳遞表單到後端迅旁棗後端使用sql生成資料庫表，採用SQL語句進行創啟拿建資料庫和表，另一種是利用資料庫的可視化工具進行創建資料庫。
2. vue下一步點擊語法
1.Mustache（雙大括弧）:
2.v-once：該指令後面不需要跟任何錶達式（v-for後面接表達式）,該指令表示元素和組件只渲染一次，不會隨著數據的改變而改變。
3.v-html：v-html會將數據當html標簽解析後輸出。
4.v-text：<h2 v-text="message"></h2>等效於<h2>{{message}}</h2>，但相比於Mustache，它不夠靈活。
5.v-pre：如<h3 v-pre>{{message}}</h3>，標簽顯示結果就是它標簽本身的內容，即{{message}}。
6.v-cloak：解決屏幕閃動的好方法運運唯。
7.v-bind：基本屬性綁定和動態綁定（對象或數組），將對應的圖片或地址等數據放入data中，使用v-bind將數據引用到對應的標簽中，如<img v-bind:src="imgUrl" />，其中data數據如下：
v-bind語法糖（簡寫方式）：<img v-bind:src="imgUrl" />可寫為<img :src="imgUrl" />。
8.計算屬性：其本質就是屬性，包含setter和getter，下面是兩種操作實例：
<body>標簽的內容：
對應vue代碼：
一般為只讀屬性，所以可以省略set，寫成如下形式：
9.v-on（縮寫：@）：綁定事件監聽器。一些處理事件的悄游修飾符（可混合使用）：
（1）.stop阻止冒泡事件的發生
（2）.prevent阻止默認事件的發生，如不用.prevent,下面標簽的submit指令會調用方法後直接提交伺服器 ，即控制台顯示的數據會閃過
（3）.{keycode|keyAlias}特定鍵盤鍵觸發回調
（4）.once只觸發一次回調
10.v-show:判斷屬性。
與v-if區別：v-if在條件為false時，包含v-if指令的元素不會出現在dom中；v-show在條件為false時，只是給元素添加一個行內樣式：display:none，元素仍然在dom裡面；
注意：當需要在旁培顯示與隱藏之間切換頻率較高的時候，應該使用v-show（性能更高），當次數較少時通常使用v-if。
11.v-for:循環遍歷操作。語法：
（1）遍歷數組：v-for="(m,index) in movies" //m是新定義的變數名稱，index是對應數組的下標，movies是已有的數組名。Index可省略。
（2）遍歷對象：<li v-for=」(value,key) in moive」>{{item}}</li> //如果只獲取一個值，那麼取得的值是value，key可以省略。
12.v-model：實現雙向綁定（等同於v-on和v-bind一起使用，實現實時顯示）。
雙向綁定的使用案例：
<body>
<div id="app">
<!-- 基礎案例 -->
<!-- <input type="text" v-model="message"/>{{message}} -->
<!-- 當界面產生一個事件，瀏覽器會生成一個event對象，內部就包含當前輸入的值 -->
<input type="text" :value="message" @input="change" /><br />
<h2>文本框輸入內容：{{message}}</h2>
<br />
<!-- 單選框 -->
<span>
<label for="male">
<input type="radio" id="male" value="男" v-model="sex" />男
</label>
<label for="female">
<input type="radio" id="female" value="女" v-model="sex" />女
</label>
<h2>你選擇的性別是：{{sex}}</h2>
</span>
<!-- 單擊選擇 -->
<label for="agree">
<input type="checkbox" id="agree" v-model="info" /><span title="點擊同意進入下一步">同意協議 </span>
<button :disabled="!info" @click="notice()">next</button>
<br />
<h2 v-if="info==true">你已經同意相關協議</h2>
</label>
<br />
<!-- 復選框 -->
<label>
<input type="checkbox" value="羽毛球" v-model="hobbies" />羽毛球
<input type="checkbox" value="籃球" v-model="hobbies" />籃球
<input type="checkbox" value="足球" v-model="hobbies" />足球
<input type="checkbox" value="乒乓球" v-model="hobbies" />乒乓球
<h2>你的愛好是：{{hobbies}}</h2>
</label>
<!-- v-model:select 分為復選框和單選框 -->
<!-- 單選框 -->
<select name="abc" v-model="fruit">
<option value="西瓜">西瓜</option>
<option value="橘子">橘子</option>
<option value="香蕉">香蕉</option>
<option value="哈密瓜">哈密瓜</option>
</select>
<h2>你選擇的水果是：{{fruit}}</h2>
<!-- 多選框 -->
<select multiple="multiple" name="xyZ" v-model="stars" size="5">
<option disabled="disabled">ctrl+單擊可復選</option>
<option value="劉德華">劉德華</option>
<option value="梁朝偉">梁朝偉</option>
<option value="黎明">黎明</option>
<option value="庫里">庫里</option>
</select>
<h2>你選擇的明星是：{{stars}}</h2>
<!-- 值綁定 (動態綁定v-model)-->
<label v-for="item in orginHobbies">
<input type="checkbox" :value="item" />{{item}}
</label>
<!-- 修飾符 -->
<!-- 1.修飾符：lazy 敲回車時進行綁定-->
<div>
<input type="text" v-model.lazy="message" />
<h2>{{message}}</h2>
</div>
<!-- 2.修飾符：number轉換數據類型 -->
<div>
<input type="number" v-model.lazy.number="numberBind" />
<h2>{{numberBind}}-{{typeof numberBind}}</h2>
</div>
<!-- 3.修飾符：trim除左右兩邊空格 -->
<div>
<input type="text" v-model.lazy="name" />
<h2>你輸入的名字是：{{name}}</h2>
</div>
</div>
<script src="../js/v2.6.10/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message: 'hello!!',
sex: '男',
info: false,
orginHobbies: ['橄欖球', '高爾夫球', '乒乓球'],
hobbies: [],
fruit: '橘子',
stars: [],
numberBind: '',
name: ''
},
methods: {
change(event) {
this.message = event.target.value;
},
notice() {
alert('感謝你同意協議');
}
}
})
</script>
</body>
登錄後復制
vue.js
javascript
前端
德國品牌的空氣凈化器
精選推薦
廣告
3. Vue：基礎語法、創建組件、組件間傳值、實例生命周期
當我們看到vue指令後面跟著一個值得時候，這里的值就不再是一個字元串了，它指的是一定是一個JS的表達式
1、v-for：可以理解為for in，遍歷數組返回給item，數組有多少內容就有多少個item，並自動生成html標簽
2、v-on：綁定事件，語法=>v-on：事件類型 = "函數(調用)"，調用的函清枝鎮數定義在methods中，vue會自動到裡面尋找對應的函數去執行
3、v-model：數據的雙向綁定，指定的數據需要在data里進行定義。當data里的該數據改變時，綁該數據的地方顯示在頁面的內容也會變化；當綁定的地方數據改變，data里的數據也會改變。其中一個改變另一個也會跟著改變。【在methods里定義的函數中，使用 this.數據 就可以訪問到頁面中該數據的內容答粗】
4、v-bind：把數據傳到子組件：v-bind：變數名=「接收值」 然後在子組件里的props中接收變數值
5、v-text=「name」；表示讓這個標簽的innerText變成data數據里name的內容，不會復制HTML結構，單純轉成文字，效果和插值表達式一樣
6、v-html=「name」；讓這個標簽的innerHTML變成data數據里name的內容，會把HTML結構也復制上
創建全局組件的方法 Vue.component（「todo-item」， ｛｝） =》 "todo-item"為標簽名
var 組件名（=標簽名） = ｛｝ 並且需要在實例中的components中注冊組件才能使用
v-bind:index="index" 可以簡寫 :index="index"
v-on:click="hdd" 可以簡寫 @click="hdd"
給子組件綁定多個數據時：
<todo-item :content="item" :index="index" v-for="(item, index) in list" @delete="hdd">
</todo-item>
子組件里的props使用數組的形式接收數據 ，子組件事件處理this.$emit("delete",this.index)，之後在向外觸發父組件的事件並傳入index參數，再使用splice方法實現點擊列表的某一項時該項被刪除。
生命周期函數就是vue實搭逗例在某一個時間點會自動執行的函數。
生命周期函數不放在methods裡面，而是直接放在Vue實例裡面
4. vue模板，鉤子函數
vue腳手架：
在vue腳手架中有一個
template 模板：
在模板裡面只有一個子類，子類裡面可以有其他的類
script 腳本：
style 樣式
vue的語法：
當使用{{}}的時候，裡面只可以傳入文本，如果傳入標簽也會被認為文本；
v-html： 可以傳入標簽，
設置屬性的時候，使用v-bind:id 可以簡寫為 :id = 'id'
在html中的變數都需要在data裡面進行定義
在{{}}裡面可以使用表達式
v-if 與 v-else： 如果if條件成立的話，就鄭襪昌會顯示if裡面的內容，如果沒有成立的話，就會顯示else裡面的內容，
v-show 條件成立就顯示內容，條件不成立，不會顯示內容。他會修改display屬性
vue中的鉤子函數：
一個指令定義對象可以提供如下幾個鉤子函數 (均為可選)：
bind：只調用一次，指令第一次綁定到元素時調用。在這里可以進行一次性的初始化設置。
inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不一定已被插入文檔中)。
update：所在組件的 VNode 更新時調用， 但是可能發生在其子 VNode 更新之前 。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前後的值來忽略不必要的模板更新
componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新後調用。
unbind：只調用一次，指令與元素解綁時調用。
鉤子函數參數
指令鉤子函數會被傳入以下參數：
el：指令所綁定的元素，可以用來直接操作 DOM 。
binding：一個對象，包含以下屬性：
name：指令名，不包括 v- 前綴。
value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值為 2。
oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
expression：字元串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式為 "1 + 1"。
arg：傳給指令的參數，可選。例如 v-my-directive:foo 中，參數為 "foo"。
modifiers：一個包含修飾符的對象。例如：喊扒v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。
vnode：Vue 編譯生成的虛擬節點。移步 VNode API 來了解更多詳情。
oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。
除了 好衡el 之外，其它參數都應該是只讀的，切勿進行修改。如果需要在鉤子之間共享數據，建議通過元素的 dataset 來進行。
使用vue計算屬性:
鏈接：https://www.jianshu.com/p/8191a5b8dce6
來源：
5. Vue3基礎-模板語法
如果我們希望把數據顯示到模板（template）中，使用最多的語法是 「Mustache」語法 (雙大括弧) 的文本插值。
並且我們前端提到過，data返回的對象是有添加到Vue的響應式系統 中，當data中的數據發生改變時，對應的內容也會發生更新。
當然，Mustache中不僅僅可以是data中的屬性，也可以是一個JavaScript的表達式：
下面這種寫法是語句不是表達式，所以是錯誤的：
v-once用於指定元素或者組件只渲染一次，當數據發生變化時，元素或者組件以及其所有的子元素將視為靜態內容並且跳過，該指令可以用於性能優化。
如果添加到父節點，那麼所有的子節點也是只會渲染一次：
用於更新元素的 textContent，等價於"Mustache"語法，而且"Mustache"語法更靈活。
默認情況下，如果我們展示的內容本身是 html 的，那麼vue並不會對段頌凳其進行特殊的解析。如果我們希望這個內容被Vue可以解析出來，那麼可以使用 v-html 來展示。
效果如下：
v-pre用於跳過元素和它的子元素的編譯過程，顯示原始的Mustache標簽。
跳過不需要編譯的節點，加快編譯的速度。
效果如下：
這個指令保持在元素上直到關聯組件實例結束編譯。
v-cloak 和 CSS 規則如 [v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的 Mustache 標簽直到組件實例准備完畢，主要用於解決閃動問題，現在Vue3一般不會出現這個問題了。
<div> 不會顯示，直到編譯結束。
前面講的一系列指令，主要是將值插入到模板內容中。但是，除了內容需要動態來決定握旅外，某些屬性我們也希望動態來綁定。比如動態綁定a元素的href屬性，動態綁定img元素的src屬性。
綁定屬性我們使用 v-bind: ，縮寫 : ，用於動態地綁定一個或多個 attribute，或一個組件 prop 到表達式。
v-bind用於綁定一個或多個屬性值，或者向另一個組件傳遞props值（這個學到組件時再介紹），在開發櫻帆中，有哪些屬性需要動態進行綁定呢？還是有很多的，比如圖片的鏈接src、網站的鏈接href、動態綁定一些類、樣式等等。
v-bind有一個對應的語法糖，也就是簡寫方式，在開發中，我們通常會使用語法糖的形式，因為更簡潔。
注意 ：Vue2 template模板中只能有一個根元素，Vue3 template模板中允許有多個根元素。
在開發中，有時候我們的元素class也是動態的，比如：當數據為某個狀態時，字體顯示紅色，當數據另一個狀態時，字體顯示黑色。
綁定class有兩種方式：對象語法，數組語法。
① 對象語法：我們可以傳給 :class (v-bind:class 的簡寫) 一個對象，以動態地切換 class。
② 數組語法：我們可以把一個數組傳給 :class，以應用一個 class 列表；
我們可以利用v-bind:style來綁定一些CSS內聯樣式，這是因為某些樣式我們需要根據數據動態來決定，比如某段文字的顏色，大小等等。
CSS屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用引號括起來) 來命名。
綁定style有兩種方式：對象語法，數組語法。
① 對象語法：
② 數組語法： :style 的數組語法可以將多個樣式對象應用到同一個元素上
在某些情況下，我們屬性的名稱可能也不是固定的。
前面我們無論綁定src、href、class、style，屬性名稱都是固定的，如果屬性名稱不是固定的，我們可以使用 :[屬性名]=「值」 的格式來定義，這種綁定的方式，我們稱之為動態綁定屬性。
如果我們希望將一個對象的所有屬性，綁定到元素上的所有屬性，應該怎麼做呢？非常簡單，我們可以直接使用 v-bind 綁定一個對象。
如下：info對象會被拆解成div的各個屬性。
前面我們綁定了元素的內容和屬性，在前端開發中另外一個非常重要的特性就是交互。
在前端開發中，我們需要經常和用戶進行各種各樣的交互，這個時候，我們就必須監聽用戶發生的事件，比如點擊、拖拽、鍵盤事件等等。
在Vue中如何監聽事件呢？使用v-on指令。接下來我們來看一下v-on的用法：
我們可以使用v-on來監聽一下點擊的事件：
v-on:click可以寫成@click，是它的語法糖寫法：
當然，我們也可以綁定其他的事件：
如果我們希望一個元素綁定多個事件，這個時候可以傳入一個對象：
當通過methods中定義方法，以供@click調用時，需要注意參數問題：
情況一：如果該方法不需要額外參數，那麼方法後的()可以不添加，並且方法的實現不用參數，直接就可以列印event。
情況二：如果需要同時傳入某個參數和event時，可以通過$event傳入事件，並且方法的實現必須按順序寫明參數。
@keyup.enter 代表enter鍵彈起的時候會調用onEnter方法，我們一般在方法裡面獲取輸入的值：
在某些情況下，我們需要根據當前的條件決定某些元素或組件是否渲染，這個時候我們就需要進行條件判斷了。
Vue提供了下面的指令來進行條件判斷：
下面我們來對它們進行學習。
v-if、v-else、v-else-if 用於根據條件來渲染某一塊的內容，這些內容只有在條件為true時，才會被渲染出來，這三個指令與JavaScript的條件語句 if、else、else if 類似。
v-if 的渲染原理：v-if是惰性的，當條件為false時，其判斷的內容完全不會被渲染或者會被銷毀掉，當條件為true時，才會真正渲染條件塊中的內容。
因為v-if是一個指令，所以必須將其添加到一個元素上，但是如果我們希望切換的是多個元素呢？
如果此時我們使用div包裹，div會被渲染到界面上來，但是我們並不希望div被渲染，這個時候，我們可以選擇使用template，template元素可以當做不可見的包裹元素，並且 v-if 可以添加到 template 上，但是最終template不會被渲染出來，類似於小程序中的block。
v-show和v-if的用法看起來是一致的，也是根據一個條件決定是否顯示元素或者組件。
首先，在用法上的區別：
其次，本質的區別：
開發中如何進行選擇呢？
在真實開發中，我們往往會從伺服器拿到一組數據，並且需要對其進行渲染。這個時候我們可以使用v-for來完成，v-for類似於JavaScript的for循環，可以用於遍歷一組數據。
v-for的基本格式是 "item in 數組" ，數組通常是來自data或者prop，也可以是其他方式，item是我們給每項元素起的一個別名，這個別名可以自定來定義。
我們知道，在遍歷一個數組的時候會經常需要拿到數組的索引，如果我們需要索引，可以使用格式 "(item, index) in 數組" ，注意順序，數組元素項item在前面，索引項index在後面。
類似於v-if，你可以使用 template 元素來循環渲染一段包含多個元素的內容。
我們使用template來對多個元素進行包裹，而不是使用div來完成，因為div會被渲染，template不會被渲染。而且如果有ul，ul裡面不推薦放div，只推薦放li。
Vue 將被偵聽的數組的變更方法進行了包裹，所以它們也將會觸發視圖更新，這些被包裹過的方法包括：
上面的方法會直接修改原來的數組，所以視圖會跟著更新。但是某些方法不會替換原來的數組，而是會生成新的數組，比如 filter()、concat() 和 slice()，這時候我們可以通過重新賦值的方式觸發視圖更新，如下：
在使用v-for進行列表渲染時，我們通常會給元素或者組件綁定一個key屬性。
這個key屬性有什麼作用呢？
我們先來看一下官方的解釋：key屬性主要用在Vue的虛擬DOM演算法，在新舊nodes對比時辨識VNodes。如果不使用key，Vue會使用一種最大限度減少動態元素並且盡可能的嘗試就地修改/復用相同類型元素的演算法，而使用key時，它會基於key的變化重新排列元素順序，並且會移除/銷毀key不存在的元素。
官方的解釋對於初學者來說並不好理解，比如下面的問題：
什麼是新舊nodes，什麼是VNode？
沒有key的時候，如何嘗試修改和復用的？
有key的時候，如何基於key重新排列的？
我們先來解釋一下VNode的概念：
VNode的全稱是Virtual Node，也就是虛擬節點。事實上，無論是組件還是元素，它們最終在Vue中表示出來的都是一個個VNode。VNode的本質是一個JavaScript的對象。
如果我們不只是一個簡單的div，而是有一大堆的元素，那麼它們應該會形成一個VNode Tree。
我們先來看一個案例：這個案例是當我們點擊按鈕時會在li中間插入一個f。
我們可以確定的是，這次更新對於ul和button是不需要進行更新，需要更新的是我們li的列表。在Vue中，對於相同父元素的子元素節點並不會重新渲染整個列表，因為對於列表中 a、b、c、d它們都是沒有變化的。在操作真實DOM的時候，我們只需要在中間插入一個f的li即可。
那麼Vue中對於列表的更新究竟是如何操作的呢？
Vue事實上會對於有key和沒有key會調用兩個不同的方法，有key，那麼就調用 patchKeyedChildren方法，沒有key，那麼就調用 patchUnkeyedChildren方法。
沒有key的diff演算法：
我們會發現上面的diff演算法效率並不高，c和d來說它們事實上並不需要有任何的改動，但是因為我們的c被f所使用了，所有後續所有的內容都要一次進行改動，並且最後進行新增。
有key的diff演算法：
所以我們可以發現，Vue在進行diff演算法的時候，會盡量利用我們的key來進行優化操作，在沒有key的時候我們的效率是非常低效的，在進行插入或者重置順序的時候，保持相同的key可以讓diff演算法更加的高效。
6. 入門：Vue六大常用內置指令
指令（Directives），是vue為開發者提供的 模板語法 ，用於輔助開發者渲染頁面的基本結構
所用到的數據定義在實例的 data 中，事件定義在實例的 methods 中
只能渲染純文本內容， 會覆蓋 標簽內部原本的內容
只能渲染純文本內容， 不會覆蓋 標簽內部原本的消虛內容
能將帶標簽的字元串渲染成html內容， 會覆蓋 標簽內部原本的內容
為元素的屬性 動態 綁定屬性值
注意： 插值表達式 和 v-bind 還支持javascript表達式的運算
為元素綁定事件
只要是事件，就能使用的修飾符，以下列舉5個常用的
只能在觸發鍵盤事件時，使用的修飾符，以下列舉2個常用的
快速獲取表單數據（只應用於表單元素，如：input、textarea、select）
只能給v-model使用的修擾伍飾符
控制DOM的顯示與隱藏（值為true顯示，值為false隱藏），其原理為 動態添加/移除display：none樣式 ，一般用於需頻繁切換
控制DOM的顯示與隱藏（值為true顯示，值為false隱藏），其原理為 動態創建/移除元素 ，一般用於默認不展示且展示較少
配合 v-if 指令一起使用，否則將不會被識別
基於一個數組來循環渲染一個列表結構，它有特定的語法結構 v-for="item in items"
注意：在.vue文件中，只要用到 v-for指令 ，一定要綁定一個拿李燃 :key 屬性
作者：用戶2031777005900
鏈接：https://juejin.cn/post/7105273755168931877