vue數據模型文件里是什麼內容

A. vue怎麼讀

1、vue：讀音：美[vju]。vue是一種json框架，為用戶提供了一種開發規則，在這個規則下進行編程、開發，能夠大大提高工作效率。
2、vue的工作核心在於通過綁定多個項目，讓我們在修改其中一個時就能修改其他項目中的相關內容。
3、一般來說它會使用MVVM模式，其中M是數據模型；V是視圖頁面；VM是連接視圖和模型的控制器。
4、簡單來說，就是我們只要修改數據，就能自動同步到視圖頁面里，從而降低一倍的工作時間和精力。
5、vue框架在程序開發中的應用是非常廣泛的，而且學習編程或參與工作時也會遇到相關的面試題目。

B. 為什麼hello.vue中沒有new Vue的實例

Vue.js是一個構建數據驅動的web界面的庫，其目標是實現響應的數據綁定和組合的試圖組件。
Vue.js擁抱數據驅動的視圖概念，這意味著我們能在普通的HTML模板中使用特殊的用法將DOM「綁定」到底層數據。一旦創建了綁定，DOM將於數據保持同步。

以下參考代碼與上面的模型相對應
<!--這是我們的View-->
<divid="example-1">
Hello{{name}}!
</div>
//這是我們的Model
varexampleData={
name:'Vue.js'
}
//創建一個Vue實例或"ViewModel"
//它連接View與Model
varexampleVM=newVue({
el:'#example-1',//在一個id為'example-1'的實體上掛載
data:exampleData//數據流
})

通常我們會把Model寫在Vue實例當中，下面寫法與上面寫法效果一樣：
<!--這是我們的View-->
<divid="example-1">
Hello{{name}}!<!---Vue的數據模型用{{datamodel}}包裹起來--->
</div>
//創建一個Vue實例或"ViewModel"
//它連接View與Model
<script>
varexampleVM=newVue({
el:'#example-1',//在一個id為'example-1'的實體上掛載
data:{
name:'Vue.js'
}//數據流
})
</script>
這樣一段程序執行後，在#example-1這個控制項中就會顯示『HelloVue.js!』。
?下面來看看指令(Directives)：
指令是特殊的帶有前綴v-的特性，指令的值限定為綁定表達式，比如一個if的指令：
<pv-if="greeting">hello!<p>

還有綁定指令，即將某些屬性值與一些值相綁定，比如：
<input:type="questItem.type",:name="questItem.name"/>

這里省略了「v-bind」，使得input的屬性值賦值具有「計算」的效果。

?計算屬性
這里介紹一下$watch的用法，用於當一個數據需要根據其他的數據而變化時的情況：
<script>
varvm=newVue({
el:'#demo',
data:{
firstName:'Foo',
lastName:'Bar',
fullName:'FooBar'
}
})
</script>
vm.$watch('firstName',function(val){//當firstname改變時，立馬更新vm.fullname
this.fullName=val+''+this.lastName
})
vm.$watch('lastName',function(val){//當lastname改變時，立馬更新vm.fullname
this.fullName=this.firstName+''+val
})

在這里，所有的數據的對象都可以通過vm.firstname等來訪問。

?v-model
顧名思義，就是Vue當中的數據模型，它用來綁定Vue實例中的數據：
<!---bi-directionbound--->
<divid="app">
<p>{{message}}</p>
<inputv-model="message"><!--Model，input輸入的數據會立即反饋到Vue實例中-->
</div>
<script>
newVue({
el:'#app',//View
data:{
message:'HelloVue.js'
}
})
</script>

比如要用來綁定一個表單控制項，就是把選擇的值顯示出來：
<!---表單控制項綁定-單選--->
<divid="myselect">//外面這一層我一開始沒有加，然後就出錯了，el好像一般是掛載在<div>構件上
<selectv-model="selected">//data的數據類型是selected，值是選取的值
<optionseleceted>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected:{{selected}}</span>
</div>
<script>
newVue({
el:'#myselect',
data:{
selected:[]
}
})
</script>


?v-if,v-else
這個指令可以用的很靈活，比如我在表單中生成新題目，有「單選題」、「多選題」、「文本題」三種，那麼針對不同的題目應該顯示的控制項有所不同，這時可以使用如下語法：
<divv-if="questItem.type==='textarea'">//注意是三個等號
<textarea></textarea>
</div>
<divv=else>
<div></div>
</div>


?v-for
這個用於對數組元素的遍歷，舉個例子：
<ulid="demo">
<li
v-for="iteminitems"
class="item-{{$index}}"><!---$index指的是當前數組元素在數組中的位置--->
{{parentMessage}}-{{$index}}-{{item.message}}<!--一個view結構-->
</li>
</ul>
<buttonid="btn1">點擊我</button>
<script>
vardemo=newVue({
el:'#demo',
data:{
parentMessage:'Parent',
items:[
{message:'Foo'},
{message:'Bar'}
]
}
})
</script>

以上代碼的意思是遍歷demo實例中的items數組，將裡面的每一個數組元素（'Foo'，'Bar'）分別在<li>標簽中顯示出來
為了避免對整個列表進行渲染，經常會使用：track-by="$index"，表示只對當前數組元素進行操作。
至此，關於Vue的最基本的東西已經介紹完，需要更多的API資料可以參考：http://cn.vuejs.org/api/

