vue知识点总结

2023-04-02 本文已影响0人木火应

Vue基础

Vue实例
Vue 实例是 Vue.js 中最基本的构建块之一。每个 Vue 应用程序都是由一个 Vue 根实例创建的，该实例通过将选项对象传递给 Vue 构造函数而创建。
Vue 实例的属性和方法包括：
- data：用于存储数据的对象，可以在模板中进行访问。
- methods：用于定义在 Vue 实例中使用的方法。
- computed：用于定义计算属性，其值会根据依赖项的变化而变化。
- watch：用于监听特定数据的变化，一旦变化就会触发相应的回调函数。
- directives：用于定义自定义指令。
- filters：用于定义过滤器，可以在模板中使用。
  除了这些属性和方法之外，Vue 实例还有一些生命周期钩子
  函数，用于在实例的生命周期内执行特定的操作，例如在实例创建时执行某些操作，或在实例销毁时执行清理操作。
模板语法
Vue.js 的模板语法是基于 HTML 的扩展，通过 Vue 的指令和插值语法，使得模板能够更加动态和交互。下面是一些常用的 Vue 模板语法示例：
- 插值语法
  插值语法使用双大括号 {{}} 来绑定数据，它会将 Vue 实例中的数据渲染到模板中。<div>{{ message }}</div>
- 指令
  指令是一种特殊的属性，它们带有 v- 前缀，指示 Vue.js 在模板中添加特殊行为。例如，v-if 指令根据表达式的值来条件性地渲染元素。
  <div v-if="showMessage">{{ message }}</div>
- 绑定属性
  Vue.js 通过 v-bind 指令来绑定元素的属性，这使得我们可以使用表达式来动态绑定属性值。
  <img v-bind:src="imageUrl">
- 循环
  使用 v-for 指令可以循环渲染列表中的元素。
  <ul> <li v-for="item in items">{{ item }}</li> </ul>
- 事件绑定
  使用 v-on 指令可以绑定事件处理函数，当事件触发时会执行相应的函数。
  <button v-on:click="handleClick">Click me</button>
  以上是一些常用的 Vue 模板语法示例，它们可以通过 Vue.js 的数据响应系统来实现数据与模板的双向绑定

1.3 计算属性
Vue.js 的计算属性是基于 Vue 实例的数据计算得出的属性，它们具有缓存特性，只有当它们的依赖项发生变化时才会重新计算。计算属性常见的使用场景是对数据进行复杂的计算，并将计算结果作为属性进行渲染。下面是一些常见的计算属性的使用示例：
1.3.1 简单计算属性

<template>
  <div>
    <p>原价: {{ price }}</p>
    <p>折扣价: {{ discountedPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 100,
      discount: 0.2
    }
  },
  computed: {
    discountedPrice() {
      return this.price * (1 - this.discount)
    }
  }
}
</script>

1.3.2 计算属性监听其他属性

<template>
  <div>
    <input v-model="firstName">
    <input v-model="lastName">
    <p>{{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: '',
      lastName: ''
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  }
}
</script>

1.3.3 计算属性使用 get 和 set

<template>
  <div>
    <p>商品数量: {{ quantity }}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  computed: {
    quantity: {
      get() {
        return this.count
      },
      set(value) {
        this.count = value
      }
    }
  },
  methods: {
    increment() {
      this.quantity += 1
    },
    decrement() {
      this.quantity -= 1
    }
  }
}
</script>

1.4 监听器
Vue.js 的监听器是一种用来监听 Vue 实例上指定属性变化的方法，当指定属性发生变化时，Vue.js 会自动调用监听器中指定的回调函数。监听器常用于在数据变化时执行自定义的操作，比如发送请求、更新其他数据等。下面是一些常见的使用场景和示例：
1.4.1 监听简单数据变化

<template>
  <div>
    <input v-model="message">
    <p>{{ reversedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!',
      reversedMessage: ''
    }
  },
  watch: {
    message(newValue, oldValue) {
      this.reversedMessage = newValue.split('').reverse().join('')
    }
  }
}
</script>

在以上示例中，监听器会监听 message 属性的变化，当 message 发生变化时，监听器中的回调函数会将 reversedMessage 属性更新为 message 的反转字符串。
1.4.2 监听对象属性变化

<template>
  <div>
    <p>用户名: {{ user.name }}</p>
    <p>年龄: {{ user.age }}</p>
    <button @click="incrementAge">加1岁</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: '张三',
        age: 18
      }
    }
  },
  watch: {
    'user.age'(newValue, oldValue) {
      console.log(`年龄从 ${oldValue} 变为 ${newValue}`)
    }
  },
  methods: {
    incrementAge() {
      this.user.age += 1
    }
  }
}
</script>

在以上示例中，监听器会监听 user 对象的 age 属性变化，当 age 属性发生变化时，监听器中的回调函数会打印出变化的信息。
1.4.3 深度监听数组和对象

<template>
  <div>
    <p v-for="item in items">{{ item.name }} - {{ item.price }}</p>
    <button @click="addItem">添加商品</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: '商品A', price: 100 },
        { name: '商品B', price: 200 }
      ]
    }
  },
  watch: {
    items: {
      handler(newValue, oldValue) {
        console.log('items 数组发生变化')
      },
      deep: true
    }
  },
  methods: {
    addItem() {
      this.items.push({ name: '新商品', price: 300 })
    }
  }
}
</script>

