开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue核心知识总结（超级经典，实时更新） -> 正文阅读

[JavaScript知识库]Vue核心知识总结（超级经典，实时更新）

1、Vue基础入门

1.1、脚手架环境安装Vue

安装脚手架依赖

# 安装 @vue/cli
cnpm i -g @vue/cli

1.2、创建Vue项目

在本地创建项目文件夹，例如 d:\project，在此目录中运行 cmd，然后执行下面命令：

# 创建项目
vue create myapp

# 根据提示选择安装配置

# 项目创建成功后
cd myapp
npm run serve

项目启动成功后，在浏览器中访问 http://localhost:8080

1.3、精简项目代码

项目目录结构

- public 本地服务器的根目录
- src 源码
	- assets  静态资源文件，例如图片、视频等
	- components 管理公共组件的目录
	- router 管理路由的目录
	- store 管理状态的目录
	- views 管理视图组件的目录
	- App.vue 根组件
	- main.js 入口文件
- package.json npm的配置文件

精简：

对 App.vue 精简

<template>
  <router-view></router-view>
</template>
<style>
    html,body{
        margin: 0;
        padding: 0;
        height: 100%;
    }
</style>

剩下的目录根据项目需求进行删除。

2、Vue的核心概念

2.1、指令

2.1.1、文本指令

v-text
v-html

2.1.2、流程控制

v-if
v-else-if
v-else
v-for
- key 属性表示什么意思？
- 与 <template> 配合使用时，key 属性要声明在子元素上
- ```
<template v-for="i in 10">
  <div :key="i">{{i}}</div>
</template>
```

2.1.3、显示与隐藏

v-show
- 与 v-if 的区别：
  - v-show 使用 display 属性控制元素的显示与隐藏
  - v-if 值为 false 时，不会被渲染到页面上
  - 执行效率分析

2.1.4、属性绑定

v-bind
- v-bind 的值一定是一个在 data 声明的变量或 js 表达式

style绑定

:style="" 值为对象，对象的属性是 css 的样式元素（以小驼峰式命名样式属性名）

:style="" 写法：

<template>
	<!-- 写法一，值为字面对象 -->
	<div :style="{color:'red',fontSize:'18px'}">
    </div>

	<!-- 写法二，值为数组 -->
	<div :style="[s1,s2]">
    </div>

	<!-- 写法二，值为变量 -->
	<div :style="big">
    </div>
</template>
<script>
 export default {
	data(){
        return {
            s1:{color: 'red'},
            s2:{fontSize: '18px'},
            big: {
                fontSize: '20px'
            }
        }
    }
 }
</script>

class 绑定

:class="" 值为 css 中已定义的样式名称

:class="" 值的写法：

<template>
   <div>
     <!-- 写法一，值为字母字符串 -->
     <div :class="'red'"></div>

     <!-- 写法二，值为对象 -->
     <div :class="{red: true}"></div>

     <!-- 写法三：值为数组 -->
     <div :class="[s1,s2]"></div>

     <!-- 写法四，值为变量 -->
     <div :class="s1"></div>
   </div>
</template>

<script>
  export default {
    data(){
      return {
        s1: 'red',
        s2: 'big'
      }
    }
  }
</script>

<style scoped>
.red{
  color: red;
}
.big{
  font-size: 20px;
}
</style>

2.1.5、事件处理

v-on

简写 @

获取当前元素的事件对象

<template>
  <div>
    <button @click="handleClick($event)">按钮</button>
    <input type="text" @keypress="handleInput($event)">
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(e){
      //获取当前元素的事件对象
      console.log(e)
      //获取点击的元素DOM对象
      console.log(e.target)
    },
    handleInput(e){
      //获取当前输入框的值
      console.log(e.target.value)
      //获取当前输入的状态码
      console.log(e.keyCode)
    }
  }
}
</script>

事件修饰符

<template>  <div>    <!-- 阻止事件冒泡 -->    <button @click.stop="add">按钮</button>    <!-- 当自身元素被触发时才会执行事件函数，如果事件冒泡传递来的，不会触发 -->    <button @click.self="add">按钮</button>    <!-- 在事件冒泡中优先执行 -->    <button @click.capture="add">按钮</button>    <!-- 阻止浏览器默认行为 -->    <button @click.prevent="add">按钮</button>    <!-- 在本次渲染完成后，只会触发一次 -->    <button @click.once="add">按钮</button>    <!-- 忽略 event.preventDefault() 行为，不能和 prevent 修饰符同时使用 -->    <button @click.passive="add">按钮</button>  </div></template>

按键修饰符
- .enter
- .tab
- .delete (捕获“删除”和“退格”键)
- .esc
- .space
- .up
- .down
- .left
- .right
系统修饰键
- .ctrl
- .alt
- .shift
- .meta

