vue开发入门需掌握的必备核心知识点

作者: 十年码农的觉醒 | 来源:发表于2022-11-19 14:27 被阅读0次

vue开发入门需掌握的必备核心知识点
Vue 实战课程
Android NDK JNI 入门笔记-day04-NDK实现
34条我能告诉你的Vue之实操篇
实战篇：利用计算属性、指令等知识开发购物车（基础篇）
（26）打鸡儿教你Vue.js
2017 0313 准备进阶
史上最强鸿蒙来袭！华为大神花费5个月打造的这份714页学习笔记+
编写简单的 Vue 组件
Vue.js开发常见问题解析

1. vue介绍

Vue 是一套用于构建用户界面的渐进式框架。也是一个电信的MVVM框架。Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层。

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

一个vue页面主要包括3个部分：

Vue页面机构布局，大体分为三大部分：

（1）：模板：<template>界面展示代码</template>（里面必须包含一层div盒子）

（2）：逻辑业务功能：<script>业务实现代码</script> （处理后台与前台逻辑的交互功能）

（3）：美化布局：<style>界面布局代码</style（负责页面的美观调整）

常用编码格式

  <template>
    <!--界面展示代码，也就是HTMl，单应该注意的是html代码必须包含在一层盒子中-->
  </template>
<script>
export default {
  //业务实现代码
 };
</script>
//一个页面放置多个，常为一个共有一个私有， 使用scoped区分
<style lang="scss" scoped>
     <!--这里就是漂亮的css， 通过lang的参数声明，可以使用 less，scss 等， scoped说明是私有样式-->
</style>
<style lang="scss">
     <!--这里就是漂亮的css， 通过lang的参数声明，可以使用 less，scss 等-->
</style>

而一些大型的项目或者比较复杂的页面也可能通过拆分的方式，把html和script，css拆分到3文件中编写，

### 主页面home.vue
<template src="./home.vue.html" lang="html"></template>
<script src="./home.vue.js" lang="js"></script>
<style src="./home.vue.css" lang="css" scoped></style>

2. Vue的基本结构

Vue项目结构

image.png

.Vue文件基本结构

image.png

双向绑定的核心 data

data类型Object

  //一般情况data都是用函数来声明
  data(){
    return {}
  }
  //很少情况使用
  data:{}

为什么要使用函数来声明data，因为一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。如果data是对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突，data必须是一个函数。

如果我们希望在多个组件中共享data的情况下，可使用 data:{}方式来声明。这种方式很少使用

计算属性

计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
计算属性默认只有 getter属性

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

为什么要使用计算属性
其实模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。但是在模板中放入太多的逻辑会让模板过重且难以维护。虽然函数和监听属性都可以实现数据的运算，但是在模板刷新时都是要重新计算，效率不够高，因此计算属性就诞生了。因为计算属性不光是有计算能力，更正要的是可以缓存，只有当data数据发生变化时才会重新计算。

因此建议能使用计算属性时，尽量使用计算属性

计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

监听属性

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

   data: {
      name: 1,
   },

    //简写，也是最常用的方式， 
    watch:{
        name(newVal,oldVal){
            //监听到name变化时的处理逻辑
        }
    }

    watch:{
        name:{
            handler(newVal,oldVal){
                //监听到name变化时的处理逻辑
            }
        },
        immediate: tree,  //默认为false, 该回调将会在侦听开始之后被立即调用
        deep:tree // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
    }

methods

方法中的 this 自动绑定为 Vue 实例
注意：不能使用es6的箭头函数来声明

//可在生命周期的钩子函数中this调用methods中的方法
mounted(){
    this.fn1()  
},

methods:{
    fn1:function(){
       this.fn2()   //可使用this调用methods中的方法
    },
    fn2(){
        this.fn1()   //可使用this调用methods中的方法
    },
    fn3:()=>{}  //箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例
}

3. 页面渲染

指令

页面的渲染常通过指令的方式来实现：

  <h1 v-XXX="表达式">Hello!</h1>

vue提供指令有：

v-text

文本指令
在页面中常使用{{name}}，来渲染数据

v-html

不常用，更新html代码的，内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译

v-show

最常用指令，根据表达式之真假值来切换元素的css属性 display

v-if

最常用指令，根据表达式之真假值，决定元素创建和销毁

v-else

最常用指令，前一兄弟元素必须有 v-if 或 v-else-if，取决于前一个元素的状态

v-else-if

最常用指令，根据表达式之真假值，决定元素创建和销毁，前一兄弟元素必须有 v-if 或 v-else-if。

v-for