在以上示例中，监听器会深度监听 items 数组的变化，当数组中的对象属性发生变化时，监听器中的回调函数会打印出变化的信息。
1.5 组件
Vue.js 的组件是可复用的 Vue 实例，每个组件都可以拥有自己的数据、方法和生命周期钩子等。在 Vue.js 中，我们可以通过 Vue.component() 方法来定义一个全局组件，也可以通过组件选项来定义一个局部组件。下面是一些常见的组件定义示例：
1.5.1 全局组件

<template>
  <div>
    <hello-world></hello-world>
  </div>
</template>

<script>
Vue.component('hello-world', {
  template: '<p>Hello, World!</p>'
})
</script>

在以上示例中，我们通过 Vue.component() 方法定义了一个名为 hello-world 的全局组件，然后在模板中使用该组件。
1.5.2 局部组件

<template>
  <div>
    <custom-button></custom-button>
  </div>
</template>

<script>
import CustomButton from './CustomButton.vue'

export default {
  components: {
    CustomButton
  }
}
</script>

在以上示例中，我们通过组件选项 components 来定义了一个名为 CustomButton 的局部组件，并在模板中使用该组件。注意，这里的 CustomButton 组件是从一个单独的 .vue 文件中导入的。
1.5.3 动态组件

<template>
  <div>
    <component :is="currentComponent"></component>
    <button @click="changeComponent">切换组件</button>
  </div>
</template>

<script>
import FirstComponent from './FirstComponent.vue'
import SecondComponent from './SecondComponent.vue'

export default {
  data() {
    return {
      currentComponent: 'FirstComponent'
    }
  },
  methods: {
    changeComponent() {
      this.currentComponent = this.currentComponent === 'FirstComponent' ? 'SecondComponent' : 'FirstComponent'
    }
  },
  components: {
    FirstComponent,
    SecondComponent
  }
}
</script>

在以上示例中，我们通过 :is 属性来动态渲染组件，同时提供一个按钮来切换组件。注意，这里的 currentComponent 是一个 data 属性，我们可以在方法中改变该属性来动态渲染不同的组件。
1.6 生命周期
Vue.js 的生命周期可以分为八个阶段，分别是 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy 和 destroyed。在每个阶段，Vue.js 会自动调用相应的生命周期钩子函数，我们可以在这些钩子函数中执行一些初始化操作或清理操作。下面是一些常见的生命周期示例：
1.6.1 beforeCreate 和 created 钩子

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, World!'
    }
  },
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  }
}
</script>

1.6.2 beforeMount 和 mounted 钩子

<template>
  <div>
    <p ref="message">{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, World!'
    }
  },
  beforeMount() {
    console.log('beforeMount')
  },
  mounted() {
    console.log('mounted')
    console.log(this.$refs.message.innerText)
  }
}
</script>

在以上示例中，我们定义了一个名为 message 的 data 属性，并在 beforeMount 和 mounted 钩子函数中分别打印了日志。beforeMount 钩子函数在模板编译之后，挂载之前被调用，mounted 钩子函数在实例挂载完成之后被调用，这两个钩子函数常用于操作 DOM 元素或执行一些异步操作。
1.6.3 beforeUpdate 和 updated 钩子

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">改变消息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, World!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Hello, Vue!'
    }
  },
  beforeUpdate() {
    console.log('beforeUpdate')
  },
  updated() {
    console.log('updated')
  }
}
</script>

在以上示例中，我们定义了一个名为 message 的 data 属性，并在 beforeUpdate 和 updated 钩子函数中分别打印了日志。beforeUpdate 钩子函数在数据更新之前被调用，updated 钩子函数在数据更新之后被调用，这两个钩子函数常用于在数据更新之前或之后执行一些操作。
1.6.4 beforeDestroy 和 destroyed 钩子

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="destroy">销毁实例</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, World!'
    }
  },
  methods: {
    destroy() {
      this.$destroy()
    }
  },
  beforeDestroy() {
    console.log('beforeDestroy')
  },
  destroyed() {
    console.log('destroyed')
  }
}
</script>

1.7 自定义指令
在 Vue.js 中，我们可以通过自定义指令来扩展其功能，从而实现一些非常灵活的操作。下面是一个简单的自定义指令示例：

<template>
  <div>
    <p v-highlight="'yellow'">这是一段需要高亮的文字</p>
  </div>
</template>

<script>
export default {
  directives: {
    highlight: {
      bind(el, binding) {
        el.style.backgroundColor = binding.value
      }
    }
  }
}
</script>

在以上示例中，我们定义了一个自定义指令 highlight，并在模板中使用了它。指令的作用是将绑定的元素的背景颜色设置为指定的颜色。在 directives 属性中定义了 highlight 指令的实现，它有一个 bind 钩子函数，在指令绑定到元素上时被调用。在 bind 钩子函数中，我们通过 el 参数访问到绑定的元素，通过 binding 参数访问到指令的绑定值，然后将背景颜色设置为绑定值即可。

渲染函数
插件

Vue组件

组件通信
组件生命周期
父子组件通信
非父子组件通信
动态组件
组件注册
组件props

Vue路由

安装Vue Router
路由配置
路由导航
命名路由
嵌套路由
路由参数
路由组件传参

Vue状态管理

安装Vuex
状态管理基础
state
getters
mutations
actions
modules

Vue进阶

插槽
过渡和动画
自定义过滤器
mixin
v-model原理
服务端渲染
单元测试

vue知识点总结

猜你喜欢

热点阅读