vue day(3) 过渡，生命周期，自定义指令

最新推荐文章于 2023-06-02 15:56:01 发布

初心魏

最新推荐文章于 2023-06-02 15:56:01 发布

阅读量280

点赞数

分类专栏： vue框架学习文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_42306803/article/details/104153889

版权

vue框架学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、transition过渡

1.1 单元素过渡

使用<transaition></transition>标签进行控制

1.2 多元素过渡

多元素的意思是多个元素中一次只能选中一个元素进行动画展示
前提是多个元素的key值不一样，或者标签的类型不同，不然不会有动画效果。
mode:out-in/in-out,来控制动画切换的方式

1.3 多个组件过渡

和多元素过渡方式一样

1.4 列表过渡

使用<transaition-group tag="ul"></transition-group>,不指定tag,外面会包裹一个span标签。
记得设置一个key值，不是在<transaition-group tag="ul"></transition-group>这里面设置。

二、vue生命周期，过滤器，自定义指令

2.1 vue生命周期

beforeCreated
created
beforemounted
mounted
上面的４个事件在组件的生命周期中只会触发一次
beforeupdated
updated
组件中的一些状态更新时会触发这两个事件。
beforedestoryed
destoryed
组件被销毁的时候会触发这两个事件。

2.2 过滤器

使用过滤器
| 右边是定义的过滤器的名称

  <img :src="item.cover | myfilter"/>

自定义的过滤器

 Vue.filter("myfilter",function(path){
                return path.replace('png','png@200w_268h.png');
			 })

举例
设置div的title,在过滤器过滤后加上"aaa"

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div style="width:100px;height:200px;border: 1px solid red" :title="title | myfilter"></div>
    <button @click="show()">按钮</button>
</div>
    
<script>
  Vue.filter("myfilter",function(data){
    return data + "aaaaa"
  })
 var vm = new Vue({
  el: '#app',
  data: {
    title:"hahah"
  },
  methods: {
    show(){
      console.log(this.title)
    }
  }
})
</script>
</body>
</html>

2.3 vue.swiper

没学过，跳过

2.4 自定义指令

在 Vue.directive中自定义指令

inserted方法只执行一次，update方法会执行多次，只有inserted方法，通过变量是修改不了状态的。


  Vue.directive("hello",{
			inserted(el,bind){
				console.log(bind.value);
				console.log(bind)
              el.style.background = bind.value;
			},
			update(el,bind) {
				el.style.background = bind.value;
			}})
			var vm = new Vue({
				el:"#start",
				data:{
					color:"red"
				}
			})

使用自定义指令

 <div v-hello="color">111111</div>

2.5 单文件组件

组件开发在.vue文件中，webpak会帮我们去解析，但是需要我们自己去配置一些内容，vue的脚手架已经帮我们配置好了，我们直接去使用就可以。

三、vue脚手架创建vue项目

3.1 安装脚手架

旧的需要先卸载

npm uninstall vue-cli -g

npm install -g @vue/cli

3.2 vue create proname

创建vue项目

3.3 环境构建

npm run serve
开发环境构建
npm run build
生产环境构建
npm run lint
代码检测工具

3.4 测试

cd proname
进入创建的vue项目中
npm run serve
开发环境构建
访问: http://localhost:8080

3.5 单文件组件

<template>
  <div>
    <div>hello my dad</div>
    <input type="text" ref="myText">
    <button @click="handleClick()">按钮</button>
    <ul>
      <li v-for="data in name" :key="data">
        {{data}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      name: []
    }
  },
  methods: {
    handleClick () {
      this.name.push(this.$refs.myText.value)
      console.log('hahha')
    }
  }
}
</script>

<style lang="scss">
ul{
  li{
    background:red;
  }
}
</style>

效果

3.6 全局组件导入方式

<script>
// 全局组件导入方式
import navbar from './components/Navbar'
import sidebar from './components/SideBar'
import Vue from 'vue'
Vue.component('navbar', navbar)
Vue.component('sidebar', sidebar)
</script>

3.7 局部组件导入方式


<script>
// 局部组件导入方式
import navbar from './components/Navbar'
import sidebar from './components/SideBar'
export default {
  data () {
    return {
      name: []
    }
  },
  methods: {
    handleClick () {
      this.name.push(this.$refs.myText.value)
      console.log('hahha')
    }
  },
  components: {
    navbar: navbar,
    sidebar: sidebar
  }
}
</script>

3.8 scoped属性

加上scoped属性，样式局部生效，即彼此之间样式不会相互影响

<style scoped>

</style>

３.9 esclint工具

npm run lint
在项目中，使用该命令，会自动修复一些因为格式带来的错误。

在这里插入图片描述

npm run build
会将前端项目进行打包，最终生成dist文件夹
dist文件夹

在这里插入图片描述

３.10 vue反向代理配置

安装axios

cnpm install save axios

倒入axios

import axios from 'axios'

创建vue.config.js文件

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8081/sendMail',
        ws: true,
        // https请求需要该设置
        secure: false,
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
}

请求发送

  mounted () {
    axios.post('/api', {
      email: '401129874@qq.com'
    }).then(res => console.log(res))
  }

结果

3.11 配置完后需要重启一下项目

npm run serve
记得把修改过的文件都保存一下，该关闭的关闭了，不然会报错

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://monitor.maoyan.com',
        changeOrigin: true
      }
    }
  }
}

初心魏

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue day(3) 过渡，生命周期，自定义指令

一、transition过渡1.1 单元素过渡使用<transaition></transition>标签进行控制1.2 多元素过渡多元素的意思是多个元素中一次只能选中一个元素进行动画展示前提是多个元素的key值不一样，或者标签的类型不同，不然不会有动画效果。mode:out-in/in-out,来控制动画切换的方式1.3 多个组件过渡和多元素过渡方式一...
复制链接

扫一扫