Vue.js学习笔记（1）

© fengyu学习

个人非常喜爱前端开发，最近突然想好好研究一下，前端知名的js框架。

摆在面前的选择有很多，Angular2、React、Backbone

Vue拥有一个帅气、简洁的名字，就学他了，^_！

1、Vue.js安装

javasript又不是exe，我们可以直接下载使用，为何要提安装2字呢？

但凡是个稍具规模的东西（更何况我们大名鼎鼎的Vue），如果不和node、npm拉上关系，逼格就大大下降了。

为了提升自己的技术情怀，我点开了下面这篇介绍

Vue.js安装

详细介绍您可以看上面这篇文章，如果您只是想要安装，请接着往下看

• vue.js(开发版)

• 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、数据绑定

Vue 对象，依靠 data 属性对需要显示的内容进行绑定

在 DOM 元素中，使用双大括号，包裹 Vue 对象中 data 属性的 key 值

从而在 DOM 元素中显示 data 属性的 key 值对应的 value 值，示例如下：

<div id="vue-demo1">
    {{content}}
</div>

<script>
    new Vue({
        el: '#vue-demo1',
        data: {
            content: '这里是绑定的数据内容'
        }
    })
</script>

效果为div中，显示这里是绑定的数据内容

2.3、渲染列表

当Vue 对象的 data 属性中有数组结构数据时

可以通过 DOM 元素的 v-for 属性，可以对元素进行循环展示，示例如下：

<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、处理输入数据

通过 Vue 对象的 methods 属性，结构为 方法名 对应 function(){this.key = XXX}

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

对 Vue 对象的 data 属性中该 key 值对应的 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中的内容变为HelloVue

2.5、综合应用

我的综合应用是写了一个，生成sql-in条件查询参数的小方法

示例如下：

<h3>综合应用(SQL-IN查询-参数处理工具)</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">转换</button>
</div>

<script>
    new Vue({
        el: '#vue-demo1',
        data: {
            intro: "当我们从excel中粘出需要查询的数据时，往往是这种格式的",
            intro1: "如果需要使用sql中in条件查询，我们多么希望它能变为下面这种格式",
            list: [
                {id: '商品1'},
                {id: '商品2'},
                {id: '商品3'}
            ]
        },
        methods: {
            change: function(){
                this.querydata = "('" + this.querydata.trim().replace(/\n/gi, "\',\'") + "')";
            }
        }
    })
</script>

效果为将

1

3

5

7

这种换行数据，转为('1', '3', '5', '7')格式

3、结语

非常高兴完成了Vue.js的起步学习，期待自己继续学习，继续进步！

学习到的关键知识：

Vue 对象的 el 属性、 data 属性、 methods 属性、

DOM 元素的 v-model 属性、 v-for 属性、 v-on:click 属性、 {{ }} 的展现数据方法

Vue.js 对象绑定，数据绑定，双向绑定，列表展示，数据处理！