最常用指令，常用于数组数据的渲染, 但是在使用时必须搭配key属性，key属性一般使用id等唯一标识，如果没有数据的唯一标识，可使用index索引（不建议）

//遍历数组
//item为值， index索引
<div v-for="(item,index) of array[]"  :key='item.id|index'>
  {{ item.text }}
</div>
//遍历对象
<ul>
  //value 为值， key 键值,  index索引
  <li v-for="(value,key,index)in object"   :key='key'>
    {{ value }}
  </li>
</ul>
//空循环
<ul>
  //value 为值， key 键值,  index索引
  <li v-for="(value,index) of 10"   :key='value'>
    {{ value }}  //遍历10次  value为：1-10
  </li>
</ul>

v-on

缩写 @

  <div v-on:click = "fn1"><div>
  <div@click = "fn1"><div>

  methods:{
    fn1:function(){
       this.fn2()   //可使用this调用methods中的方法
    },
}

v-bind

常用于属性绑定，缩写 ":"
注意：在多属时可用v-bind绑定

<!-- 绑定一个 attribute -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
<!-- 动态 attribute 名 (2.6.0+) -->
<button v-bind:[key]="value"></button>
<!-- 绑定一个全是 attribute 的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

v-model

随表单控件类型不同而不同，表单 <input>、<textarea> 及 <select>等元素上创建双向数据绑定。

v-slot 先了解，封装组件时在细讲

分为插槽，具名插槽，作用域插槽

//组件
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>
//使用
<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

作用域插槽

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>
<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

v-pre

不常用

v-cloak

性能优化的指令，可以解决当网络加载很慢时，或者频繁渲染时候，页面就会显示出源代码的情况

v-once

不常用

v-if 和 v-show的区别

1.v-if有更高的切换开销，v-show有更高的初始渲染开销。
2.v-show比v-if性能更高，因为v-show只能动态的改变样式，不需要增删DOM元素。
所以当程序不是很大时候，v-if和v-show区别都不大，如果项目很大，推荐多用v-show，较少浏览器后期操作的性能。
3.需要多种条件场景，比如id=1，=2，=3.....时候，因为只有v-if，可以和v-else等连用，这种比较适合用v-if
4.v-if切换时候回实时的销毁和重建内部的事件、钩子函数等，v-show只会初始化渲染时候执行，再切换时候不会执行生命后期的过程。

v-if 与 v-for 一起使用

vue2 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
vue3 当 v-if 与 v-for 一起使用时，v-if 具有比 v-for 更高的优先级。

数据更新

由于vue的监听原理是通过Object.defineProperty来实现的所以，无法监听数组，所以在新增修改数组是无法实现数据的双向绑定，因此也就无法实时更新dom，vue重新封装了实现了数组的操作方法可实现数据的双向绑定。因此修改类型为数组的data需要使用数组操作方法push()，pop()，shift()，unshift()，splice()，sort()，reverse()。

vue还实现了两个方法也可操作数组和对象
set 和 delete
set主要是对数组和对象的新增和修改

vm.userInfo = {
    name:'pengyidong',
    age: 22,
    address: '广州'
}
Vue.set(vm.userInfo,'job','前端')  //新增

delete主要用于对象的删除，可保持双向绑定

vm.userInfo = {
    name:'pengyidong',
    age: 22,
    address: '广州'
}
Vue.delete(vm.userInfo ,'address')

4. vue生命周期

生命周期分4个阶段，8个构造函数

加载前
包含两个钩子函数beforeCreate，created
beforeCreate:不常用,在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。
created:在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，不能操作dom

注意：如需更新dom是需要使用vm.$nextTick

      // DOM 还没有更新
      this.$nextTick(function () {
        // DOM 现在更新了
        // `this` 绑定到当前实例
        this.f1()
      })

加载阶段
包含两个钩子函数beforeMount，mounted

beforeMount

不常用，在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted阶段

常用，实例被挂载后调用，但是不能保证所有的子组件页都挂在完成。所有在需要更新dom时，往往也需要在vm.$nextTick

mounted: function () {
  this.$nextTick(function () {
    // 仅在整个视图都被渲染之后才会运行的代码
  })
}

往往在这个阶段发起http请求

更新阶段
包含两个钩子函数beforeUpdate，updated

beforeUpdate

不常用
在数据发生改变后，DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。

updated

不常用
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性取而代之。

4.销毁阶段
包含两个钩子函数beforeDestroy，destroyed
这个阶段不常用，但是如果需要销毁一些计时器，等实力，须在这个阶段完成

注意：在这个生命周期内其实都不建议操作dom，但是如果需要操作，尽量都在vm.$nextTick方法中完成

