Vue.js学习笔记（1）

个人非常喜爱前端开发，最近突然想好好研究一下，前端知名的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 元素进行绑定，示例如下：

同理，如果标识为 class，使用 .class 对 DOM 元素进行绑定

2.2、数据绑定

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

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

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


    {{content}}

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

2.3、渲染列表

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

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


    
        
            {{ data.text }}

2.4、处理输入数据

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

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

对 Vue 对象的 data 属性中该 key 值对应的 value 属性进行处理

示例如下：


    {{message}}

效果为，点击button按钮，可以将div中的内容变为HelloVue

2.5、综合应用

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

示例如下：

综合应用(SQL-IN查询-参数处理工具)

    {{intro}}
    


    
        
            {{data.id}}
        
    

    

    {{intro1}}
    



    
        '{{data.id}}',

效果为将

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

3、结语

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

学习到的关键知识：

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

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

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