开始学习使用vue的过程

作为一个工作了三年多的java后端开发人员，之前只懂得html，js,jquery以及简单的css样式控制，突然发现现在好多前端都已经改为了vue，在这个过程中，好多项目涉及到了前后端分离，那么前端使用最多的框架或者说代码，都已经改为了vue,离职前，公司刚找来了前端，我与七对接口，以前的工作流程，基本是我们自己去写前端数据的实现，因为页面用的是html，js等，当我去跟前端对接口的时候，我突然发现我一点都不懂，好多问题我根本就没办法解决，因此决心要学习一下vue，哪怕不是精通，但是至少以后不会那么蒙蔽。今天是学习vue的第一天，在这个学习的过程中，其实再看课件的时候，就会发现，其实很多的思想是相同的，只是实现过程中，用的标签以及 风格不同，今天写博客的主要目的是将今晚学习的东西记录一下， 并且给自己定下目标，以后每天的学习都会记录在这里面，今天仅仅是先接触了一下，以后每天，每晚必须要看完一课时的内容，并且将内容记住，在这里进行记录/。

今天简单的学习了一下vue的使用，在这个过程中，学会了几个标签

1 v-on:click  v-on主要用来绑定事件的， 今天学习的是click事件，用在button上面的

2 v-model 今天用在了input上面，课时 中说的是用于双向绑定数据，

3 v-for = " item in list"  遍历集合list里面的数据，而item 就是集合中每一个的数据，这个之前在接接口的时候，看到前端使用过，因此比较印象深。

4 数据的写法

当dom元素上面定义了一个id,那么在用vue编写的时候，我需要 这么来做

var  app =new Vue({

el : '#app',     //这里绑定了dom元素，也就是页面上面的div以及下面所有的标签

data: {         //这里是声明的数据以及数据内容，这里的list代表页面上面需要便利的数据集合

list: ['1','2']， //数据集合

inputValue: '  '    //输入框内的内容，用v-model标签绑定，当input 框中的内容改变的时候，那么inputValue就会跟着变化

}，

methods: {//这个是方法体，里面存在上面利用 v-on:click 绑定的事件

handleButClick : function(){

this.list  //利用this关键字，来获取上面data中 声明的数据名称

this。inputValue  //也是利用this关键字来获取输入框中的内容

}

}

 

})