5. 组件

组件是vue的一个核心，封装一个复用性高的组件其实挺麻烦的，但是使用一个组件还是非常容易的，今天我们只关注使用，不细讲封装组件

注册

需导入组件，一般使用import 导入

import ComponentA from ""
import {ComponentA,ComponentB} from ""

局部注册

export default {
   components: {
      'component-a': ComponentA,
      'component-b': ComponentB
  }
};

全局注册

一般在main.js文件完成

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

组件名

组件必须有名字，名字规则有两种

1.使用 kebab-case

当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。

Vue.component('my-component-name', { /* ... */ })

使用

 <my-component-name />
<!--或-->
 <my-component-name></my-component-name>

使用 PascalCase

Vue.component('MyComponentName', { /* ... */ })

使用

 <MyComponentName />
<!--或-->
 <MyComponentName></MyComponentName>
<!--或-->
 <my-component-name />
<!--或-->
 <my-component-name></my-component-name>

6. 传值

Vue中常用的8种传值方式

1. props和“$emit”

最常用的一种，父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过$emit触发事件来做到的.

父组件

<template>
    <Son
      :str="arr"   //传递数据
     @func="hello">
    </Son>
 </template >
<script>
  import Son from './Son'
  export default {
    name: "Father",
    data(){
      return{
        arr:5
      }
    },
    components:{Son}
    methods:{
      hello(value){
        console.log("value")  // 我是子组件发送的消息！
      }
    },
  }
</script>

子组件

<template>
   <div @click="handle">我是Son组件</div>
 </template >
<script>
  import Son from './Son'
  export default {
     name: "Son",
   //接收父组件传递的数据
    props:{//props列表
       str:String,//定义参数类型
    }，
    methods:{
      handle(value){
        this.$emit("func", "我是子组件发送的消息！")   //向父组件传递数据
      }
    },
  }
</script>

2. " $attrs"和“$ listeners”

3. 中央事件总线

4. provide和inject

provide和inject是用来实现父组件向深层的子组件传值和接收的语法，具体如下

// 祖先组件
provide(){
    return {
      // keyName: { name: this.name }, // value 是对象才能实现响应式，也就是引用类型
      keyName: this.changeValue // 通过函数的方式也可以[注意，这里是把函数作为value，而不是this.changeValue()]
     // keyName: 'test' value 如果是基本类型，就无法实现响应式
    }
},
data(){
      return {
        msg:'初始mesg'
    }
},
methods: {
    changeValue(){
        this.msg= '改变后的msg'
    }
}  
  
// 后代组件
inject:['keyName']
create(){
    console.log(this.keyName) // 改变后的msg
}

5. “ $parent”和“$ children”

6. vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

7. localStorage/session

8. v-model

vue开发入门需掌握的必备核心知识点
1. vue介绍 Vue 是一套用于构建用户界面的渐进式框架。也是一个电信的MVVM框架。Vue 被设计为可以自底...
Vue 实战课程
Vue 实战课程需具备知识点：要实现的功能项目开发流程：
Android NDK JNI 入门笔记-day04-NDK实现
* Android NDK JNI 入门笔记目录 * 开头前面的学习，我们已经掌握了 NDK 开发的必备知识。 ...
34条我能告诉你的Vue之实操篇
7种组件通信方式随你选组件通信是 Vue 的核心知识，掌握这几个知识点，面试开发一点问题都没有。 props/@o...
实战篇：利用计算属性、指令等知识开发购物车（基础篇）
前5章内容基本涵盖了Vue.js最核心和最常用的知识点，掌握这些内容已经可以上手开发一些小功能了。本节则以...
（26）打鸡儿教你Vue.js
weex框架的使用 1、weex开发入门2、weex开发环境搭建3、掌握部分weex组件模块4、了解一些vue基本...
2017 0313 准备进阶
入门级iOS开发者需要掌握的知识清单一个资深的iOS开发者需要掌握哪些技能？ iOS工程师Mac上的必备软件 M...
史上最强鸿蒙来袭！华为大神花费5个月打造的这份714页学习笔记+
一，鸿蒙核心内容掌握程度看看下面这些鸿蒙知识点你掌握了多少：基础环境和开发工具开发工具安装运行开发工具完成...
编写简单的 Vue 组件
既然 Vue 是基于组件去构造视图的，那么最重要的事情当然是要掌握组件的知识点了。 Vue 为了极大简化组件的开发...
Vue.js开发常见问题解析
此前的Vue.js系列文章： Vue.js常用开发知识简要入门（一） Vue.js常用开发知识简要入门（二） Vu...