(Creating is not easy, thank you, your support is the biggest motivation for me to move forward, if it is helpful to you after reading it, please leave your footprints)
Table of contents
Quick start with Vue
Vue concepts
Concept: Vue is a progressive framework for building user interfaces
Build the user interface : render the page that the user sees based on the data
Progressive : step by step
Two ways to use Vue:① Vue core package developmentScenario: local module transformation② Vue core package & Vue plug-in engineering developmentScenario: whole site development
Framework: a complete set of project solutions
Advantages: Greatly improve development efficiency ( 70%↑ )Disadvantages: need to understand the memory rules → official website
create instance
initial rendering,Core steps 4 steps:1. Prepare the container2. Citation package (official website) - development version / production version3. Create a Vue instance new Vue()4. Specify configuration item → render data① el specifies the mount point② data provide data
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 准备容器 -->
<div id="app">
{
{msg}}
</div>
<!-- 引入开发版本包 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
//vue构造函数
const app = new Vue({
//通过el配置选择器，指定vue是哪个盒子
el:'#app',
data:{
msg:'hello world'
}
})
</script>
</body>
</html>interpolation expression
The interpolation expression { {}} is a Vue template syntax
1. Function: Use expressions to interpolate and render to the pageExpression: It is a code that can be evaluated, and the JS engine will calculate a result
2. Syntax: { { expression }}
3. Note:
(1) The data used must exist (data)
(2) Expressions are supported, not statements, such as: if for ...
(3) You cannot use { { }} interpolation in tag attributes
Responsive features
When the data changes, the view is automatically updated
Focus on Data → Data Driven ViewUse Vue to develop, focus on the core logic of the business , and modify the data according to the business
developer tools
Install plug-ins to debug Vue applications(1) Install through the Google App Store (foreign website)(2) Minimalist plug-in: Download → Developer Mode → Drag and drop to install → Plug-in details allow access to files https://chrome.zzzmh.cn/index
Open the page where Vue is running , and in the Vue column of the debugging tool , you can view the modified data and debug.
Vue directives
Vue will implement different
[functions]
for tags according to different
[instructions]
Directives:
Special tag attributes prefixed with
v-
v-show
1. Function: Display and hide control elements2. Syntax: v-show = " expression " The expression value is true to display , false to hide3. Principle: switch display:none to control display and hide4. Scenes: Frequently switch to show hidden scenes
v-if
1. Function: Display and hide control elements ( conditional rendering )2. Syntax: v-if = " expression " The expression value is true to display , false to hide3. Principle: Based on conditional judgment , whether to create or remove element nodes4. Scenes: Either display or hide, scenes that do not switch frequently
v-else v-else-if
1. Function: assist v-if to judge rendering2. Syntax: v-else v-else-if = "expression"3. Note: It needs to be used next to v-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p v-if="gender === 1">性别：♂ 男</p>
<p v-else>性别：♀ 女</p>
<hr>
<p v-if="score >= 90">成绩评定A：奖励电脑一台</p>
<p v-else-if="score >= 70">成绩评定B：奖励周末郊游</p>
<p v-else-if="score >= 60">成绩评定C：奖励零食礼包</p>
<p v-else>成绩评定D：惩罚一周不能玩手机</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
gender: 2,
score: 95
}
})
</script>
</body>
</html>v-on
1. Function: register event = add listener + provide processing logic2. Grammar:① v-on: event name = "inline statement"
② v-on: event name = "function name in methods"
3. Abbreviation: @event name4. Note: this in the methods function points to the Vue instance
v-on calls pass parameters
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
border: 3px solid #000000;
border-radius: 10px;
padding: 20px;
margin: 20px;
width: 200px;
}
h3 {
margin: 10px 0 20px 0;
}
p {
margin: 20px;
}
</style>
</head>
<body>
<div id="app">
<div class="box">
<h3>小周自动售货机</h3>
<button @click="buy(5)">可乐5元</button>
<button @click="buy(10)">咖啡10元</button>
<button @click="buy(8)">牛奶8元</button>
</div>
<p>银行卡余额：{
{ money }}元</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
money: 100
},
methods: {
buy (price) {
this.money -= price
}
}
})
</script>
</body>
</html>The web page appears as:
v-bind
1. Function: dynamically set the tag attribute of html → src url title ...2. Syntax: v-bind : attribute name ="expression"3. Note: short form : attribute name = "expression"
v-for
1. Function: Based on the data loop, render the entire element multiple times → array , object, number...2. Traversing the array syntax:v-for = "( item, index ) in array "item for each item, index subscriptomit index: v-for = " item in array "
key
The default behavior of v-for is to try to modify elements in-place ( in-place multiplexing )Syntax: key attribute = "unique identifier"Function: The unique identifier added to the list item . It is convenient for Vue to correctly sort and reuse list items .important point:1. The value of the key can only be a string or a number2. The value of key must be unique3. It is recommended to use id as the key (unique), and it is not recommended to use index as the key (it will change and does not correspond)
v-model
1. Function: for form elements , two-way data binding → can quickly get or set the content of form elements① Data change → view automatically updated② View changes → data is automatically updated2. Syntax: v-model = 'variable'