前端工程化主要是指将前端开发的各个阶段（设计、开发、测试、部署等）模块化、自动化和组件化。AJAX 和 Vue.js 是实现前端工程化的两个关键技术。
AJAX（Asynchronous JavaScript and XML）是实现前端与服务器通信而无需刷新页面的一种技术。
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它的目标是通过尽可能简单的 API 提供高效的数据驱动的组件。
以下是使用Vue.js创建一个简单的组件的示例：
<!-- 在HTML文件中引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<div id="app">
<button @click="greet">Say Hello</button>
</div>
<script>
// 创建Vue实例
new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
},
methods: {
greet: function() {
alert(this.message);
}
}
});
</script>
在这个例子中，我们创建了一个Vue实例，并将其挂载到id为app的元素上。我们定义了一个按钮，当点击时，会调用greet方法，弹出一个包含message数据属性的警告框。这就是Vue.js的基本用法。
AJAX通常与Vue.js结合使用，以便在不刷新页面的情况下更新数据。以下是一个使用Vue.js和AJAX的示例：
<!-- 在HTML文件中引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<div id="app">
<input v-model="inputValue" placeholder="Enter something">
<button @click="fetchData">Fetch</button>
<div v-if="response">
Response from server: {{ response }}
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
inputValue: '',
response: null
},
methods: {
fetchData: function() {
var self = this;
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data?input=' + encodeURIComponent(this.inputValue));
xhr.onload = function() {
if (xhr.status === 200) {
self.response = xhr.responseText;
} else {
// 处理错误
alert('Request failed. Returned status of ' + xhr.status);
}
};
xhr.send();
}
}
});
</script>
在这个例子中，我们创建了一个Vue实例，并在其中定义了一个输入框和一个按钮。当用户点击按钮时，fetchData方法会被调用，它创建一个AJAX请求到指定的URL，并将输入框的值作为查询参数发送。服务器响应会被处理，并显示在页面上。这就是前端工程化的简单实践。