技术交流群：365814763
创建一个 Vue 实例
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：
<body>
<div id="app">
{{divValue}}
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data:{
divValue: 'divValue'
}
});
</script>
虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。
当创建一个 Vue 实例时，你可以传入一个选项对象。
当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
在实例化vue时，有几个属性值：
el 为实例化vue要对应的映射的id，如app，即映射到div中id为app的元素中 实例，el: '#app'
data 我们的数据对象，初始化数值，获得这个实例上的属性 vm.divValue = data.divValue。实例
data:{
input: 'input'
}
methods 里面存放我们定义的一些方法，
methods: {
method1() {},method2() {}....
}
computed 为存放计算属性。实例：
computed: {
computedSum(a,b) {
return a+b;
}
}
components 组件模板，可以先定义好一个组件，在另一个组件中引入并且调用。实例：
components: {
component1,
component2....
}
created 这是它的一个生命周期钩子函数，就是一个vue实例被生成后调用这个函数。一个vue实例被生成后还要绑定到某个html元素上，之后还要进行编译，然后再插入到document中。每一个阶段都会有一个钩子函数，方便开发者在不同阶段处理不同逻辑。一般使用在ajax请求数据，然后渲染dom或者在初始化某些值。实例：
created() {
this.$http.get(url).then((response) => {
response = response.body;
//业务逻辑
});
}
watch 为监听事件，如监听input值的变化，当input值变化时，可以在watch中进行逻辑运算实例：
watch: {
input: function(value){
console.log(value)
//业务逻辑
}
}
props 接受父组件传递的值，组件接受的选项大部分与Vue实例一样，而选项props是组件中非常重要的一个选项。在 Vue 中，父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息
在div中可以使用{{}}获取data中的值，还可以使用以下属性进行一些列操作：
@click="click",为点击事件，方法click必须先定义在methods里：
<body>
<div id="app">
<div @click="click">点击我改变div的值</div>
<div>{{divValue}}</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data:{
divValue: 'divValue'
},
methods: {
click() {
return this.divValue = 'click'
}
}
});
</script>
v-model="input",一般用在输入框中，双向数据绑定，当data中input的值发生改变时，改输入框的值也会发生改变，反之亦然。实例
<body>
<div id="app">
<input v-model="input">
{{input}}
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data:{
input: 'input'
}
});
</script>
v-show=""。条件渲染，使用方式<div v-show="ok"></div> , "ok"可以是一个值，也可以是一个表达式，也可以是一个方法，当ok为true时展示此div，否则不展示
实例：
<body>
<div id="app">
<div v-show="ok">我是定义在data中的值</div>
<div v-show="okMethod">我是定义在方法中值</div>
<div v-show="okCompute == ok">我是一个计算表达式</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data:{
divValue: 'divValue',
ok: true,
okCompute: true
},
methods:{
okMethod() {
return true
}
}
});
</script>
v-if=""，v-else=""。条件渲染与v-show用法大致相同，不同的是它有v-else方法。
<div id="app">
<div v-if="ok">当ok为true展示我</div>
<div v-else>否则展示我</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data:{
divValue: 'divValue',
ok: true
}
});
</script>
v-for="(index,Object) in Objects" key="index"，为循环渲染列表，当没有使用到index时可以简写为v-for="Object in Objects"。实例：
<div id="app">
<ul>
<li v-for="(object,index) in Objects" key="index" @click="click(index)">{{object.id}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data:{
Objects: [{"id":"1"},{"id":"2"},{"id":"3"},{"id":"4"},{"id":"5"}]
},
methods: {
click(index) {
console.log(index)
}
}
});
</script>
v-bind:class="{ active: isActive }" 可以简写:class,为绑定css样式事件，其中active可以是一个计算式，也可以是定义好的一个样式。实例：为原来的self样式添加了active新样式
<body>
<div id="app">
<div class="self" v-bind:class="{ active: isActive }">我变红了</div>
</div>
</body>
<style type="text/css">
.self{
background-color: red
}
.active{
background-color: blue
}
</style>
<script type="text/javascript">
new Vue({
el: '#app',
data:{
isActive: true
}
});
</script>