最近项目进度慢下来了，花点时间总结一下。文章会从vue1.x 到2.x的一些说明以及使用，也会文章中的代码共享出来。详细请关注后续。
简介：感慨是会用到一些第三方的模块下载工具，不过不要担心，都是一步步来的，偏前端先是用到了 bower 把vue.js 下载下来，引用的方法也和以前一样，直接引用 路径。后面陆续会换到其他的一些工具，如gulp，wekpack等。也会介绍一些常用的工具。如 bable 下一代的javascript 语法编译器，vue的路由，vue的交互。
1.bower 前端包管理器
原因：现在前端也日新月异，一些第三方包，插件，模块，包也在不断更新，相互依赖的包也是很多，如项目需要用到bootstrap，而bootstrap又依赖jquery，以往方法是下载bootstrap后，又下载jquery才能用，而用bower 下载只需要下载bootstrap 它会把相关依赖的包也下载下来，到时候只需要做相关的引入就行了。
安装 bower
bower 也是通过npm安装
npm install -g bower
查看bower帮助
bower -h
建立 bower json文件
bower init
安装 第三方的包如 bootstrap
bower install bootstrap
效果如下：
image.png
下载好的第三方包都是在 bower_components 这个文件夹下面
image.png
一般文件都会在 dist 这个文件夹下
image.png
简单引用方式和以往一样：
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
如果你想把配置写在json里面，在下载第三方包时候加 --save
如：
bower install bootstrap --save
这样
2.vue 基础使用
html部分：
<span>{{msg}}</span>
<!--引入vue.js-->
<script src="../bower_components/vue/dist/vue.js"></script>
javascript 部分：
var vm = new Vue({
el:'body',//
data(){
msg:'hello'
}
})
array 部分
<span>{{arr}}</span>
data(){
...
arr:['can','tom'],
...
}
json 部分
{{ jsonObj | json }}
data(){
...
jsonObj:{'name':'can','age':25},
...
}
v-for 部分
<span>for 循环使用</span>
<ul>
<li v-for="phome in phoneList ">{{phome}}</li>
</ul>
<span>or</span>
<ul>
<li v-for="value in phoneList ">{{value}} 下标为 {{$index}}</li>
</ul>
data(){
phoneList:['iPhome 6','iPhome 7','iPhome 8'],
}
基础部分的
<script>
var vm = new Vue({
el:'#box',
data:{
msg:'vue',
msg1:1,
msg2:false,
arr:['can','tom'],
jsonObj:{'name':'can','age':25},
phoneList:['iPhome 6','iPhome 7','iPhome 8'],
fruits:[
{'name':'apple','price':3.5},
{'name':'banana','price':1.9},
{'name':'orange','price':2.5},
{'name':'grape','price':3.2}
]
}
});
</script>
3.事件
click 事件
html:
<span>以前的事件</span>
<button onclick="btnclick()" >button</button>
<hr>
<span>vue的事件</span>
<br>
<p> @写法(简写，推荐使用)</p>
<button @click="vclick()">v-button</button>
javascript:
// 以前的按钮事件
function btnclick(){
alert('我是点击事件');
}
// 用vue 的方式
var vm = new Vue({
el:'body',
methods: {
vclick(){
alert('vue click');
}
}
})
一些常用的事件：
4.基础的综合例子
效果如下：
image.png
查看时候：
image.png
删除时候：
image.png
详细代码看 tabelshow.html
这篇大概写了一下和很普通的例子，后续会继续分享，请继续关注。
