? fengyu學習

個人非常喜愛前端開發(fā)，最近突然想好好研究一下，前端知名的js框架。

擺在面前的選擇有很多，Angular2、React、Backbone

Vue擁有一個帥氣、簡潔的名字，就學他了，^_！

1、Vue.js安裝

javasript又不是exe，我們可以直接下載使用，為何要提安裝2字呢？

但凡是個稍具規(guī)模的東西（更何況我們大名鼎鼎的Vue），如果不和node、npm拉上關(guān)系，逼格就大大下降了。

為了提升自己的技術(shù)情懷，我點開了下面這篇介紹

Vue.js安裝

詳細介紹您可以看上面這篇文章，如果您只是想要安裝，請接著往下看

• vue.js(開發(fā)版)

• vue.min.js(壓縮版)

• NPM安裝（推薦，不僅僅是逼格的問題）npm install vue

2、初體驗

通過學習這篇文章Vue.js起步，開啟體驗之旅！

以下是學習的心得體會：

2.1、對象綁定

Vue 對象，依靠 el 屬性對 DOM 元素進行綁定，

如果 DOM 元素的標識是 id，使用 #id 對 DOM 元素進行綁定，示例如下：

<div id="vue-demo1">
</div>

<script>
    new Vue({
        el: '#vue-demo1'
    })
</script>

同理，如果標識為 class，使用 .class 對 DOM 元素進行綁定

2.2、數(shù)據(jù)綁定

Vue 對象，依靠 data 屬性對需要顯示的內(nèi)容進行綁定

在 DOM 元素中，使用雙大括號，包裹 Vue 對象中 data 屬性的 key 值

從而在 DOM 元素中顯示 data 屬性的 key 值對應(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、渲染列表

當Vue 對象的 data 屬性中有數(shù)組結(jié)構(gòu)數(shù)據(jù)時

可以通過 DOM 元素的 v-for 屬性，可以對元素進行循環(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: '學習Vue'}
            ]
        }
    });
</script>

2.4、處理輸入數(shù)據(jù)

通過 Vue 對象的 methods 屬性，結(jié)構(gòu)為 方法名 對應(yīng) function(){this.key = XXX}

配合 DOM 元素的 v-on:click 屬性

對 Vue 對象的 data 屬性中該 key 值對應(yīng)的 value 屬性進行處理

示例如下：

<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>

效果為，點擊button按鈕，可以將div中的內(nèi)容變?yōu)镠elloVue

2.5、綜合應(yīng)用

我的綜合應(yīng)用是寫了一個，生成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: "當我們從excel中粘出需要查詢的數(shù)據(jù)時，往往是這種格式的",
            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的起步學習，期待自己繼續(xù)學習，繼續(xù)進步！

學習到的關(guān)鍵知識：

Vue 對象的 el 屬性、 data 屬性、 methods 屬性、

DOM 元素的 v-model 屬性、 v-for 屬性、 v-on:click 屬性、 {{ }} 的展現(xiàn)數(shù)據(jù)方法

Vue.js 對象綁定，數(shù)據(jù)綁定，雙向綁定，列表展示，數(shù)據(jù)處理！