? fengyu學(xué)習(xí)
個(gè)人非常喜愛前端開發(fā)梅尤，最近突然想好好研究一下替劈，前端知名的js框架。
擺在面前的選擇有很多滨达，Angular2奶稠、React俯艰、Backbone
Vue擁有一個(gè)帥氣、簡潔的名字锌订，就學(xué)他了竹握，_！
1辆飘、Vue.js安裝
javasript又不是exe啦辐，我們可以直接下載使用，為何要提安裝2字呢蜈项？
但凡是個(gè)稍具規(guī)模的東西（更何況我們大名鼎鼎的Vue）芹关，如果不和node、npm拉上關(guān)系紧卒，逼格就大大下降了充边。
為了提升自己的技術(shù)情懷，我點(diǎn)開了下面這篇介紹
詳細(xì)介紹您可以看上面這篇文章常侦，如果您只是想要安裝，請(qǐng)接著往下看
NPM安裝（推薦贬媒，不僅僅是逼格的問題）
npm install vue
2聋亡、初體驗(yàn)
通過學(xué)習(xí)這篇文章Vue.js起步，開啟體驗(yàn)之旅际乘！
以下是學(xué)習(xí)的心得體會(huì)：
2.1坡倔、對(duì)象綁定
Vue 對(duì)象，依靠 el 屬性對(duì) DOM 元素進(jìn)行綁定脖含，
如果 DOM 元素的標(biāo)識(shí)是 id罪塔，使用 #id 對(duì) DOM 元素進(jìn)行綁定，示例如下：
<div id="vue-demo1">
</div>
<script>
new Vue({
el: '#vue-demo1'
})
</script>
同理养葵，如果標(biāo)識(shí)為 class征堪，使用 .class 對(duì) DOM 元素進(jìn)行綁定
2.2、數(shù)據(jù)綁定
Vue 對(duì)象关拒，依靠 data 屬性對(duì)需要顯示的內(nèi)容進(jìn)行綁定
在 DOM 元素中佃蚜，使用雙大括號(hào)，包裹 Vue 對(duì)象中 data 屬性的 key 值
從而在 DOM 元素中顯示 data 屬性的 key 值對(duì)應(yīng)的 value 值着绊，示例如下：
<div id="vue-demo1">
{{content}}
</div>
<script>
new Vue({
el: '#vue-demo1',
data: {
content: '這里是綁定的數(shù)據(jù)內(nèi)容'
}
})
</script>
效果為div中谐算，顯示這里是綁定的數(shù)據(jù)內(nèi)容
2.3、渲染列表
當(dāng)Vue 對(duì)象的 data 屬性中有數(shù)組結(jié)構(gòu)數(shù)據(jù)時(shí)
可以通過 DOM 元素的 v-for 屬性归露，可以對(duì)元素進(jìn)行循環(huán)展示洲脂，示例如下：
<div id="vue-demo1">
<ul>
<li v-for="data in list">
{{ data.text }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#vue-demo1',
data: {
list: [
{text: 'fengyu'},
{text: '封小胖'},
{text: '學(xué)習(xí)Vue'}
]
}
});
</script>
2.4、處理輸入數(shù)據(jù)
通過 Vue 對(duì)象的 methods 屬性剧包，結(jié)構(gòu)為 方法名 對(duì)應(yīng) function(){this.key = XXX}
配合 DOM 元素的 v-on:click 屬性
對(duì) Vue 對(duì)象的 data 屬性中該 key 值對(duì)應(yīng)的 value 屬性進(jìn)行處理
示例如下：
<div id="vue-demo1">
{{message}}
<button v-on:click="trim" type="button" name="button">過濾消息中的空格</button>
</div>
<script>
new Vue({
el: '#vue-demo1',
data: {
message: "He llo Vu e"
},
methods: {
trim: function(){
this.message = this.message.replace(/\s/gi, "");
}
}
});
</script>
效果為恐锦，點(diǎn)擊button按鈕往果，可以將div中的內(nèi)容變?yōu)镠elloVue
2.5、綜合應(yīng)用
我的綜合應(yīng)用是寫了一個(gè)踩蔚，生成sql-in條件查詢參數(shù)的小方法
示例如下：
<h3>綜合應(yīng)用(SQL-IN查詢-參數(shù)處理工具)</h3>
<div id="vue-demo1">
{{intro}}
<br><br>
<ul>
<li v-for="data in list">
{{data.id}}
</li>
</ul>
<br>
{{intro1}}
<br><br>
<span v-for="data in list">
'{{data.id}}',
</span>
<br><br>
<textarea name="sqlinquery" class="sqlinquery" v-model="querydata"></textarea>
<button v-on:click="change" type="button" name="button">轉(zhuǎn)換</button>
</div>
<script>
new Vue({
el: '#vue-demo1',
data: {
intro: "當(dāng)我們從excel中粘出需要查詢的數(shù)據(jù)時(shí)棚放，往往是這種格式的",
intro1: "如果需要使用sql中in條件查詢，我們多么希望它能變?yōu)橄旅孢@種格式",
list: [
{id: '商品1'},
{id: '商品2'},
{id: '商品3'}
]
},
methods: {
change: function(){
this.querydata = "('" + this.querydata.trim().replace(/\n/gi, "\',\'") + "')";
}
}
})
</script>
效果為將
1
3
5
7
這種換行數(shù)據(jù)馅闽，轉(zhuǎn)為('1', '3', '5', '7')格式
3飘蚯、結(jié)語
非常高興完成了Vue.js的起步學(xué)習(xí)，期待自己繼續(xù)學(xué)習(xí)福也，繼續(xù)進(jìn)步局骤！
學(xué)習(xí)到的關(guān)鍵知識(shí)：
Vue 對(duì)象的 el 屬性、 data 屬性暴凑、 methods 屬性峦甩、
DOM 元素的 v-model 屬性、 v-for 屬性现喳、 v-on:click 屬性凯傲、 {{ }} 的展現(xiàn)數(shù)據(jù)方法
Vue.js 對(duì)象綁定，數(shù)據(jù)綁定嗦篱，雙向綁定冰单，列表展示，數(shù)據(jù)處理灸促！
