Introduction to Vue
Official website
Introduction and description
Vue history
Vue is a progressive JS framework for dynamically building user interfaces
-
Build a user interface: turn data into a user interface in some way
-
Progressive: Vue can be applied layer by layer from bottom to top. Simple applications only require a lightweight and compact core library, while complex applications can introduce a variety of Vue plug-ins.
Vue was originally developed by You Yuxi in 2014. It is a very lightweight and efficient MVVM framework. After several years of iteration, Vue has developed into a very mature and stable front-end framework.
The first public version of Vue was 0.8, released in February 2015. This version implements core functions such as basic data binding and component systems. Although the function is not yet complete, it can already be used in simple projects.
Version 0.9 was released at the end of that year. This version rewritten the virtual DOM rendering system and greatly improved performance. Version 0.11 adds animation effects. Version 0.12 was released in October 2016, further improving performance.
Version 1.0, as the first official stable version, was released in October 2017. This version of Vue is enough to handle most scenarios and has complete ecosystem support.
Version 2.0 was released in early 2018. This version uses an ES6-based compiler to improve code quality, indicating that Vue has fully entered the 2.x era and become one of the mainstream front-end frameworks.
The latest version is currently version 3.x, released in September 2020. 3.0 has optimized and upgraded the overall architecture and embraced TypeScript. Compared with the 2.x version, 3.x has made great progress in terms of performance, maintainability, TypeScript support, etc.
From 0.x to 1.x, and then to the current 3.x, the growth and evolution of Vue can be seen. I believe that in the next few years, Vue will continue to grow into one of the most popular front-end frameworks.
Features of Vue
-
Follow the MVVM pattern
-
Simple coding, small size, high operating efficiency, suitable for mobile/PC development
-
It only focuses on the UI and can introduce other third-party library development projects
-
Adopt componentized model to improve code reuse rate and make code easier to maintain
-
In vue, a .vue file is a component
5 Declarative coding eliminates the need for coders to directly manipulate the DOM and improves development efficiency
-
Imperative programming is written step by step and executed step by step, declarative
●Use virtual DOM and Diff algorithm to reuse DOM nodes. Previously existing DOM can be directly reused to avoid duplication and optimize efficiency.
Links to other JS frameworks
Learn from angular’s template and data binding technology
Learn from react’s componentization and virtual DOM technology
Vue peripheral library
-
vue-cli: vue leg rest -
vue-resource(axios): ajax request -
vue-router: routing -
vuex: state management (it is a plug-in for vue but does not use the naming rules of vue-xxx) -
vue-lazyload: Lazy loading of images -
vue-scroller: related to page sliding -
mint-ui: UI component library based on vue (mobile terminal) -
element-ui: UI component library based on vue (PC side)
First learning Vue
Install
Precautions
Just install the development version during installation. In actual work, the smaller production version will be used when the project goes online.
-
Install the foreign Vue Devtools plug-in for the browser (otherwise the browser will report an error when opening it) -
Here, use the script tag to introduce the Vue package in the code (it is not necessary, you can also choose other methods, after the introduction, there will be an additional Vue constructor globally) -
If you want to prevent vue from generating production environment warnings at startup, you can write this in the code Vue.config.productionTip = false(disable the browser developer mode from displaying production environment warnings, use vue.config to view the global configuration)
-
Favicon needs to place the tab icon in the root path of the project and reopen it (otherwise the browser will report an error when opening it, and force a refresh with shift+f5)
Favicon is the abbreviation of favorites icon, which is called website icon (webpage icon), page icon (page icon), urlicon (URL icon). When you open any website, the browser will request the page icon by default.
-
In real development, the Vue construct has only one Vue instance, and it will be used together with components. -
{ {xxx}} The xxx in the curly brackets needs to be written in js expression (not only the content in the data), and the content in it can automatically read all the attributes in the data. -
Once the data in data changes, the places where the data is used in the page will be automatically updated.
Pay attention to the difference: js expression and js code (statement)
Expression: An expression produces a value and can be placed anywhere a value is required.
-
a
-
a+b
-
demo(1) function call expression
-
x === y ? 'a' : 'b' ternary expression
js code (statement)
-
if(){}
-
for(){}
<!-- 准备好一个容器 -->
<div id="demo">
<h1>Hello，{
{name.toUpperCase()}}，{
{address}}</h1>
</div>
<script type="text/JS" >
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
//创建Vue实例
new Vue({
el:'#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串，如果容器为class,这里直接用类选择器.demo就行，一般用id，写起来简单
data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
name:'suoqi', // 在调试面板可以修改，如果点击这里如果不能修改，需要改成英文
address:'上海'
}
})
</script>
Vue introduces success function using Vue constructor
Sochi Q&A
Q: Why should we use new Vue!
A: Because this is the underlying code regulation... vue.jsthe source code is as follows. If you don't use new, you will definitely get an error!
