Vue基础环境搭建

安装脚手架：npm i @vue/cli -g 用于生成vue项目的基本骨架 或者 yarn global add @vue/cli

创建项目： vue create 项目名称 比如： vue create vue2-baisc

image.png

装好之后可以运行以下命令:

image.png

yarn是facebook旗下的包管理工具，作用和npm一样

yarn init npm init -y

yarn add 包名 默认安装到项目依赖 npm i 包名

yarn add 包名 --dev 安装到开发依赖 npm i 包名 -D

yarn remove 包名 移除包 npm uninstall 包名

yarn 或者 yarn install npm i

安装vs code插件

  • Vue VSCode Snippets
  • Vue 3 Snippets
  • Vetur
  • ESlint

    插值表达式{{}}

    作用： 渲染数据 ```vue data() { return { msg: “hello world!”, age: 18, }; },

{{ msg }}

{{ age > 18 ? “已成年” : “未成年” }}

{{msg + ‘😍’}}

{{msg.split(‘’).reverse().join(‘’)}}
{{age + 1}}

  1. <a name="K2rBG"></a>
  2. ## 指令
  3. 在vue中，以v-开头的都是指令。指令用来增强html模版的功能。
  4. <a name="iQeQD"></a>
  5. ### v-text (基本不用)
  6. ```vue
  7.   <div v-text="msg"></div>
  8.     <div v-text=" age > 18 ? '已成年' : '未成年'"></div>
  9.     <div v-text="msg + '😍'"></div>
  10.     <div v-text="msg.split('').reverse().join('')"></div>
  11.     <div v-text="age + 1"></div>