?Vue文件的結構以及數據流的控制
在vue文件中，我們經常可以看到這樣的格式：
<template>
<div></div>
</template>
<script>
exportdefault{
data(){...
},
methods:{//自定義方法，可對data進行處理
method1(){...}
...
},
components:{...}
vuex:{
getters:{//獲取store的數據
questionnaire:state=>state.currentQuestionnaire
}
actions:{//用來分發數據容器store中mutations方法
action1(){dispatch("SET_QUEST",item)}//dispatch用來調用父組件store的"SET_QUEST"方法
action2(){...}
}
directives:{
'my-directive':{
bind:function(){//鉤子函數，只調用一次，在指令第一次綁定到元素上時調用}
update:function(newValue,oldValue){//鉤子函數，在bind之後以初始值為參數第一次調用，之後每當綁定至變化時調用}
unbind:function(){//鉤子函數，只調用一次，在指令從元素上解綁時調用}
}
}
//自定義指令，在<template>中以<divv-my-directives="">方式調用
}
</script>
<style></style>


<template>中放置的是這個頁面（或者頁面的一部分）所擁有的控制項，而<script>中定義的是Vue的數據對象和方法，<style>中定義的是控制項的css樣式。
在methods中經常使用到「this」關鍵字，該關鍵字指向Vue組件實例。
event.target:觸發事件的具體控制項，不產生冒泡作用，是誰就是誰，這個在鎖定事件觸發的控制項時經常用到，比如：
<[email protected]="addItem($event)">
<spandata-type="radio">單選題</span>
<spandata-type="checkbox">多選題</span>
<spandata-type="textarea">文本題</span>
</div>
<script>
exportdefault{
method:{
addItem(event){
lettarget=event.target
if(target.nodeName.toLowerCase()==='span'){//當點擊了選擇的按鈕後
this.showMask=true//顯示彈出框
this.questItem.type=target.dataset.type//設置問題的類型
}
}
}
</script>

最後講講this.$els:一個對象，包含注冊有v-el的DOM元素
<divclass="promt-header">
<div>
<label>問題名稱：</label>
<inputtype="text",placeholder="請輸入標題"v-el:item-title/>
</div>
</div>
<divclass="promt-footer"@click.stop="handleInput(&event)">
<buttontype="button"data-operation="confirm">確定</button>
<buttontype="button"data-operation="cancel">取消</button>
</div>
<script>
methods:{
handleInput(event){
lettarget=event.target
if(target.nodeName.toLowerCase()!=='button'){
return
}
letitemTitle=this.$els.itemTitle
letitemSelections=this.$els.itemSelections
if(target.dataset.operation==="confirm"){
if(this.questItem.type==="textarea"){
this.addTextarea(itemTitle)
}else{
this.addSelwww.bjsmfw.cnTitle,itemSelections)
}
}else{
this.handleCancel()
}
},
}
</script>

上面的代碼是不完整的，但是可以看到，v-el把該控制項掛載在一個名字為"item-title"的實體中，我們可以通過this.$els.itemTitle將其提取出來
要使用該控制項的屬性值（輸入值），可以這樣：
this.$els.itemTitle.value

C. vue響應式

vue響應式數據原理是利用Object。defineProperty這個API來實現，該API可以監聽對象屬性的get和set，當對象屬性被調用時，它能夠自動觸發更新視圖。Vue的響應式實現，便是通過使用Object。

要理解這個，首先要理解vue2的數據響應式原理，因為computed這個API的實現是建立在數據響應式的基礎之上的。

vue2響應式原理主要通過Object.fefineProperty當把一個普通的js對象傳入Vue實例作為data選項，Vue將遍歷此對象所有的屬性，並使用Object.fefineProperty把這些屬性全部轉為getter/setter。

vue響應式基本原理是基於Object.defineProperty(obj，prop，descriptor)，descriptor裡面可以定義get和set方法，可以在獲取屬性值事觸發get方法（可以收集依賴），設置屬性值時觸發set方法（更新依賴）。

當一個vue實例載入時，會進行初始化，將他的配置項options和mixins的內容合並，以options為主，而在初始化data時，會對data對象進行數據劫持，並做代理，通過Object。

vue響應式數據原理是利用Object。defineProperty這個API來實現，該API可以監聽對象屬性的get和set，當對象屬性被調用時，它能夠自動觸發更新視圖。Vue的響應式實現，便是通過使用Object。

vue2響應式原理主要通過Object.fefineProperty當把一個普通的js對象傳入Vue實例作為data選項，Vue將遍歷此對象所有的屬性，並使用Object.fefineProperty把這些屬性全部轉為getter/setter。

vue2中Object.defineProperty響應式只對對象有效，對數組無效，所以對數組做額外處理。

這里附上vue響應式原理的地址：vue2數據響應式原理在vue的watcher實例中配置了lazy，dirty，value屬性，就是用來配合實現computed的API。

Vue響應式原理核心是數據劫持，採用ES5的object.defineproperty的getter和setter方法。

Vue響應式原理核心是數據劫持，採用ES5的object.defineproperty的getter和setter方法。

vue響應式基本原理是基於Object.defineProperty(obj，prop，descriptor)，descriptor裡面可以定義get和set方法，可以在獲取屬性值事觸發get方法（可以收集依賴），設置屬性值時觸發set方法（更新依賴）。

當一個vue實例載入時，會進行初始化，將他的配置項options和mixins的內容合並，以options為主，而在初始化data時，會對data對象進行數據劫持，並做代理，通過Object。