其实vue 的语法在官网上都有详细的讲解和例子，我这里就不多做什么说明，只是把自己学习这些语法是练习的例子贴出来。另外官网上的例子是一个个的html文件。我这里的是一个的vue 文件，通过不同的路由进行访问。
类似就上图的这种效果吧，没有什么样式，大伙将就看看嘿嘿。好了，下面我们就一起来看下主题的vue 语法吧。
路由
其实不应该先讲路由的，但是想要做这种点击跳转的就是通过路由实现的。其实也很简单，我们只求会用，不求为什要这样吧先。
<router-link :to="{name: 'IfAndFor'}">
条件与循环
</router-link>
可以看到我们通过 router-link 就可以实现跳转。to 表示跳转的地址，name 指跳转的路由。当然这个路由需要我们在src--router--index.js 中配置好，并且有相关的组件才行哟。
我们要新增路由的话，就在index.js 中增加对应配置就好了，然后就可以通过router-link来实现界面见的跳转。
条件与循环
我们配置好路由后，现在我们来看看v-if 和v-for 我们新建一个组件如下:
<template xmlns:v-bind="http://www.w3.org/1999/xhtml">
<div>
<div>
<p>一</p>
<table>
<tr v-for="(value, key, index) in object">
<td v-if="key === 'url'">
<a v-bind:href="value"> {{value}}</a>
</td>
<td v-else>
{{ value }}
</td>
</tr>
</table>
<br>
<p>二</p>
<ul>
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</li>
</ul>
<br>
<p>二</p>
<ul>
<li v-for="(value, key) in object">
{{ key }} : {{ value }}
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: "",
data(){
return {
object: {
name: 'quellanan',
url: 'http://quellanan.xyz',
slogan: '学的不仅是技术，更是梦想！'
}
}
}
}
</script>
可以看到我使用了三种方式进行for 循环。index 是索引，key 是键， value 是值。这些其实和Java 中的循环差不多。无非就是通过索引遍历，要不就是通过键值遍历。
v-if 和v-else-if v-else 也是一样的。满足条件就显示组件，知道这样用就可以。
但是有一点，上面代码也发现了，无论是v-if 还是v-for, 都要与某个标签结合使用。单独是无法使用的。
监听事件
听起来很高大上，其实就是一个 watch 方法。
我们写一个单位换算的组件:
<template>
<div>
<div>
千米 : <input type = "text" v-model = "kilometers">
米 : <input type = "text" v-model = "meters">
<p></p>
</div>
<div>
小时 : <input type = "text" v-model = "hour">
分钟 : <input type = "text" v-model = "minute">
秒 : <input type = "text" v-model = "second">
<br>
天 : <input type = "text" v-model = "day">
<br>
星期 : <input type = "text" v-model = "week">
</div>
<div>
<p >计数器: {{ counter }}</p>
<button @click = "counter++">点我</button>
</div>
</div>
</template>
<script>
export default {
name: "",
data(){
return{
kilometers : 0,
meters:0,
second : 0,
minute : 0,
hour : 0,
day : 0,
week : 0,
counter: 0
}
},
watch : {
kilometers:function(val) {
this.kilometers = val;
this.meters = this.kilometers * 1000
},
meters : function (val) {
this.kilometers = val/ 1000;
this.meters = val;
},
week:function(val) {
this.week = val;
this.day = this.week * 7;
this.hour = this.day * 24;
this.minute = this.hour * 60;
this.second = this.minute * 60;
},
day : function (val) {
this.day = val;
this.week = this.day/7;
this.hour = this.day * 24;
this.minute = this.hour * 60;
this.second = this.minute * 60;
},
hour : function (val) {
this.hour = val;
this.day = this.hour/24;
this.week = this.day/7;
this.minute = this.hour * 60;
this.second = this.minute * 60;
},
minute : function (val) {
this.minute = val;
this.hour = this.minute/60;
this.day = this.hour/24;
this.week = this.day/7;
this.second = this.minute * 60;
},
second : function (val) {
this.second = val;
this.minute = this.second/60;
this.hour = this.minute/60;
this.day = this.hour/24;
this.week = this.day/7;
},
counter :function(nval, oval) {
//alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
}
}
};
</script>
v-model 表示数据双向绑定，这个没有什么好说的。data 初始化数据，watch 方法中就是监听函数，监听各自的组件并进行处理。
发送HTTP 请求
