Components, animations, scaffolding
- 1. ==Priority of v-if and v-for==
- 2. Animation
-
- 2.1 Introduction to animation
- 2. 2 Internal animation
- 2.3 Third-party libraries
- 3. Components
-
- 3.1 Register component
-
- 3.1.1 Partial registration
- 3.1.2 Global components
- 3.1.2 Naming rules for components
- 3.2 template
- 3. 3 data
- 3. 4 Components are reusable vue instances
- 3.5 Component nesting
- 4. Scaffolding
-
- 4.1 Scaffolding creation project
- 4.2 Project directory
- 4.3 Initialization project
1. Priority of v-if and v-for
- v-for has higher priority than v-if
example:
<div id="app">
<ul>
<!--
When v-for and v-if are used together, v-for has higher priority.
This code will first execute v-for and loop to generate 10 li tags.
Then execute v-if to delete the next 6 tags that do not meet the conditions. The performance is not good.
It is not recommended to use v-for and v-if together in all Vue. If there is such a business need, it is recommended to use calculated properties.
-->
<!-- <li v-for="(item,index) in arr" :key="item" v-if="index < 4">{<!-- -->{item}}</li> -->
<li v-for="(item,index) in showArr" :key="item">{<!-- -->{item}}</li>
</ul>
</div>
<script>
new Vue({<!-- -->
el:"#app",
data:{<!-- -->
arr:[1,2,3,4,5,6,7,8,9,10]
},
methods:{<!-- -->},
computed:{<!-- -->
//Get the desired data through calculated properties
showArr(){<!-- -->
return this.arr.slice(0,4)
}
}
})
</script>
2. Animation
2.1 Animation Introduction
- scenes to be used
1. v-if 2. v-show 3. Route switching 4. Dynamic components
- Six states of animation
Before entering: enter Entering process: enter-active Come in to complete: enter-to Before leaving:leave Leave process: leave-active Leave completion: leave-to
2, 2 internal animation
- Template syntax
<button @click=' isshow = !isshow '>Switch</button>
<!-- Add animation step
1. For elements with added animation, transition tags are nested outside.
2. Name the transition tag name='name' name='a'
3. Define 6 states
a-enter a-enter-active a-enter-to
-->
<transition name="a">
<div class="box" v-if="isshow"></div>
</transitio
- Define six states
/* ----------------Incoming status---------------- */
/* Before entering: enter */
.a-enter {
left: -200px;
transform: scale(0.1, 0.1);
opacity: 0;
}
/* Entering process: enter-active */
.a-enter-active {
transition: all 1s;
}
/* Come in and complete: enter-to */
.a-enter-to {
left: 500px;
transform: scale(1, 1);
opacity: 1;
}
/* ------------------Leaving state------------- */
/* Before leaving: leave */
.a-leave {
left:500px;
transform: rotate(0deg);
opacity: 1;
}
/* Leave process: leave-active */
.a-leave-active {
transition: all 1s;
}
/* Leave completed: leave-to */
.a-leave-to {
left: 1000px;
transform: rotate(720deg);
Opacity: 0
}
2, 3 third-party libraries
- Third-party library: animate.css
- Official address: https://animate.style/
- download
npm install animate.css --save
- use
<!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>
<script src="./vue.js"></script>
<link rel="stylesheet" href="./node_modules/animate.css/animate.css">
<style>
.box {<!-- -->
width: 200px;
height: 200px;
background: red;
/* position: absolute; */
/* left: 500px;
top: 100px; */
}
</style>
</head>
<body>
<div id="app">
<!--
1. Download npm install animate.css --save
2.Introduction
<link rel="stylesheet" href="./node_modules/animate.css/animate.css">
3. For elements that need to be tagged, nest transition tags
4.Set properties
enter-active-class='Enter style'
leave-active-class='Leave style'
-->
<button @click=' isshow = !isshow '>Switch</button>
<transition
enter-active-class="animate__animated animate__bounceIn"
leave-active-class="animate__animated animate__fadeOutLeft"
>
<div class="box" v-if="isshow"></div>
</transition>
</div>
<script>
new Vue({<!-- -->
el: "#app",
data: {<!-- -->
isshow: false
},
methods: {<!-- -->}
})
</script>
</body>
</html>
- Note: The entering and leaving states will not be used at the same time. Generally, the entering state will be used
3. Components
- Component: reusable vue instance
3.1 Registration component
3.1.1 Partial registration
- grammar
new Vue({
components:{ //Plural number, multiple components can be created
Component name: {
template:"" //template,
}
}
})
- Example-Partial registration component
new Vue({
el:"#app",
data:{},
methods:{},
//1. Registered component - local component - can only be used in the current vue instance
components:{
//Component name: {template:""}
navweb:{
template:"<div><h1>Hello, I am the website navigation</h1><h1>Hello</h1></div>"
},
one:{
template:"<div>I am one component</div>"
}
}
})
- Use components
<div id="app">
<!-- 2. Use components -->
<navweb></navweb>
<navweb></navweb>
<one></one>
<one></one>
</div>
3.1.2 Global Components
- grammar
//Only one can be registered at a time, and it must be placed in front of the instance
Vue.component("component name",{
template:""
})
- Example
//80% local components, 20% global components
//3. Register global components--all vue instances can be used
Vue.component('com',{
template:`
<ul>
<li>Featured themes</li>
<li>Industry channel</li>
<li>Domestic services</li>
</ul>
`
})
- Use global components
<div id="app2">
<h1>I am app2</h1>
<!-- Local components can only be used in the corresponding vue instance -->
<!-- <navweb></navweb> -->
<!-- 4. Use global components -->
<com></com>
</div>
3.1.2 Naming rules for components
- Naming rules
1. You cannot use existing tag names, eg: div, p, span, a, b.... 2. You cannot use uppercase names of existing tags, eg: DIV, P, SPAN... 3. If the component name contains uppercase letters, it needs to be changed to [-lowercase] when calling. Kebab writing method The first letter is capitalized and does not need to be written - 4. The component name contains a capital letter for easy calling.
3, 2 template
- template can only have one root node
vTwo:{
// Error: Component template should contain exactly one root element
// 1.template can only have one root node
template:`<div><h1>this is two</h1></div>
<p>I am the content of the two component</p>
`
},
- You can use the template tag to write template attributes
<template id="three">
<div>
<h2>I am a title</h2>
<ul>
<li>list</li>
<li>list</li>
<li>list</li>
</ul>
</div>
</template>
//2. You can use the template tag to write template options
vThree:{template:"#three"
}
3, 3 data
- The data in the component must be a function
data(){
return {name:"Daji"}
}
- Why data is a function
1. Components are reused. We hope that the components will be the same, but the data will be isolated from each other. 2. If data is an object, and the object has a reference data type, then all components share a set of data, and there will be a phenomenon of one change and all changes. 3. If data is a function that returns an object, the function is a scope space. Every time it is called, a new scope space will be generated. There is an object inside, so the data is isolated.
Components 3 and 4 are reusable vue instances
- verify
1. The component does not have el
2. data must be a function that returns an object
3. Others are the same as vue instances
4. Every time a component is called, it will be a new life cycle
v-if and v-show are used on components: v-if will cause the creation and destruction of the life cycle, v-show will not
5. A component can only use its own data, its own subcomponents, its own methods, computed, watches, and filters.
6. Global components, all vue instances can be used
- Code case one
<!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>
<script src="./vue.js"></script>
<style>
.box{<!-- -->
padding: 20px;
margin: 20px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<v-one></v-one>
<v-one></v-one>
<button @click="isshow = !isshow">Switch</button>
<!--3. When v-if and v-show act on a component, v-if switching will cause the life cycle to be re-executed, but v-show will not -->
<v-one v-if="isshow"></v-one>
</div>
<!-- Define component template -->
<template id="one">
<div class="box">
<p>Name: {<!-- -->{name}}</p>
<button @click="change">Change name</button>
</div>
</template>
<script>
new Vue({<!-- -->
el:"#app",
data:{<!-- -->
isshow:true
},
methods:{<!-- -->},
components:{<!-- -->
//1. Components are reusable vue instances
//The component does not have el, data must be an object returned by the function, and everything else is the same as the vue instance
vOne:{<!-- -->
template:"#one",
data(){<!-- -->
return {<!-- -->
name:"Yang Yang"
}
},
methods:{<!-- -->
change(){<!-- -->
this.name = "Wang Churan";
}
},
//2. Life cycle, every time the component is called, a new vue instance will be generated, and the life cycle will go through
mounted(){<!-- -->
console.log("Mounting completed");
},
destroyed(){<!-- -->
console.log("Uninstall completed");
}
}
}
})
</script>
</body>
</html>
- Code example 2: using component nesting
<!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>
<script src="./vue.js"></script>
<style>
.box{<!-- -->
padding: 20px;
margin: 20px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<v-one></v-one>
<v-two></v-two>
<web-nav></web-nav>
</div>
<!-- one component-->
<template id="one">
<div class="box">
<p>this is one</p>
<p>Name: {<!-- -->{name}}</p>
<!-- Using nested components -->
<v-child></v-child>
<web-nav></web-nav>
</div>
</template>
<!-- two components-->
<template id="two">
<div class="box">
<p>this is two</p>
<p>Name: {<!-- -->{name}}</p>
<v-child></v-child>
<web-nav></web-nav>
</div>
</template>
<!-- Nested components -->
<template id="child">
<div class="box">
<h1>this is child</h1>
<web-nav></web-nav>
</div>
</template>
<!-- Global components -->
<template id="nav">
<div class="box">
<ul>
<li>front page</li>
<li>List</li>
<li>Details page</li>
</ul>
</div>
</template>
<script>
// 2. Define global components-global components can be used in all vue instances
Vue.component("webNav",{<!-- -->
template:"#nav"
})
new Vue({<!-- -->
el:"#app",
data:{<!-- -->
isshow:true
},
methods:{<!-- -->},
components:{<!-- -->
//When discussing component relationships, there are only parent-child components and non-parent-child components.
//1. A component can only use its own things (data, methods, computed, filters, components...)
vOne:{<!-- -->
template:"#one",
data(){<!-- -->
return {<!-- -->
name:"Yang Yang"
}
},
components:{<!-- -->
vChild:{<!-- -->
template:"#child"
}
}
},
vTwo:{<!-- -->
template:"#two",
}
}
})
</script>
</body>
</html>
3, 5 component nesting
- Nested
//Register
vOne:{
template: "#one",
components: {
vTwo: {
template: "#two"
}
}
}
- point to this
4. Scaffolding
4.1 Scaffolding Creation Project
- Scaffolding——vue-cli
vue-cli is one of the core tools of Vue. It can quickly build the basic skeleton of the project through commands.
- Official website address https://cli.vuejs.org/zh/
- Install
npm i webpack -g: Install webpack globally webpack -v: View the webpack installation version npm install @vue/cli -g: Install vue scaffolding globally vue -v or vue --version: scaffolding version
- Scaffolding creation project
Note: There is no vue.js file where the project is created
vue create project name (do not have Chinese characters, do not use camel case, do not use keywords)
- start up
cd project directory npm run serve
- View http://localhost:8080/ with a browser
4.2 Project Directory
- Table of contents
vue.config.js (cross-domain proxy)
README.md reading guide, what instructions are there?
package.json dependency management
package-lock.json dependency management
babel.config.js es6 to es5 configuration file
.gitignore defines the ignored files of git
src is where the front-end code is written.
--assets static resource file img css js font
--components component folder, a .vue file is a component, and a component contains three parts
1. View template html part
2. Logic code script js part
3. Style css part
--app.vue root component
--main.js entry js file, where vue is instantiated
public shared files
--favicon.ico icon
--index.html main html file
node_modules third-party package folder
4, 3 initialization project
- Delete files in assets,components folder
- Reset the contents of the app.vue file
<template>
</template>
<script>
export default {
}
</script>
<style>
</style>