1. Vue的创建和绑定数据
Vue.js是一个轻量级的JavaScript框架，提供了响应式的数据绑定和组件化的视图组织方式。在开始使用Vue.js之前，需要先引入Vue.js的js文件。
<!-- 引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Vue.js创建应用程序的唯一方式就是通过Vue实例化一个Vue对象。Vue对象要挂载到HTML元素上，可以通过el属性来指定Vue对象要挂载的HTML元素，而指定哪些数据需要响应式更新，则可以通过data属性来定义Vue对象中的数据。
<!-- Vue对象挂载到id为app的元素上 -->
<div id="app"></div>
<script>
// Vue实例化对象
var app = new Vue({
// 挂载到HTML元素上
el: "#app",
// 定义数据
data: {
message: "Hello, Vue!",
count: 1
}
});
</script>
以上代码创建了一个Vue对象，并将其挂载到id为app的元素上，同时定义了两个响应式数据。
Vue对象和HTML元素建立关联后，就可以在HTML中使用双花括号{{}}插值表达式绑定数据，双向的数据绑定可以实现前后端的数据传输。
<!-- 在HTML中使用插值表达式绑定数据 -->
<div id="app">
<p>{{ message }}</p>
<p>{{ count }}</p>
</div>
以上代码会在浏览器中显示出Hello, Vue!和1两个数据。
2. Axios的使用方法和跨域问题解决方案
2.1 Axios的使用方法
Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js平台上发送HTTP请求，支持请求取消，拦截请求和响应，自动转换JSON数据，错误处理等许多高级功能。
Axios的使用方法非常简单，只需要通过axios对象调用相应的方法即可。如下所示：
// 获取数据
axios.get(url).then(response => {
console.log(response.data);
});
// 发送数据
axios.post(url, data).then(response => {
console.log(response.data);
});
// 其他方法：axios.put()、axios.delete()等等
以上代码展示了Axios的GET和POST方法的使用方法，当请求成功完成时，相应的数据会通过then方法获取到。
2.2 Axios的跨域问题解决方案
在前端开发中，面临着跨域的问题，虽然后台接口也可以设置允许跨域，但是更好的解决方案是使用webpack配置跨域代理。
通过webpack的devServer属性，设置proxy代理，将跨域的请求转发到本地开发环境下的后台接口，从而解决跨域问题。
安装http-proxy-middleware模块
npm install http-proxy-middleware --save-dev
在webpack.config.js文件中添加如下代码块
// devServer中配置proxy
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
pathRewrite: {'^/api' : ''},
changeOrigin: true,
secure: false //https需要配置
}
}
}
以上代码将以/api开头的请求都代理到http://localhost:3000本地开发环境下的后台接口上，从而解决跨域问题。
3.前后端数据传输示例
结合Vue和Axios的用法，实现前后端数据的传输，以下是一个小例子。
前端代码如下：
<!-- index.html -->
<html>
<head>
<title>Vue-Axios</title>
</head>
<body>
<div id="app">
<h3>用户列表</h3>
<ul>
<li v-for="user in users" :key="user.id">{{ user.name }} {{ user.age }}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
users: []
},
mounted: function () {
var self = this;
// 发送GET请求
axios.get('/api/users')
.then(function (response) {
console.log(response.data);
self.users = response.data;
})
.catch(function (error) {
console.log(error);
});
}
})
</script>
</body>
</html>
在获取数据时，使用了Axios的GET方法来获取后台接口返回的数据，并且将数据绑定在Vue对象的data属性中。接下来是后端代码：
// server.js
const http = require('http');
const server = http.createServer(function (req, res) {
if (req.url === '/api/users') {
// 设置允许跨域
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
const users = [
{ id: 1, name: 'Alice', age: 18 },
{ id: 2, name: 'Bob', age: 20 },
{ id: 3, name: 'Charlie', age: 22 },
];
res.end(JSON.stringify(users));
}
});
server.listen(3000, function () {
console.log('Server running on port 3000');
});
以上代码通过创建一个HTTP服务器来处理前端请求，当请求API为/api/users时，设置允许跨域，然后创建一个数组，存放用户信息，最后返回数据。
当前端页面运行时，会在页面上显示出后台返回的用户信息。
总结
Vue与Axios这两个工具在实际的开发中相当有用，Vue实现了前端的数据绑定，能够实时响应后台数据的更新，而Axios则用于与后台的数据交互。通过Vue和Axios，可以较为简单地实现前后端的数据传输，为前端开发提供了很大的便利。