數(shù)據(jù)綁定
vue核心是一個(gè)允許采用簡(jiǎn)潔的模板來聲明式將數(shù)據(jù)渲染進(jìn)DOM的系統(tǒng)醉锅。
舉個(gè)栗子：官網(wǎng)寫法如下
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
在實(shí)際項(xiàng)目中贮庞，
export default {
data(){
return {
showCityStatus:false,
city:"",
cityCN:"國籍",
bankCardForm:{
"bankAccountNo": "",
"bankAddress": "",
},
currencyList:[]
}
},
methods:{
cityStatus(){},
addChargeCard(){},
},
mounted(){},
created(){}
}
在組件中是通過在data(){}這個(gè)函數(shù)中進(jìn)行綁定的边苹，初始化數(shù)據(jù)狀態(tài)類似于react里面的初始化狀態(tài)：this.state={blah,blah,blah}.只要在data中定義了變量就可以在vue里面的template代碼中使用凉夯。我們使用data里面的cardName數(shù)據(jù)就可以這樣寫：
<div id="app"> {{cardName}}</div>
關(guān)于指令
在Vue項(xiàng)目中會(huì)用到很多指令淮韭，這些指令可以直接綁定到元素身上垢粮。在react中一般都是直接在JSX代碼中進(jìn)行綁定。下面來說一下react如何綁定以及v-指令
1靠粪，v-bind特性被稱為指令蜡吧，指令帶有前綴v-毫蚓。
舉個(gè)官方寫法栗子：
<div id="app-2">
<span v-bind:title="message">
鼠標(biāo)懸停幾秒鐘查看此處動(dòng)態(tài)綁定的提示信息！
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '頁面加載于 ' + new Date().toLocaleString()
}
})
提示：span和div標(biāo)簽是具有title屬性的斩跌，這個(gè)屬性允許人們將鼠標(biāo)停留在上面幾秒可以看到title里面的值绍些。
這里將message設(shè)置了值，那么通過v-bind就可以將title和message動(dòng)態(tài)綁定耀鸦。在Vue項(xiàng)目中的寫法是不用寫el:"#app-2"的柬批，因?yàn)樵陧?xiàng)目中已經(jīng)模塊化，當(dāng)前組件內(nèi)使用到的狀態(tài)都可以直接使用袖订。在react里面也是直接寫狀態(tài)名氮帐。
2，v-if 是否顯示某綁定元素
<div id="app-3">
<p v-if="seen">現(xiàn)在你看到我了</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
v-if指令寫法同理上面洛姑。在這里說一下react里面的寫法上沐。可以通過{}里面的三元運(yùn)算符來展示p標(biāo)簽楞艾。舉個(gè)栗子：
{
this.state.seen?<p v-if="seen">現(xiàn)在你看到我了</p>:null
}
這種寫法在Vue里面應(yīng)該也可以参咙，但是Vue提供了v-if指令，我們就爽快的使用吧硫眯，還能減少代碼量蕴侧。
3，v-for指令两入。
這個(gè)指令經(jīng)常會(huì)用到净宵，是用來循環(huán)展示數(shù)組的。官方文檔的栗子：
<div id="app-4">
<ol>
<li v-for="todo in todos" :key="todo.id">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '學(xué)習(xí) JavaScript' },
{ text: '學(xué)習(xí) Vue' },
{ text: '整個(gè)牛項(xiàng)目' }
]
}
})
Vue項(xiàng)目中寫法同上裹纳。在react中可以使用map來進(jìn)行循環(huán)渲染择葡。舉個(gè)栗子：
{
this.state.todos.map((todo,index)=> (<ol key={todo.id}>
<li>
{{ todo.text }}
</li>
</ol>))
}
4，v-text剃氧。
這個(gè)指令和標(biāo)簽內(nèi)的內(nèi)容設(shè)置是一樣的敏储。
<span v-text="msg"></span>
<!-- 和下面的一樣 -->
<span>{{msg}}</span>
5，v-model她我。
這個(gè)指令可以用來創(chuàng)建雙向數(shù)據(jù)綁定虹曙，用在input，textarea番舆，select里面。這個(gè)指令會(huì)忽略所有表單元素的value矾踱，checked恨狈，selected初始值∏航玻總是將Vue實(shí)例data函數(shù)里面的數(shù)據(jù)作為數(shù)據(jù)來源禾怠。所以要在data函數(shù)里面聲明初始值返奉。
雙向數(shù)據(jù)綁定，我理解的是用戶在輸入的數(shù)據(jù)的時(shí)候吗氏，組件中的data狀態(tài)也進(jìn)行了改變芽偏，可以直接拿到輸入的值。
官方給出的栗子：
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})
在這里強(qiáng)調(diào)一下Vue里面的input修飾符
lazy
在默認(rèn)情況下弦讽，v-model 在每次 input 事件觸發(fā)后將輸入框的值與數(shù)據(jù)進(jìn)行同步 (除了上述輸入法組合文字時(shí))污尉。你可以添加 lazy 修飾符，從而轉(zhuǎn)變?yōu)槭褂?change事件進(jìn)行同步：
<input v-model.lazy="msg" >
number
如果想自動(dòng)將用戶的輸入值轉(zhuǎn)為數(shù)值類型往产，可以給 v-model 添加 number 修飾符：這通常很有用被碗，因?yàn)榧词乖?type="number" 時(shí)，HTML 輸入元素的值也總會(huì)返回字符串仿村。如果這個(gè)值無法被 parseFloat() 解析锐朴，則會(huì)返回原始的值。
<input v-model.number="age" type="number">
trim
如果要自動(dòng)過濾用戶輸入的首尾空白字符蔼囊，可以給 v-model 添加 trim 修飾符：
<input v-model.trim="msg">
6焚志，v-once指令用來進(jìn)行優(yōu)化更新性能饵隙。使用了該指令的元素或者組件速挑，值渲染一次，隨后的重新渲染腐泻，將被認(rèn)為是靜態(tài)內(nèi)容并跳過滴肿。
7岳悟，ref。Vue中使用ref來對(duì)元素或者子組件注冊(cè)引用信息泼差。這個(gè)引用信息贵少，會(huì)注冊(cè)在父組件的refs對(duì)象上，只想DOM元素或者組件實(shí)例堆缘。使用的時(shí)候需要在渲染結(jié)束后進(jìn)行使用滔灶。在渲染完成前不能訪問他們，還不存在吼肥。
這個(gè)屬性和react里面的ref是一樣的录平。寫法不太一樣。
