vue学习有很多的方法。一是找一份教程，从0开始学习；另外一种就是找一份视频，跟着视频一步一步去做。个人觉得第二种方法是比较好的。因为对于大部分人来说，学习新东西的热情是很容易被消磨掉的。如果在学习的过程当中，无法短时间看到效果，那么这份积极性可能一会就没了。看视频则不一样，很多视频都是以动手实践的内容为主，只要跟着up主一步一步去做，马上就可以看到效果。
b站上面有很多的参考视频，选择一份自己比较喜欢的、跟得上的即可。这里推荐一个可以帮助我们快速了解和掌握vue.js的学习视频，地址在这，https://www.bilibili.com/video/BV1rb4y1S7Lg。下面实例中的一部分代码也是来自于这个视频。
1、第一个vue程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<title> 第一个vue应用程序 </title>
</head>
<body>
<div id="app">
<p>{{message}} </p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"Hello Vue!",
}
})
</script>
</body>
</html>
这是完整的一个网页。首先在header中引用了vue.min.js这个文件。其次增加一个id为app的div块，后面script中的vue也会和这个div绑定在一起。最后定义了一个message数据，只要对message做出了修改，上面的显示部分就会同步做出修改。
2、v-if命令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<title> v-if程序 </title>
</head>
<body>
<div id="app">
<h1 v-if="status"> This is yes </h1>
<h1 v-else> This is no</h1>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
status:false,
}
})
</script>
</body>
</html>
v-if是非常有用的一个命令。整个程序的显示内容取决于vue中的status数据，如果status为真，那么显示的内容是This is yes，反之显示的内容是This is no。
3、v-for命令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<title> v-for程序 </title>
</head>
<body>
<div id="app">
<li v-for="city in cities">
{{city}}
</li>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
cities: [
'beijing','shanghai','nanjing'
]
}
})
</script>
</body>
</html>
v-for命令主要是将vue中的数据循环显示出来。如上面代码所示，显示的内容是city。city本身又来自于vue中的cities，所以这里的v-for就是一个对cities中的内容进行循环打印的过程。
4、button按钮事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<title> event程序 </title>
</head>
<body>
<div id="app">
<button v-on:click="handle_button">click_me</button>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
name:'vue.js'
},
methods:{
handle_button:function(event){
alert('Hello ' + this.name +'!')
/*if(event){
alert(event.target.tagName)
}*/
}
}
})
</script>
</body>
</html>
在vue程序中，对于按钮事件的响应和处理有它自己的一套想法。如上图所示，这里定义了一个button，响应的函数为handle_button。那么这个函数其实是挂在vue的methods下面。当然这了为了简单，只是添加了一个alert打印，实际项目处理的时候，可以根据实际需要添加对应的语句。
5、axios程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title> axios程序 </title>
</head>
<body>
<div id="app">
<div>
名称:{{info.name}}
</div>
<div>
url:{{info.url}}
</div>
</div>
<script>
var app = new Vue({
el:"#app",
data(){
return {
info: {
name:'',
url:''
}
}
},
mounted() {
axios
.get('data.json')
.then(response=> {
this.info = response.data
console.log(this.info)
console.log(response.data)
})
}
})
</script>
</body>
</html>
另外，涉及到的data.json如下所示，
{
"name":"test_data",
"url":"http://www.test_url.com"
}和jquery中的ajax实现前后台交互一样，vue中用axios来实现前后台数据的交互。当然这里为了实现方便，就在本地用data.json做了替代。不过和上面1-5的程序有所不同，除了header中添加了axios.min.js文件外，这个html想要运行起来，不能直接用chrome打开网页，而是应该使能iis，将网页命名为index.html，同时将data.json拷贝到对应的目录下，创建一个iis网站，修改目录权限。在所有的这一切都ok之后，输入http://127.0.0.1:8080就可以看到对应的显示内容了。
