海投匯前端培訓(xùn)
簡單介紹Vue，詳細(xì)文檔請查看Vue官方文檔
1、vue是什么
Vue是一個(gè)用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架澈驼。Vue核心庫只關(guān)注視圖層。
2筛武、聲明式渲染
Vue.js 的核心是一個(gè)允許采用簡潔的模板語法來聲明式地將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)
示例代碼
// 實(shí)現(xiàn)一個(gè)hello world
// html
<div id="app">
hello {{ name }}
</div>
// js
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
2缝其、Vue指令
- （1）v-text
作用：更新元素的textContent。
示例：<span v-text="msg"></span> <span>{{ msg }}</span> - （2）v-html
作用：更新元素的innerHtml
示例：<div v-html="html"></div> - （3）v-show
作用：根據(jù)表達(dá)式之真假值徘六，切換元素的displayCSS 屬性内边。
示例：<div v-show="show"></div> - （4）v-if
作用：根據(jù)表達(dá)式的值的真假條件渲染元素。在切換時(shí)元素及它的數(shù)據(jù)綁定 / 組件被銷毀并重建待锈。如果元素是 <template> 漠其，將提出它的內(nèi)容作為條件塊。
示例：<div v-if="true">hello</div> - （5）v-else
示例：<div v-if="type === 'a'">a</div> <div v-else-if="type === 'b'">b</div> <div v-else>not a/b</div> - （6）v-else-if
示例：<div v-if="type === 'a'">a</div> <div v-else>not a</div> - （7）v-for
作用：基于源數(shù)據(jù)多次渲染元素或模板塊竿音。
示例：<div v-for="item in items"> {{ item.text }} </div> <div v-for="(item, index) in items" :key="item.id"></div> <div v-for="(val, key) in object"></div> <div v-for="(val, key, index) in object"></div> - （8）v-on
用法：綁定事件監(jiān)聽器和屎。縮寫為@
示例：<button v-on:click="click"></button> <!-- 內(nèi)聯(lián)語句 --> <button v-on:click="doThat('hello', $event)"></button> <!-- 縮寫 --> <button @click="click"></button> <!-- 停止冒泡 --> <button @click.stop="doThis"></button> <!-- 阻止默認(rèn)行為 --> <button @click.prevent="doThis"></button> <!-- 阻止默認(rèn)行為春瞬，沒有表達(dá)式 --> <form @submit.prevent></form> <!-- 鍵修飾符柴信，鍵別名 --> <input @keyup.enter="onEnter"> <!-- 鍵修飾符，鍵代碼 --> <input @keyup.13="onEnter"> <!-- 點(diǎn)擊回調(diào)只會(huì)觸發(fā)一次 --> <button @click.once="doThis"></button> - （9）v-bind
用法：動(dòng)態(tài)地綁定一個(gè)或多個(gè)特性宽气，或一個(gè)組件 prop 到表達(dá)式随常。
示例：<!-- 綁定一個(gè)屬性 --> <img v-bind:src="imageSrc"> <!-- 縮寫 --> <img :src="imageSrc"> <!-- 內(nèi)聯(lián)字符串拼接 --> <img :src="'/path/to/images/' + fileName"> <!-- class 綁定 --> <div :class="{ red: isRed }"></div> <div :class="[classA, classB]"></div> <div :class="[classA, { classB: isB, classC: isC }]"> <!-- style 綁定 --> <div :style="{ fontSize: size + 'px' }"></div> <div :style="[styleObjectA, styleObjectB]"></div> <!-- 綁定一個(gè)有屬性的對(duì)象 --> <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div> <!-- 通過 prop 修飾符綁定 DOM 屬性 --> <div v-bind:text-content.prop="text"></div> <!-- prop 綁定潜沦。“prop”必須在 my-component 中聲明绪氛。--> <my-component :prop="someThing"></my-component> <!-- 通過 $props 將父組件的 props 一起傳給子組件 --> <child-component v-bind="$props"></child-component> <!-- XLink --> <svg><a :xlink:special="foo"></a></svg> - （10）v-model
用法：在表單控件或者組件上創(chuàng)建雙向綁定
示例：<input type="text" v-model="username"></input> // 輸入字符串轉(zhuǎn)為數(shù)字 <input type="text" v-model.numer="username"></input> // 輸入首尾空格過濾 <input type="text" v-model.trim="username"></input> - （11）v-pre
用法：跳過這個(gè)元素和它的子元素的編譯過程唆鸡。可以用來顯示原始 Mustache 標(biāo)簽枣察。
示例：<span v-pre>{{ this will not be compiled }}</span> - （12）v-cloak
用法：這個(gè)指令保持在元素上直到關(guān)聯(lián)實(shí)例結(jié)束編譯争占。和 CSS 規(guī)則如 [v-cloak] { display: none } 一起用時(shí)，這個(gè)指令可以隱藏未編譯的 Mustache 標(biāo)簽直到實(shí)例準(zhǔn)備完畢询件。
示例：// css [v-cloak] { display: none; } // html <div v-cloak> {{ message }} </div> - （13）v-once
用法：只渲染元素和組件一次燃乍。隨后的重新渲染，元素/組件及其所有的子節(jié)點(diǎn)將被視為靜態(tài)內(nèi)容并跳過宛琅。這可以用于優(yōu)化更新性能刻蟹。
示例：<!-- 單個(gè)元素 --> <span v-once>This will never change: {{msg}}</span> <!-- 有子元素 --> <div v-once> <h1>comment</h1> <p>{{msg}}</p> </div> <!-- 組件 --> <my-component v-once :comment="msg"></my-component> <!-- `v-for` 指令--> <ul> <li v-for="i in list" v-once>{{i}}</li>
</ul>