v-html

  1. data() {
  2.     return {
  3.       htmlStr: '<h1>Vue基础</h1>'
  4.     };
  6. <div v-html="htmlStr"></div>

注意：v-html不安全，需要确保你的字符串里面没有包含敏感信息。比如什么用户名密码之类的。

v-show

用来显示内容

  1.  data() {
  2.     return {
  3.       isVisible: true
  4.     };
  5.   },
  7. <div v-show="isVisible">hello world</div>

事件修饰符

image.png

  1. @click.prevent
  2. 可以直接阻止a标签的跳转
  3. @click.stop
  4. 可以阻止事件冒泡
  5. @click.once
  6. 事件只触发一次
  7. @click.capture
  8. 使用事件的捕获模式
  9. @click.self
  10. 只有event.target是当前操作的元素时才触发的
  11. @click.prevent
  12. 事件的默认行为立即执行，无需等待事件回调执行完毕

事件组件

新建立一个js
image.png
image.png

生命周期（生命周期钩子）

示例图：

生命周期.png
在特殊的时间点调出的函数
重点掌握 createdmountedbeforeDestroy这三个

  1. beforeCreate () {
  2.   console.log('beforeCreate', this.score, this.$el)
  3. },
  4.   created () {
  5.     // 一般在这里去发送请求
  6.     console.log('created', this.score, this.$el)
  7.   },
  8.     beforeMount () {
  9.       console.log('beforeMount', this.score, this.$el)
  10.     },
  11.       mounted () {
  12.         this.timer = setInterval(() => {
  13.           console.log('111')
  14.         }, 1000)
  15.         // 如果需要操作dom，可以在mounted钩子中执行
  16.         console.log('mounted', this.score, this.$el)
  17.       },
  19.         // 这一对数据更新会执行
  20.         beforeUpdate () {
  21.           console.log('beforeUpdate', this.score, this.$el)
  22.         },
  23.           updated () {
  24.             console.log('updated', this.score, this.$el)
  25.           },
  27.             // 组件被销毁会触发
  28.             beforeDestroy () {
  29.               // 开发可以在清除定时器和事件绑定
  30.               clearInterval(this.timer)
  31.               console.log('beforeDestroy', this.score, this.$el)
  32.             },
  33.               destroyed () {
  34.                 console.log('destroyed', this.score, this.$el)
  35.   }

如果涉及到父子组件，组件的创建及销毁流程如下图所示：
image.png

挂载mounted（）{}

Vue完成模板的解析并把初始的真实DOM元素放入页面后（）调用mounted

案例

image.png

ref属性

ref属性可以操作DOM
image.png
此时输出的是组件的vue实例对象
image.png
image.png

组件、组件通信

组件

1、组件是可以复用的vue实例，如果网页中的某一个部分需要在多个场景中使用，那么我们可以将其抽出为一个组件，使用方法如下：
image.png

组件通信

父传子

利用props向儿子传递信息：
1、将需要传递的信息作为动态属性传递给儿子
2、儿子需要自定义一个props对象用来接受父亲传递过来的值（挖坑）
3、需要注意命名的书写，父亲动态属性的命名必须与儿子props里面对象的命令一致，具体如下图所示：

  2. // 子组件ComSon
  4. <template>
  5.   <div class="son">
  6.     我爸爸的房子 {{fHouse}} 车子是：{{fCar}}
  8.     <button @click="handleClick">点击告诉爸爸我女朋友叫{{girlFriend}}</button>
  9.   </div>
  10. </template>
  12. <script>
  13. export default {
  14.   // 1.1 在自组件中通过props属性定义坑，用来放父亲传过来数据
  15.   // props: ['fHouse', 'fCar']
  16.   props: {
  17.     fHouse: {
  18.       required: true,
  19.       default: 100,
  20.       type: Number
  21.     },
  22.     fCar: {
  23.       required: true,
  24.       default: '自行车',
  25.       type: String
  26.     }
  27.   },
  28.   methods: {
  29.     handleClick() {
  30.       // 2.1 通过this.$emit()发射一个自定义的事件名称，并携带参数传递给爸爸
  31.       this.$emit('tell-father', this.girlFriend)
  32.     }
  33.   },
  34.   data() {
  35.     return {
  36.       girlFriend: '翠花'
  37.     }
  38.   },
  39. }
  40. </script>
  2. // 父组件
  4. <template>
  5.   <div class="father">
  6.     <!-- 2.2 通过v-on指令监听儿子发射过来的自定义事件 -->
  7.     <ComSon :f-house="house" :f-car="car" @tell-father="getVal" />
  8.   </div>
  9. </template>
  11. <script>
  12. import ComSon from './ComSon.vue'
  13. export default {
  14.   components: {
  15.     ComSon
  16.   },
  17.   data() {
  18.     return {
  19.       house: 200,
  20.       car: '劳斯莱斯',
  21.       songirl: '??'
  22.     }
  23.   },
  24.   methods: {
  25.     // 2.3 在事件的回调函数中，通过一个形参接受儿子传递过来的值
  26.     getVal(v) {
  27.       console.log('儿子在给我讲话', v)
  28.       this.songirl = v
  29.     }
  30.   },
  31. }
  32. </script>

事件总线

创建一个新的js文件，里面是一个一个空的vue实例，借助它也能实现组件通信

  1. import Vue from 'vue'
  3. export default new Vue()
  6. //发射事件 $emit(事件名称，数据)
  7. evtbus.$emit('tell-score', this.score)
  9. // 监听事件 $on(事件名称，回调函数)
  10. evtbus.$on('tell-score', (v) => {
  11.    this.broscore = v
  12. })

Vuex

安装： npm i vuex@3.6.2 -S
使用：

  1. 在src下新建store文件夹，然后再新建index.js ```javascript import Vue from ‘vue’ import Vuex from ‘vuex’

Vue.use(Vuex)

// 创建一个store仓库，放vuex里面的那些核心部分 const store = new Vuex.Store({ // state 暂存共享数据的地方 state: { username: ‘rose’ } })

export default store

  1. 2.再main.js中注入store
  2. ```javascript
  3. import Vue from 'vue'
  4. import App from './App.vue'
  5. import router from './router'
  6. import store from './store'
  8. Vue.config.productionTip = false
  10. new Vue({
  11.   router,
  12.   store,
  13.   render: h => h(App)
  14. }).$mount('#app')

state

访问：this.$store.state.变量名

mutations

定义

  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  4. Vue.use(Vuex)
  6. // 创建一个store仓库，放vuex里面的那些核心部分
  7. const store = new Vuex.Store({
  8.   // state 暂存共享数据的地方
  9.   state: {
  10.     username: '??'
  11.   },
  12.   // mutations里面存放的是修改state数据的函数，也只有mutations里面的函数可以修改
  13.   mutations: {
  14.     changeUsername (state) {
  15.       state.username = 'jack'
  16.     }
  17.   }
  18. })
  20. export default store

触发：

  1. this.$store.commit('changeUsername')

actions

actions里面可以触发mutations中的函数，还能处理异步

  1.  // actions里面放的是触发mutations的函数，他还能执行异步操作
  2.   actions: {
  3.     // 第一个参数是对象，默认的。里面有个commit属性。
  4.     triggerChangeUname ({ commit }, payload) {
  5.       console.log(payload)
  6.       setTimeout(() => {
  7.         commit('changeUsername', payload)
  8.       }, 1000)
  9.     }
  10.   },

触发：this.$store.dispatch(‘triggerChangeUname’, 参数)

getters

  1.  // getters 类似于计算属性，根据state中的值的变化计算得到一个新的属性
  2.   getters: {
  3.     wrappedUname (state) {
  4.       // 依赖state中的值的变化而变化
  5.       return '❤️' + state.username + '❤️'
  6.     }
  7.   }

访问：this.$getters.名字

map系列映射函数

  1. mapState
  2. mapGetters
  3. mapMutations

  4. mapActions

    1. computed: {
    2.  ...mapState([
    3.    'count'
    4.  ]),
    5.  ...mapGetters([
    6.    'evenOrOdd'
    7.  ])
    8. }
    10.  methods: {
    11.  ...mapMutations([
    12.    'changeCount'
    13.  ]),
    14.  ...mapActions([
    15.    'triggerChangeCount'
    16.  ])
    17. },

    模块化

  5. 拆分模块

  6. 注入模块 ```javascript import Vue from ‘vue’ import Vuex from ‘vuex’ import user from ‘./modules/user’ import num from ‘./modules/num’

Vue.use(Vuex)

// 创建一个store仓库，放vuex里面的那些核心部分 const store = new Vuex.Store({ // 注册模块 modules: { userModule: user, numMudule: num } })

export default store ```

注意：这里只有在访问state的时候需要带上模块名，其他的getters，actions，mutations访问方式不变。

案例

image.png
image.png
image.png

image.png
image.png
image.png

传参id

image.png
image.png
image.png
image.png

登录

image.png
image.png
image.png

路由拦截

image.png

登录传值

594df900545d35a6f7ddcc6aa8dd644.png
274fbb96c1d2deaedfd73d7b80c5a69.png
c09a057bb231a732ea5ab30bbf309eb.png

移动端vant-2上传图片

image.png

点赞

操作原生js实现点赞效果
image.png
image.png
image.png
image.png

前端介入token失效

image.png
image.png
image.png
image.png
image.png
引入
image.png