时隔三年，记得第一次写博客还是2015年了，经过这几年的洗礼，我也从一个后端的小萌新变成现在略懂一点点知识的文青。如今对于前端的东东也算有一知半解，个人能力总的来说，也能够独立开发产品级项目吧。至于为什么会前端的东西，估计学.NET的人应该大部分都懂些，之前自己搭建过一套框架，但觉得现在的时代趋势吧，前后端分离是主流，再加上想借这次机会改变部门的开发方式，所以就打算改造一下。
本文仅为个人心得，从实践项目出发，不讲理论，适合萌新学习，如果有说错了欢迎大家在评论区指出，共同进步，哈哈。
这里假定大家的前端技术都达到了熟练使用JavaScript、Html和CSS的地步。
二、起步
2.1 Vue入门需要知道的一些基础知识
这是一套用于构建用户界面的MVVM框架，但有些时候却又无法实现双向绑定（需要一些特殊处理，比如子组件更新父组件的属性）
非常容易入门，使用OO思想会让你更加发现这套框架在应用上的简单（组件化开发）
使用模板语法（Template），在使用的时候就像写html一样
Vue有两种声明形式（全局、区域）后面会解释
Vue这款框架十分霸道，使用之后会发现以前用的Jquery/Bootstrap会被排斥得很厉害（可是我又很不想放弃这两者一些生态里的东西，怎么办？毕竟Vue现在的生态还不是很好。答案是：不使用vue-cli构建的时候，只能在它的生命周期中创建使用，勉强兼容，但是有代码洁癖的话就会很不舒服。如果使用vue-cli构建之后，通过NPM就可以获取bootstrap-vue、fontawesome-vue等针对vue开发的新东东）
萌新入门，还是按照官方说法，先不要用vue-cli去构建项目（这种感觉对于我这种后端小渣渣是最为清楚，使用之后瞬间感觉前端这几年变得极度复杂，貌似这样显得逼格更高？）
下面就让我们一步步从简单的html+js引用的方式使用vue吧，基础的使用方式在Vue官网里都有，此处就不再对那些内容重写一遍了。
2.2 Vue页面级组件的基本结构（每一个页面对象都大同小异，根据实际需要取舍部分对象属性即可，记住了就懂了一半）
var Test = new Vue({ el: '#test-vm', // 此处对应html页面中一个id=test-vm的元素，必须指定 data: { id: 0 // data是组件内部维护的属性对象 }, computed: { newid: function () { return this.id === 0 // 此处返回一个boolean值，computed是计算属性的集合体，里面每一个属性都是function，因此数据更新时，也会更新对应的视图数据 } }, methods: { Test: function () { // 方法1内容 }， Test2: function () { // 方法2内容 } }, components: { 'test-input': TestInput // components 是子组件容器，在这里引入其他要使用的子组件，多个用,分隔。格式为：'组件名'：组件对象 （组件名可以自定义，但要和html对应） }, created: function () { // 组件生命周期，此时可以对实例的数据做一些操作，比如用ajax请求数据 }, mounted: function () { // 组件生命周期，执行到这里说明整个组件已经渲染完成，在这里你可以执行一些其他操作，比如实例一个bootstrap-datetimepicker组件 }， template: '<div>这是测试内容</div>' // 这是组件的模板，也就是这里的内容会被加载在上面el指定的#test-vm元素中，这里要注意的是template必须只有一个root。 // 你不能写成<div>标题内容</div><div>主体内容</div>，只能加多一层<div><div>标题内容</div><div>主体内容</div></div> });