2.1.6、表单绑定

v-model

修饰符
- .trim 去掉首尾空格
- .number 如果是数字开头的话，如果内容中间出现了非数字内容，只会保留第一部分的数字；如果是非数字开头，以字符串类型处理
- .lazy 当失去焦点时，才会执行双向绑定
如果要绑定 checkbox 多个元素时，v-model="array" 值要为数组类型

<template>  <div>    <!-- 文本输入框 -->    <input type="text" v-model="val">    <!-- 文本域 -->    <textarea v-model="vals"></textarea>    <!-- 单选按钮 -->    <input type="radio" v-model="sex" value="男">男    <input type="radio" v-model="sex" value="女">女    <!-- 复选框 -->    <input type="checkbox" v-model="hobby" value="篮球">篮球    <input type="checkbox" v-model="hobby" value="足球">足球    <input type="checkbox" v-model="hobby" value="排球">排球    <!-- 下拉框 -->    <select v-model="word">      <option value="A">A</option>      <option value="B">B</option>      <option value="C">C</option>    </select>  </div></template><script>export default {  data(){    return {      val: '',      vals: '',      sex: '男',      hobby: ['篮球'], //如果有值，该项为默认选中      word: ''    }  }}</script>

2.1.7、编译处理

v-pre
- 跳过当前元素及其子元素，不进行编译
v-once
- 只会渲染一次
v-cloak
- 会一直保留在元素上面，直到Vue编译完成后，自动消失

2.1.8、插槽

v-slot

简写 #
仅限于 <template> 组件上使用

示例：自定义组件 src/components/GoodsCard.vue

<template>  <div>      <hr>      <h2>商品卡片</h2>      <hr>      <div>          商品标题：<slot name="title"></slot>      </div>      <hr>      <div>          商品价格：<slot name="price"></slot>      </div>  </div></template>

使用 GoodsCard.vue 组件

<template>  <div>      <goods-card>        <template v-slot:price>          100        </template>        <template #title>          <span style="color:red">这条牛仔裤</span>        </template>      </goods-card>  </div></template><script>import GoodsCard from './components/GoodsCard.vue'export default {  components: {    GoodsCard  }}</script>

2.2、选项

2.2.1、数据选项

data
- 在组件内，必须是一个返回初始对象的函数
- 为了保证当前组件的多个实例直接不会共享data中的数据
props
- 接收父组件传值
- 定义的 prop 属性的一个对象，该对象中有四个属性：
  - type：设置当前属性的数据类型，可以使用数组的形式设置指定多种类型，例如： [String,Number]，共支持八种类型，即 String,Number,Boolean,Object,Function,Array,Date,Symbol
  - default：设置默认值，any 任意类型
  - required：设置当前属性是否必填，值为 true 时为必填项
  - validator：设置当前属性值的校验函数，函数返回值为 true 时通过校验。代码示例：
  - ```
  props: {    type: {        validator: function(val){            return ['success','danger','error'].includes(val)        }    }}
```
methods
- 用于定义函数

watch

用于监听响应式数据的变化

export default {	data(){		return {            i: 0,            obj: {                a: {                    b: {                        c: 0                    }                }            }        }	},    watch: {        i(){            //监听i的变化        },        obj: {            handler(){                //监听对象的变化            },            deep: true //深度监听，只能监听到对象属的变化        }    }}

computed
- 计算属性
- 有缓存，当所依赖的响应式数据发生变化时，才会重新计算

2.2.2、DOM选项

el
- 使用 css 选择器或 HTMLDomcument 对象的方法获取到页面中已经存在的 DOM 元素，将该元素作为Vue实例的挂载目标。
template
- 在自定义组件中用于创建 VNode 模板
- 声明的 VNode 模板中，最外层只能有一个根元素

2.2.3、生命周期

beforeCreate
- 不能获取到vue实例的属性与方法
- 不能获取DOM对象
created
- 能获取到vue实例的属性和方法
- 不能获取DOM对象
beforeMount
- 能获取到vue实例的属性和方法
- 不能获取DOM对象
mounted
- 能获取到vue实例的属性和方法
- 能获取DOM对象
beforeUpdate
- 当 data 中响应式数据发生变化时，会触发页面的渲染，页面渲染前将调用该方法
- 在此方法获取的响应式数据的值为修改后的值
updated
- 响应式数据更新，触发页面渲染，页面渲染后将调用此方法
- 在此处可以获取更新后的DOM元素对象
beforeDestroy
destroyed
activated
deactivated
errorCaptured

2.2.4、资源选项

filters
- 过滤器
directives
- 自定义指令
- 钩子函数
  - bind
  - inserted
  - update
  - componentUpdated
  - unbind
- 钩子函数的参数
  - el
  - binding
  - vnode
  - oldVnode
components