探索Vue.js component內(nèi)容實現(xiàn)
現(xiàn)在來系統(tǒng)地學(xué)習(xí)一下Vue（參考vue.js官方文檔）:
Vue.js是一個構(gòu)建數(shù)據(jù)驅(qū)動的web界面的庫，其目標(biāo)是實現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的試圖組件。
Vue.js擁抱數(shù)據(jù)驅(qū)動的視圖概念，這意味著我們能在普通的HTML模板中使用特殊的用法將DOM“綁定”到底層數(shù)據(jù)。一旦創(chuàng)建了綁定，DOM將于數(shù)據(jù)保持同步。
以下參考代碼與上面的模型相對應(yīng)
<!-- 這是我們的 View -->
<div id="example-1">
Hello {{ name }}!
</div>
// 這是我們的 Model
var exampleData = {
name: 'Vue.js'
}
// 創(chuàng)建一個 Vue 實例或 "ViewModel"
// 它連接 View 與 Model
var exampleVM = new Vue({
el: '#example-1', // 在一個id為'example-1'的實體上掛載
data: exampleData // 數(shù)據(jù)流
})
通常我們會把Model寫在Vue實例當(dāng)中，下面寫法與上面寫法效果一樣：
<!-- 這是我們的 View -->
<div id="example-1">
Hello {{ name }}! <!--- Vue的數(shù)據(jù)模型用{{datamodel}}包裹起來 --->
</div>
// 創(chuàng)建一個 Vue 實例或 "ViewModel"
// 它連接 View 與 Model<br><script>
var exampleVM = new Vue({
el: '#example-1', // 在一個id為'example-1'的實體上掛載
data: {
name: 'Vue.js'
} // 數(shù)據(jù)流
})<br></script>
這樣一段程序執(zhí)行后，在#example-1這個控件中就會顯示‘Hello Vue.js!'。
下面來看看指令(Directives)：
指令是特殊的帶有前綴 v- 的特性，指令的值限定為綁定表達(dá)式，比如一個if的指令：
<p v-if="greeting">hello!<p>
還有綁定指令，即將某些屬性值與一些值相綁定，比如：
<input :type = "questItem.type", :name = "questItem.name"/>
這里省略了“v-bind”，使得input的屬性值賦值具有“計算”的效果?！?/p>
計算屬性
這里介紹一下$watch的用法，用于當(dāng)一個數(shù)據(jù)需要根據(jù)其他的數(shù)據(jù)而變化時的情況：
<script><br>var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
}
})<br></script>
vm.$watch('firstName', function (val) { // 當(dāng)firstname改變時，立馬更新vm.fullname
this.fullName = val + ' ' + this.lastName
})
vm.$watch('lastName', function (val) { // 當(dāng)lastname改變時，立馬更新vm.fullname
this.fullName = this.firstName + ' ' + val
})
在這里，所有的數(shù)據(jù)的對象都可以通過vm.firstname等來訪問。
v-model
顧名思義，就是Vue當(dāng)中的數(shù)據(jù)模型，它用來綁定Vue實例中的數(shù)據(jù)：
<!--- bi-direction bound --->
<div id="app">
<p>{{message}}</p>
<input v-model="message"> <!--Model，input輸入的數(shù)據(jù)會立即反饋到Vue實例中-->
</div>
<script>
new Vue({
el: '#app', // View
data: {
message: 'Hello Vue.js'
}
})
</script>
比如要用來綁定一個表單控件，就是把選擇的值顯示出來：
<!--- 表單控件綁定-單選 --->
<div id="myselect"> // 外面這一層我一開始沒有加，然后就出錯了，el好像一般是掛載在<div>構(gòu)件上
<select v-model="selected"> // data的數(shù)據(jù)類型是selected，值是選取的值
<option seleceted>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
<script>
new Vue({
el: '#myselect',
data:{
selected:[]
}
})
</script>
v-if, v-else
這個指令可以用的很靈活，比如我在表單中生成新題目，有“單選題”、“多選題”、“文本題”三種，那么針對不同的題目應(yīng)該顯示的控件有所不同，這時可以使用如下語法：
<div v-if="questItem.type === 'textarea'"> // 注意是三個等號
<textarea></textarea>
</div>
<div v=else>
<div></div>
</div>
v-for
這個用于對數(shù)組元素的遍歷，舉個例子：
<ul id="demo">
<li
v-for="item in items"
class="item-{{$index}}"> <!--- $index指的是當(dāng)前數(shù)組元素在數(shù)組中的位置 --->
{{parentMessage}} - {{$index}} - {{item.message}} <!--一個view結(jié)構(gòu)-->
</li>
</ul>
<button id="btn1">點擊我</button>
<script>
var demo= new Vue({
el: '#demo',
data:{
parentMessage: 'Parent',
items:[
{message: 'Foo'},
{message: 'Bar'}
]
}
})
</script>
以上代碼的意思是遍歷demo實例中的items數(shù)組，將里面的每一個數(shù)組元素（'Foo'，'Bar'）分別在<li>標(biāo)簽中顯示出來
為了避免對整個列表進(jìn)行渲染，經(jīng)常會使用：track-by = "$index"，表示只對當(dāng)前數(shù)組元素進(jìn)行操作?！ ?/p>
至此，關(guān)于Vue的最基本的東西已經(jīng)介紹完，需要更多的API資料可以參考： http://cn.vuejs.org/api/
Vue文件的結(jié)構(gòu)以及數(shù)據(jù)流的控制
在vue文件中，我們經(jīng)?？梢钥吹竭@樣的格式：
<template>
<div> </div>
</template>
<script>
export default{
data(){ ...
},
methods:{ // 自定義方法，可對data進(jìn)行處理
method1(){ ... }
...
},
components: { ... }
vuex: {
getters:{ // 獲取store的數(shù)據(jù)
questionnaire: state => state.currentQuestionnaire
}
actions: { //用來分發(fā)數(shù)據(jù)容器store中mutations方法
action1(){ dispatch("SET_QUEST", item) } // dispatch用來調(diào)用父組件store的"SET_QUEST"方法
action2(){ ... }
}
directives: {
'my-directive': {
bind: function(){ //鉤子函數(shù)，只調(diào)用一次，在指令第一次綁定到元素上時調(diào)用 }
update: function(newValue, oldValue) { //鉤子函數(shù)，在bind之后以初始值為參數(shù)第一次調(diào)用，之后每當(dāng)綁定至變化時調(diào)用 }
unbind: function(){ //鉤子函數(shù)，只調(diào)用一次，在指令從元素上解綁時調(diào)用 }
}
}
// 自定義指令，在<template>中以<div v-my-directives = ""> 方式調(diào)用
}
</script>
<style> </style>
<template>中放置的是這個頁面（或者頁面的一部分）所擁有的控件，而<script>中定義的是Vue的數(shù)據(jù)對象和方法，<style>中定義的是控件的css樣式。
在methods中經(jīng)常使用到“this”關(guān)鍵字，該關(guān)鍵字指向Vue組件實例。
event.target: 觸發(fā)事件的具體控件，不產(chǎn)生冒泡作用，是誰就是誰，這個在鎖定事件觸發(fā)的控件時經(jīng)常用到，比如：
<div @click.stop = "addItem($event)">
<span data-type = "radio">單選題</span>
<span data-type = "checkbox">多選題</span>
<span data-type = "textarea">文本題</span>
</div>
<script>
export default{
method: {
addItem(event){
let target = event.target
if(target.nodeName.toLowerCase() === 'span') { // 當(dāng)點擊了選擇的按鈕后
this.showMask = true // 顯示彈出框
this.questItem.type = target.dataset.type // 設(shè)置問題的類型
}
}
}
</script>
最后講講this.$els: 一個對象，包含注冊有v-el的DOM元素
<div class = "promt-header">
<div>
<label> 問題名稱： </label>
<input type = "text", placeholder = "請輸入標(biāo)題" v-el: item-title/>
</div>
</div>
<div class = "promt-footer" @click.stop = "handleInput(&event)">
<button type = "button" data-operation = "confirm"> 確定 </button>
<button type = "button" data-operation = "cancel"> 取消 </button>
</div>
<script>
methods: {
handleInput(event) {
let target = event.target
if(target.nodeName.toLowerCase() !== 'button') {
return
}
let itemTitle = this.$els.itemTitle
let itemSelections = this.$els.itemSelections
if(target.dataset.operation === "confirm") {
if(this.questItem.type === "textarea") {
this.addTextarea(itemTitle)
} else {
this.addSelections(itemTitle, itemSelections)
}
} else {
this.handleCancel()
}
},
}
</script>
上面的代碼是不完整的，但是可以看到，v-el把該控件掛載在一個名字為"item-title"的實體中，我們可以通過this.$els.itemTitle將其提取出來
要使用該控件的屬性值（輸入值），可以這樣：
this.$els.itemTitle.value
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue組件傳值過程中丟失數(shù)據(jù)的分析與解決方案
這篇文章主要給大家介紹了關(guān)于Vue組件傳值過程中丟失數(shù)據(jù)的分析與解決方案，文中通過圖文介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要介紹了Vue項目業(yè)務(wù)邏輯，不同的項目有不同的功能，不同的功能需要不同的實現(xiàn)，實現(xiàn)這些核心功能的代碼就叫業(yè)務(wù)邏輯。所以說業(yè)務(wù)邏輯是指一個實體單元為了向另一個實體單元提供服務(wù)，應(yīng)該具備的規(guī)則與流程2022-11-11
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)價格日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
vue使用?vue-socket.io三種方式及踩坑實例解析
這篇文章主要為大家介紹了vue使用?vue-socket.io三種方式及踩坑實例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了vue組件之間進(jìn)行傳值的方法，文章圍繞主題展開詳細(xì)的內(nèi)容戒殺，具有一定的參考價值，需要的朋友可以參考一下2022-09-09
某些應(yīng)用場景會給點擊事件添加權(quán)限，不存在權(quán)限就攔截點擊事件，有權(quán)限就繼續(xù)正常觸發(fā)點擊事件。這樣的效果是如何實現(xiàn)的呢，本文就來和大家詳細(xì)講講2023-02-02
這篇文章主要介紹了Vue 動態(tài)添加路由及生成菜單的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要和大家詳細(xì)介紹一下Vue中computed和watch的使用與區(qū)別，文中通過示例為大家進(jìn)行了詳細(xì)講解，對Vue感興趣的同學(xué)，可以學(xué)習(xí)一下2022-11-11
vue3集成Element-plus實現(xiàn)按需自動引入組件的方法總結(jié)
vue3出來一段時間了,element也更新了版本去兼容vue3,下面這篇文章主要給大家介紹了關(guān)于vue3集成Element-plus實現(xiàn)按需自動引入組件的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
這篇文章主要介紹了uni-app 的條件編碼和頁面布局，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-10-10