兼容性
Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。
使用vue.js实现hello world
原生js实现
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
var dom = document.getElementById('app');
dom.innerHTML='hello world'
</script>
</body>
</html>
vue.js实现
在<head>内引入vue库。
<script src="./vue.js"></script>
<div id="app">{{content}}</div> //vue实例只接管了app对应id下的内容。
<script type="text/javascript">
var app = new Vue(
{
el:'#app',
data:{
content : 'hello world1'
}
}
)
</script>
el:限制了vue处理的dom的范围。
data：定义一些数据。
比如，要让页面两秒之后变为bye world，只需改变content的值，不需要改变dom元素。数据改变，页面内容也会改变
setTimeout(function(){
app.$data.content= 'bye world'
},2000)
使用vue.js实现TodoList
<!DOCTYPE html>
<html>
<head>
<title>TodoList</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue"/><!--双向数据绑定-->
<button v-on:click="tijiao">提交</button>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue ({
el: '#app',
data: {
list:[],
inputValue:''
},
methods:{
tijiao: function(){
this.list.push(this.inputValue)
this.inputValue=''
// 指data下的list和inputValue
//每次提交可以获取当前input框里的内容，再把他放到list数据里，当数据发生变化，页面也就跟着发生变化了...
}
}
})
</script>
</body>
</html>
这种设计模式叫做MVVM设计模式。
利用vue编程不在对DOM进行操作，而是再改数据层，当改变数据时，vue中会自动根据数据的不同帮我们重新去渲染页面。
MVVM
MVVM(Model-View-ViewModel)
View: 用户操作界面（DOM）。当ViewModel对Model进行改变的时候，会通过数据绑定更新到View层
ViewModel： 业务逻辑层，在该层创建vue实例。View需要什么数据，ViewModel会提供这个数据；View有某些操作，ViewModel就要响应这些操作，所以可以说它是Model for View.
总结： MVVM模式简化了界面与业务的依赖，解决了数据频繁更新。MVVM 在使用当中，利用双向绑定技术，使得 Model 变化时，ViewModel 会自动变化，而 ViewModel 变化时，View 也会自动变化
前端组件化
组件化思想
组件化思想就是化繁为简，把一个整体拆成多个模块，一个模块为一个组件来实现。
全局组件
全局组件:使用Vue.component("组件名",{
props:['属性名'],
template:'html模板'
});
局部组件
使用组件化思想修改TodoList
全局组件修改
<!DOCTYPE html>
<html>
<head>
<title>TodoList</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue"/><!--双向数据绑定-->
<button v-on:click="tijiao">提交</button>
<ul>
<todo-item v-bind:content="item"
v-for="item in list">
</todo-item>
</ul>
</div>
<script type="text/javascript">
Vue.component("TodoItem",{
props:['content'],
template:"<li>{{content}}</li>"
})//构造一个全局组件
var app = new Vue ({
el: '#app',
data: {
list:[],
inputValue:''
},
methods:{
tijiao: function(){
this.list.push(this.inputValue)
this.inputValue=''
}
}
})
</script>
</body>
</html>
局部组件修改
<!DOCTYPE html>
<html>
<head>
<title>TodoList</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue"/><!--双向数据绑定-->
<button v-on:click="tijiao">提交</button>
<ul>
<!--<li v-for="item in list">{{item}}</li>-->
<todo-item v-bind:content="item"
v-for="item in list">
</todo-item>
</ul>
</div>
<script type="text/javascript">
var TodoItem={
props:['content'],
templata:"<li>{{content}}</li>"
}
var app = new Vue ({
el: "#app",
components:{
TodoItem:TodoItem
},//将TodoItem注册到vue实例中，实例中名字依然为TodoItem
data: {
todoValue:"",
list:[]
},
methods:{
tijiao: function(){
this.list.push(this.todoValue)
this.todoValue=''
}
}
})
</script>
</body>
</html>
简单的组件间传值
通过prop向子组件间传值
Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个属性。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中：
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。在上述模板中，你会发现我们能够在组件实例中访问这个值，就像访问 data 中的值一样。一个 prop 被注册之后，你就可以像这样把数据作为一个自定义 attribute 传递进来：
<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>
参考：vue官网：vuejs.bootcss.com/guide/
