© fengyu学习
个人非常喜爱前端开发，最近突然想好好研究一下，前端知名的js框架。
摆在面前的选择有很多，Angular2、React、Backbone
Vue拥有一个帅气、简洁的名字，就学他了，_！
1、Vue.js安装
javasript又不是exe，我们可以直接下载使用，为何要提安装2字呢？
但凡是个稍具规模的东西（更何况我们大名鼎鼎的Vue），如果不和node、npm拉上关系，逼格就大大下降了。
为了提升自己的技术情怀，我点开了下面这篇介绍
详细介绍您可以看上面这篇文章，如果您只是想要安装，请接着往下看
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 对象绑定，数据绑定，双向绑定，列表展示，数据处理！
