1、Vue概述
1、本篇教程是针对Vue2.0。由Vue所衍生出的NUXT框架可以快速完成服务器端渲染，WEEX框架可以使用Vue的语法去写原生的APP，其他主流框架能做的事情Vue都能做到。
2、我们本篇教程的内容有两个大的部分：（1）基础内容包括：基础语法，MVVM模式，组件化、生命周期，动画特效。（2）实战项目包括：环境搭建、使用Git、数据模拟、本地开发、联调、真机测试、上线。
3、在实战课程中我们使用的技术，有Axios帮助我们进行数据获取，使用Vue Router进行页面的跳转、使用vuex实现组件之间的数据共享，使用异步组件来让代码上线，性能更优，使用stylus编写前端的样式，使用递归组件实现组件调用自己的功能，使用各种插件，当然也有公用组件的拆分。包括移动端的布局技巧。
4、在下面的所有例子中使用的vue.js都是在官网上点击开发版本下载下来的vue库（就一个vue.js的js文件）
2、Vue起步
2.1、Vue初体验
1、首先实现一个hello world的功能，我们使用原生是这样写的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world</title>
</head>
<body>
<div id="app"></div>
<script>
var dom=document.getElementById("app");
dom.innerHTML="hello world";
</script>
</body>
</html>现在我们使用VUE是这样写的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world</title>
<script src="./vue.js"></script> <!--首先要引入vue.js这个库-->
</head>
<body>
<div id="app">{{content}}</div> <!--{{}}是插值表达式-->
<script>
//创建一个Vue的实例,el是配置项，意思是实例负责管理的区域。或者说处理DOM的一个范围。data就是定义数据
var app = new Vue({
el:'#app', //去接管id=app的div中的内容
data:{
content:'hello world',
}
})
</script>
</body>
</html>2、以前我们更改dom中的内容是这样的：
<script>
var dom=document.getElementById("app");
dom.innerHTML="hello world";
setTimeout(function(){
dom.innerHTML="by world";
},2000)
</script>现在有了Vue，我们就能不用操作dom，只去关心我们数据的变化：
var app = new Vue({
el:'#app',
data:{
content:'hello world',
}
})
setTimeout(function(){
app.$data.content="by world";//直接去改变数据就可以了，其中的$data就是 { content:'hello world'}
},2000)2.2、Vue实现Todolist
1、我们下面首先要完成的就是输入内容，然后点击提交，将输入的内容作为列表的一项添加进列表并显示出来，在下面的例子中我们使用到了一些模板指令v-。有v-model(双向绑定)、v-on:click（点击事件）、v-for（循环）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue"/> <!--v-model将数据和值进行双向绑定-->
<button v-on:click="handBtnClick">提交</button> <!--v-on:click给元素添加一个点击事件-->
<ul>
<li v-for="item in list">{{item}}</li> <!--list中每一项都以li标签的方法表现出来-->
</ul>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
list:[],
inputValue:''
},
methods:{ //元素上绑定的方法统一写在methods中
handBtnClick:function(){
this.list.push(this.inputValue); //this.list和this.inputValue都会自动的去data中去找
this.inputValue='';
}
}
})
</script>
</body>
</html>2.3、mvvm模式
1、我们以前使用jQuery是使用额MVP模式，那其实大多数的代码都是写在P层，也就是操作DOM的代码，但是实际我们使用Vue的时候我们是不关心VM层的，因为别人写好了，我们只需要关心怎么写View层和Model层，V是视图层、M是模型图，VM层就是别人写的这个Vue这个框架。而关于VM这层怎么实现的，那就是关于Vue的源码的问题，我们在以后会去研究一下。
2.4、前端组件化
1、组件用一句话来形容，就是页面中的一块区域，一个部分。
2、下面我们使用组件化的思想来修改Todolist
（使用全局组件的方式）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue"/> ->
<button v-on:click="handBtnClick">提交</button>
<ul>
<todo-item v-bind:content="item" v-for="item in list"></todo-item> <!--v-bind想子组件传入一个绑定值-->
<!--list中每一项赋值给item，通过v-bind这个属性传给todo-item，通过content这个变量传-->
</ul>
</div>
<script>
Vue.component("TodoItem",{ //自定义的组件是是全局的
props:['content'], //子组件通过props的方式从父组件接受了一个content的参数
template:"<li>{{content}}<li>"
})
var app = new Vue({
el:'#app',
data:{
list:[],
inputValue:''
},
methods:{
handBtnClick:function(){
this.list.push(this.inputValue);
this.inputValue='';
}
}
})
</script>
</body>
</html>（使用局部组件的方式）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue"/>
<button v-on:click="handBtnClick">提交</button>
<ul>
<todo-item v-bind:content="item" v-for="item in list"></todo-item> <!--v-bind想子组件传入一个绑定值-->
<!--list中每一项赋值给item，通过v-bind这个属性传给todo-item，通过content这个变量传-->
</ul>
</div>
<script>
var TodoItem={
props:['content'], //局部组件就是将一个普通的对象注册在Vue对象中
template:"<li>{{content}}<li>"
}
var app = new Vue({
el:'#app',
components:{
TodoItem:TodoItem, //把外面的普通对象注册在Vue对象当中
},
data:{
list:[],
inputValue:''
},
methods:{
handBtnClick:function(){
this.list.push(this.inputValue);
this.inputValue='';
}
}
})
</script>
</body>
</html>2.5、简单的组件之间的传值
2.5.1、父组件向子组件传值
1、父组件向子组件传值：使用属性的方式进行传递，而且子组件不能修改父组件传递来的值（单向数据流）。
2、父组件向子组件传值属性的两种不同的写法：带冒号的和不带冒号的。
3、子组件接收到父组件传来的值，不能直接修改，可以复制一份到自己的data数据中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>父子组件传值</title>
<script src="./vue.js"></script>
</head>
<body>
<!--父组件通过属性的方式向子组件传值-->
<div id="root">
<!--这里写:counter和counter有区别，:counter后面的引号中是JS表达式，这里是数字0,counter后面是字符串0-->
<counter :counter="0" @change="handleChange"></counter>
<counter :counter="0" @change="handleChange"></counter>
<div>{{total}}</div>
</div>
<script>
var counter={
props:['counter'],
data: function() {
return {
number: this.counter,//把父组件传来的值复制一份到自己的数据中
}
},
template: "<div @click='handleClick'>{{number}}</div>",
methods:{
handleClick: function() {
//this.counter++;//错误的写法,不能直接修改
this.number+=2;
this.$emit('change',2)
}
}
}
var vm = new Vue({
el: "#root",
data: {
total: 0,
},
components: {
counter: counter,
},
methods: {
handleChange: function(step){
this.total+=2;
}
}
})
</script>
</body>
</html>2.5.2、子组件向父组件传值
前面已经使用了父组件向子组件传值了，就是props和template这种模式，下面我们学习子组件向父组件传值，使用$emit的方式来向外触发事件。来实现点击列表中的某一项，将这一项从列表中删除。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue"/>
<button v-on:click="handBtnClick">提交</button>
<ul>
<todo-item :content="item" v-bind:index="index" v-for="(item,index) in list" @delete="handleItemDelete"></todo-item>
<!--2、父组件监听子组件向外触发的事件，并执行handleItemDelete函数来处理-->
</ul>
</div>
<script>
var TodoItem={
props:['content','index'],
template:"<li @click='handItemClick'>{{content}}<li>", //这里@click就是v-on:click的简写，还有v-bind:可以简写为:。
methods:{
handItemClick:function(){
this.$emit('delete',this.index); // 1、使用$emit的方式向外触发事件，并带着参数index
}
}
}
var app = new Vue({
el:'#app',
components:{
TodoItem:TodoItem,
},
data:{
list:[],
inputValue:''
},
methods:{
handBtnClick:function(){
this.list.push(this.inputValue);
this.inputValue='';
},
handleItemDelete:function(index){ //3、接受到参数并处理
this.list.splice(index,1);
}
}
})
</script>
</body>
</html>