Vue2笔记

0） vue脚手架(用于快速创建项目)

npm install -g @vue/cli

vue create 项目名  // 创建项目

1）事件修饰符

1. 原生事件：<button @click=handle1>原生标签</button> 点击生效
2. 自定义事件  <detial @click=handle2></detial>  点击不生效，组件标签不是原生标签，添加的click事件属于自定义事件，需要this.$emit触发
3. 自定义事件添加原生事件  <detial @click.native=handle2></detial> 加上修饰符.native转变为原生标签


# 属性修饰符(父传子的数据，属于单项流数据，不可随意改动父亲的数据，使用sync修饰符，可以使父亲的数据进行双向绑定)
# 父组件
<father :state.sync="mystate"></father>
data(){
    return{
      mystate:true  
    }
}
# 所代表的含义:代表父组件给子组件传递参数"money",并且给子组件绑定一个自定义事件(update:money)

子组件
this.$emit('update:money',false)

2)按键修饰符

3）表单修饰符

4)计算属性

5) watch 监听

6)filter过滤器

7)动态展示组件

8)具名插槽和匿名插槽

9)生命周期(初始化阶段只 瞬间执行一次)

生命周期(真实操作改变数据阶段)

11)生命周期(销毁阶段)

12)配置反向代理(解决跨域)

pathRewrite: {

​ '^/api': '' // 重写路径，即把 /api 替换为 ''

​ }

13)一级路由和重定向

14)声明式导航 传参: ?name=张三

15)编程式导航

传参({path:'/detail',query:{name:'张三'}})

16)rem适配

17)iconfont两种引入方案

icon需要引入的文件如下:
iconfont.css
iconfont.ttf
iconfont.woff
iconfont.woff2

18)全局路由守卫

Next()中可以使用以下形式：
Next({
Path:‘/login’,
Query:{aaa:to.fallpath}
})
获取query：this.$route.query.aaa

19)嵌套路由(二级路由)

20)动态路由(列表跳详情)

21)Vuex(主要通过this.$store查看关键信息，

以及映射函数中的...mapState(['name'])的含义为

展开state中的name属性)

  1. 同步改变公共状态(直接调用this.$store.commit专门促发mutations中的函数)

  1. 异步操作(直接调用this.$store.dispatch专门促发actions中的函数)

  1. Vuex辅助映射函数(mapState) （重点在于属性中有什么值，展开之后，中括号中写什么就可以了，以及属性中有方法的话，在mehods中进行展开,属性中没有方法的话，直接在computed中进行操作展开）

    3.1第一种数组形、l

    3.2第二种对象形式(需要改变名字时再用,不需要更推荐使用数组形式)

  3. Vuex辅助映射函数(mapActions)

  1. Vuex(getters)

  1. Vuex(命名空间和模块化)

    命名空间获取或者修改数据，主要关键点在于(1.必须开启命名空间 2.如果使用映射函数，

    举例语法必须为...mapState('模块名'，['state中存在的属性名']))===>注意'模块名'是根据index.js中的modoules中的名字为根据

    6.1 第一步:在store文件夹中创建一个module.js文件并导出（context可以换成store）

6.2 第二步:在store下的index.js文件中进行导入

6.3 第三步在组件中使用模块或命名空间

...mapActions('moduleA,['addGoods]')的详细含义如下：

'moduleA'代表从moduleA模块中调用moduleA模块中的acctions方法

['addGoods']代表moduleA模块中acctions方法中定义的方法名**

22)混入mixin

当重复的js代码出现在多处时，可以使用mixin进行封装的复用

23）对象或者数组额外添加值

obj{
    name:'张三'
}
# 修改原属性值
this.$set(this.obj,"name","王五")
# 新增属性值
this.$set(this.obj,"like","打篮球")

arr=[
    {name:'娃娃鱼'}，{name:'张三'}
]            原数组  索引 新值
# this.$set(this.arr,0,'李四')

24) 全局组件通信$Bus(关键在于New一个vue的实例)

1.在utils文件夹创建一个evenBus.js文件

import Vue from 'vue'
const EventBus = new Vue();
Object.defineProperties(Vue.prototype,{
    $bus:{
        get:function(){
            return EventBus
        }
    }
})

2.在main.js中导入整个文件

import  "./utils/eventBus.js"

3使用方式

###### 传值
<button @click="sendData">传值</button>
 sendData(){
      this.$bus.$emit('msg','来自APP的数据')
    }

#####  接收
	  this.$bus.$on('msg',msg=>{this.msg = msg})

25 解决index.html引入js文件报错问题

# 必须在public文件夹下新建一个static文件夹(将js或css文件放入此文件夹中)

26 路由案例

  • 路由配置
const routes = [
{
  path:'/home',
  component: () => import('@/views/Home.vue'),
  children:[
    {
      path:'/home/back',
      component: () => import('@/views/Back.vue'), 
    },
    {
      path:'/home/detail',
      component: () => import('@/views/Detail.vue'), 
    }
  ]
}
]
  • Home.vue代码
<template>
  <div class="box">
    <!-- 头部颜色块 -->
    <div class="asd"></div>
    <!-- 主体颜色块 -->
    <div class="main">
      <div class="aaa"></div>
      <div class="bbb">
        <router-view> </router-view>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  created() {},
  computed: {},
  methods: {},
};
</script>
<style lang ="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  .asd {
    width: 100%;
    height: 200px;
    background-color: red;
  }
  .main {
    width: 100%;
    height: 100%;
    display: flex;
    .aaa {
      width: 200px;
      height: 100%;
      background-color: skyblue;
    }
    .bbb {
      flex: 1;
      background-color: blue;
    }
  }
}
</style>

27) swiper轮播插件使用（下载@5版本）必须mounted使用

<template>
  <div>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
    </div>

    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
export default {
  mounted() {
    new Swiper('.swiper-container', {
      direction: "vertical", // 垂直切换选项
      loop: true, // 循环模式选项
      autoplay: true,
    });
  },
};
</script>

<style lang="scss" scoped>
.swiper-container {
  width: 600px;
  height: 300px;
  .swiper-slide:nth-child(2n-1){
     width: 600px;
     height: 40px !important;
     background-color: red;
     line-height: 30px;
  }
    .swiper-slide:nth-child(2n){
     width: 600px;
     height: 40px !important;
     line-height: 30px;
  }
}
</style>

28)同时使用多个swiper轮播

# 使用多个swiper情况下  在容器盒子 swiper-container后再加个类名即可 举例 swiper-container swiPer1
// new 实例的时候 获取节点 .swiPer1即可

29）vue2引入elementui-plus

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

30）vue打包后本地运行

dist目录下  执行以下命令
    1. npm install http-server -g
    2. http-server
  // 打开第一个网址(其他可能会出错)

31）vue2 模板

<template>
    <div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>
posted @ 2023-08-08 15:14  我亦无他_唯手熟尔  阅读(23)  评论(0)    收藏  举报