concept
what is Vue
Vue (pronounced /vjuː/, similar to view) is a progressive framework for building user interfaces. The so-called progressive is the gradual realization of new features, such as the realization of new features such as modular development, routing, and state management. Combines the advantages of Angular (modular) and React (virtual DOM)
Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue's core library only focuses on the view layer, which is not only easy to use, but also easy to integrate with third-party libraries or existing projects.
Because the boundary of Vue is very clear, it is to deal with the DOM, so it does not have the ability to communicate. At this time, you need to use an additional communication framework to interact with the server. Axios is commonly used ; of course, you can also directly use the AJAX communication function provided by jQuery.
WebPack: module packer, the main function is to pack, compress, merge and load in order
NPM: Comprehensive project management tool, similar to MAVEN
Features:
Separation of Concerns (SOC): Only focus on the view layer: HTML+CSS+JS
Network communication: axios
page jump: vue-router
State management: vuex
Vue-UI: element-ui, Feibing
Calculation properties:
The first Vue program
Understanding MVVM (Model - View -ViewModel）
- Install vue.js plugin with IDEA
- Create an html file and introduce the cdn of vue
- write the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- view层 模板-->
<div id = "app">
{
{message}}
</div>
<!--1. 导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
<!--Model: 数据-->
data:{
message: "hello,vue!"
}
});
</script>
</body>
</html>