Vue animation
Single element animation
- Wrap the elements that need animation with transition
- Give the transition a name attribute to specify the animation effect
- So write style
.xxx-enter-active{
/* 设置进入时的transition属性 */
}
.xxx-leave-active{
/* 设置离开时的transition属性 */
}
.xxx-enter {
/* 设置以什么状态进入 */
设置动画需要过渡的属性样式
}
.xxx-leave-to {
/* 设置离开到什么状态 */
设置动画需要过渡的属性样式
}
Use of transition and keyframes combined animation
- Write an animation script of @keyframes yourself
- Then use it in xx-enter-active, it means to use this animation script
- Used in xx-leave-active, it means leaving with this animation script
Multi-element animation
Multi-element animation must be wrapped in transition-group , and each sub-element must be set with a key , the others are the same as single-element animation
- Transition can only be used on a single element
- If you want to animate multiple elements, use
<transition-group>wrap - And each wrapped label must be keyed, and the key cannot be repeated.
Whether it is a single-element animation or a multi-element animation, there will be a class called xx-enter-active when entering
Basic use of components
Encapsulating an interface or a small function is called a component (that is, a comprehensive package of html css js). The component is also an instance of Vue, so it also has its own data and methods and life cycle hooks.
How to introduce other components in the component
- If the component to be run is called App.vue, then you can also directly vue serve without adding the file name
- Steps to introduce components:
- import component name from'component path'
- In the parent component that needs to be introduced, write the components property (at the same level as data). This is an object. Just write the component name in the object.
components:{
son
}
- Write the label of the component name where you need it
- The name of the subcomponent can be changed when the subcomponent is introduced, but it is generally not changed
- The parent component that contains others, and the child component that is included
- The assets folder contains static resources: pictures, css files, font files
- When importing other components, you don’t need to write the suffix .vue, it will automatically find .vue for you
How to use external plugins in components
- Download the package first
npm i 包名
npm i axios
- Guide package
import 名字 from '包名'
- Use bag
名字叫什么就用什么
Value passing between components
If component B is introduced into component A, then we call component A the parent component and B the child component
- Father to son
- In the label using the subcomponent, add ref="name"
- Then use this.$refs. name to get the sub-component object, which is equivalent to this in the sub-component, so assigning its properties is equivalent to passing by value
- Pass from son to father
- Write this.$parent in the child component to find the parent component object, and then directly assigning its properties is equivalent to passing the value
Vue-cli project creation
Document
vue_cli : scaffolding, tools for managing projects, and translating projects into files recognized by the browser, which is equivalent to translating .vue files into .html, .css, .js
Rapid prototyping : Every time you start and create a new project with scaffolding, it will be slow and troublesome, so this single file component service allows us to quickly run the .vue file
Install vue_cli first
npm install -g @vue/cli
Reinstall rapid prototyping
npm install -g @vue/cli-service-global
Create project
vue create 项目名
-
Do not use capital letters or keywords for the project name, for example, the name of the project is vue, etc.
-
In actual development, use the English name of the project, for example: WeChat is called vue create wechat
-
After the project is created, you can cd into the project directory
-
Then execute npm run serve to run the project
npm run serve
Vue-cli project structure
other
God knows the case summary
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>天知道</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/iconfont.css" />
<link rel="stylesheet" href="css/main2.css" />
<style>
.tem .iconfont {
font-size: 50px;
}
/* 进入的动画体 */
.wealist-enter-active{
transition:all 1s
}
.wealist-enter-active:nth-child(2){
transition-delay: 0.2s;
}
.wealist-enter-active:nth-child(3){
transition-delay: 0.4s;
}
.wealist-enter-active:nth-child(4){
transition-delay: 0.6s;
}
.wealist-enter-active:nth-child(5){
transition-delay: 0.8s;
}
/* 进入的动画前的状态 */
.wealist-enter{
opacity: 0;
transform: translateY(100px);
}
</style>
</head>
<body>
<div class="wrap" id="app">
<div class="search_form">
<div class="logo"><img src="img/logo.png" alt="logo" /></div>
<div class="form_group">
<input
type="text"
v-model.lazy="city"
class="input_txt"
placeholder="北京"
@keyup.enter="search"
/>
<button class="input_sub " @click="search" :class="{loading:isLoading}">搜 索</button>
</div>
<div class="hotkey" @click="clickHot">
<a href="javascript:;">北京</a>
<a href="javascript:;">上海</a>
<a href="javascript:;">广州</a>
<a href="javascript:;">深圳</a>
</div>
</div>
<ul class="weather_list">
<transition-group name="wealist">
<li v-for="(item, index) in list.forecast" :key="index">
<div class="info_type">
<!-- 雨 -->
<span class="iconfont" v-if="item.type.indexOf('雨')!=-1"></span>
<!-- 晴 -->
<span class="iconfont" v-else-if="item.type.indexOf('晴')!=-1"></span>
<!-- 阴 -->
<span class="iconfont" v-else-if="item.type.indexOf('阴')!=-1"></span>
<!-- 雪 -->
<span class="iconfont" v-else-if="item.type.indexOf('雪')!=-1"></span>
<!-- 云 -->
<span class="iconfont" v-else-if="item.type.indexOf('云')!=-1"></span>
<!-- 雷 -->
<span class="iconfont" v-else-if="item.type.indexOf('雷')!=-1"></span>
<!-- 雹 -->
<span class="iconfont" v-else-if="item.type.indexOf('雹')!=-1"></span>
<!-- 雾 -->
<span class="iconfont" v-else="item.type.indexOf('雾')!=-1"></span>
</div>
<div class="info_temp"> {
{
item.high}} </b><br /> {
{
item.low}} </div>
<div class="info_date"><b> {
{
list.city}} </b><span> {
{
item.date}} </span></div>
</li>
</transition-group>
</ul>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
city: '',
list:[],
isLoading:false
},
methods: {
search(){
if(this.city.trim()==''){
window.alert('请输入正确的城市名称');
}else{
// 1.加载loading动画
this.isLoading=true
// 2.清空list列表
this.list= []//空相当于false,加载数据从没有到有相当于进入动作
// 3.请求
this.query(this.city);
}
},
query(city){
axios({
url:'http://wthrcdn.etouch.cn/weather_mini',
method:'get',
params: {
city:city}
}).then(res=>{
//成功回调
console.log(res)
if(res.data.status==1000){
setTimeout(()=>{
// 将响应的数据赋值给list，vue会自动渲染，相当于进入动作
this.list=res.data.data
// 加载后取消动画
this.isLoading = false
},500)
}else{
window.alert('请正确输入需要查询的城市')
}
});
},
clickHot(e){
this.city=e.target.text
this.search();
}
},
created() {
// 初始化
this.query('北京')
},
})
</script>
</body>
</html>
to sum up:
Basic use of ref
Vue is specially used to obtain dom elements
- usage
- Write ref="name" in the label line you need to find
- Write this.$refs. name wherever you want to use it
- As long as you add the ref attribute to a tag, you can find it in the $refs of the vue instance
- note
- The ref name can also be the same, but only the last one can always be found, so we generally don’t give the label the same ref
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 200px;
height: 150px;
border: 1px solid #000;
overflow: auto;
}
</style>
</head>
<body>
<div id="app">
<!-- scrollTop不是行内属性，用v-bind来绑定也没用 -->
<!-- 用vue的方法是完成不了的 -->
<!-- 我们使用一些插件的时候需要传入dom元素，那么这个时候也可以用ref来找到 -->
<!-- 找到这个元素，再 .scrollTop = 999 -->
<!-- 所以这个时候就需要在vue里面找到dom元素 -->
<!-- ref是一个行内属性，相当于在vue中这个标签起了一个名字 -->
<div class="box" ref="box">
<p>这是p标签1</p>
<p>这是p标签2</p>
<p>这是p标签3</p>
<p>这是p标签4</p>
<p>这是p标签5</p>
<p>这是p标签6</p>
<p>这是p标签7</p>
<p>这是p标签8</p>
<p>这是p标签9</p>
<p>这是p标签10</p>
</div>
<!-- <div ref="xxxx">{
{
我是第二个div}}</div> -->
<button @click="toEnd">滚到最后</button>
<button @click="toUp">滚到顶部</button>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
},
methods: {
toEnd(){
console.log(this.$refs)
console.log(this.$refs.box)
console.log(this.$refs['box'])
// 也可以找，但是比较麻烦，vue有专门找到dom元素的方法
// let box = document.querySelector('.box')
// box.scrollTop = 9999
this.$refs.box.scrollTop = 9999
},
toUp(){
this.$refs.box.scrollTop=0
}
}
})
</script>
</body>
</html>
$nextTick use
- It is an advanced version of setTimeout. It is an asynchronous operation, which helps us calculate the time required for data rendering to the page and then execute the internal operations of the graph.
- Is a callback function called after the next update
The following is taken from the blog https://www.cnblogs.com/haishen/p/10807691.html
-
$nextTickThe delayed callback is executed after the end of the next DOM update cycle. After modifying the data$nextTick, you can get the updated DOM in the callback (the dom change occurs after nextTick()). This method is used when the data is modified Using this method, it will call back to get the updated dom and then render it -
$.nextTick() Function : After the next dom update cycle ends, the delayed callback is executed. Use this method immediately after modifying the data to get the updated dom
-
Vue.nextTick() needs to be used in the following two situations:
1. The DOM operation performed by the created() hook function of the Vue life cycle must be placed in the callback function of Vue.nextTick() , because created() is executed when DOM does not actually perform any rendering. At this time, DOM operation is no different from futile, so here we must put the JS code of DOM operation into the callback function of Vue.nextTick(). -
Corresponding to it is the mounted hook function, because all DOM mounting and rendering have been completed when this function is executed, and there is no problem with any DOM operations in the hook function at this time.
-
2. An operation to be performed after the data changes, and this operation needs to use the DOM structure that changes with the data change, this operation should be placed in the callback function of $.nextTick()
In short, if your operation after the data change is related to the changed DOM, then you should use Vue.nextTick()