项目的搭建

我们需要安装vue脚手架

cli.vuejs.org/zh/ 查看自己安装的node版本 node -v 查看自己的npm版本
npm -v

如何启动项目就自动打开浏览器

serve后面追加了一个--open

build 是打包发布

  "name": "vuedemo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.0",
    "@vue/cli-plugin-router": "^4.5.0",
    "@vue/cli-plugin-vuex": "^4.5.0",
    "@vue/cli-service": "^4.5.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  }
}

传值方式

父组件往子组件进行传参子往父

父组件

  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    //进行赋值并事件传递参数
    <HelloWorld :msg="msg" @changval="changval"/>
  </div>
</template>

<script>
// @ is an alias to /src
//引入组件
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  
  name: 'Home',
  components: {
    HelloWorld,
  },
  data() {
    return {
      msg:"Welcome to Your Vue.js App"
    }
  },
  methods: {
  //回调函数
    changval(val){
      this.msg=val
    }
  },
}

子组件

  <div class="hello">
  //页面进行输出结果
    <h1>{{ msg }}</h1>
    <button @click="changclick"  >修改值</button>
        
  </div>
</template>                                                 
<script>
export default {
  name: 'HelloWorld',
  //接收传递的参数 判断类型
  props: {
    msg:{
      type:String,
      default:""    
    }
  },

  methods: {
    changclick(){ 
    //子往父传参
      this.$emit('changval','哈哈哈哈哈')
    }
  }
}
</script>

<style scoped lang="less">

</style>

子往父亲原理

子组件在props中创建一个属性如上的msg，用来接收父组件中传递过来的值, 父组件中注册子组件，如components:{HelloWorld}, 父组件中使用子组件标签，并在子组件标签中添加子组件props中创建的属性，如

<HelloWorld :msg=''>

父往子亲原理

this. $emit( 函数名,传递的参数 )，触发当前实例上的事件,父组件进行自定义事件接收参数获取值，通过回调函数进行获取里面的value进可以(函数名必须和$ emit的名字一致)

兄弟组件进行传值

创建一个ulits文件夹里面在创建一个bus文件进行实例化vuex 并把该文件抛出

5RFIV9DPTYRZ38ID1S`4}%9.png

兄弟ChildOne组件

先要引用ulits文件
绑定事件用$emit(函数名，参数)[进行赋值]

$)D7HQBT_DECCRL%{4A@CQ}5.png$

先要引入ulits文件在mountd里面用on接收回调函数,第一个参数式函数名,第二个是回调函数获取ulits里面的值销毁前的时候用off进行删除改时间，以防备浪费内存

vuex

持久化安装命令 npm install vuex-persistedstate --save

plugins: [createPer({
        //可以控制本地存储还是会话存储
        storage: window.sessionStorage,
        //可以进行重新命名
        key: "myname"
    })],

`mapState` 辅助函数

...mapState({
          //回调函数进行返回store里面的值
        state:(state)=>{   
         return state.message   
        }
      })

`mapActions` 辅助函数

 ...mapActions([      'changeMsgAction',     ])

和以上代码效果一致

this.$store.dispatch("setval",5555))

swiper

swiper轮播图的按照命令

已经下载好的swiper5的使用方法，swiper7的还没来的及更新,了解后重新发布请，持续关注

详细可看官网

https://swiper.com.cn/usage/index.html

<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 class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
</div>
</template>

<script>

import "swiper/css/swiper.css"
import Swiper from "swiper"

export default {
components: {},
props: {},
data() {
return {

}
},
computed: {},
methods: {

},
created() {
   
},

mounted() {
 new Swiper ('.swiper-container', {
    loop: true, // 循环模式选项
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    autoplay: {
    delay: 1000,
    stopOnLastSlide: false,
    disableOnInteraction: true,
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

  })        
},
}
</script>
<style scoped lang="less">
    .swiper-container {
    width: 600px;
    height: 300px;
}  
</style>

vue起步