王不二的書架

# 自定义指令 # 自定义指令的分类 vue 中的自定义指令分为两类：分别是 : 私有自定义指令 全局自定义指令 # 私有自定义指令 在每个 vue 组件中，可以在 directives 节点下声明私有自定义指令 1234567891011directives: { //定义名为color的指令, 指向一个配置对象 color: { //为绑定到的HTML元素设置红色的文字 //当指令第一次被绑定到元素上的时候, 会立即触发bind函数 bind(el) { //形参中的el是绑定了此指令的原生的DOM对象...

# 插槽 插槽 (Slot) 是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的，希望用户指定的部分定义为插槽 vue 官方规定：每个 slot 插槽，都要有个 name 名称 如果省略了 slot 的 name 属性，则有一个默认名称，为 default 如果要把内容填充到指定名称的插槽中，需要使用 v-slot: 这个指令 v-slot: 后面要跟上插槽的名字 v-slot: 指令不能直接用在元素身上，必须用在 template 标签上 template 是一个虚拟的标签，只起到包裹性的作用，但是不会被渲染为任何实质性的 html 元素 v-slot:...

# 动态组件 动态组件指的是动态切换组件的显示与隐藏 # 如何实现动态组件渲染 vue 提供了一个内置的组件，专门用来实现动态组件的渲染. 12345678data() { return {comName: 'Left'}}<component :is="comName"></component><button @click="comName=...

# 数组中的方法 # some 循环 1234567const arrconst arr = ['小红', '倪大红', '苏大强', '宝子']arr.forEach((item, index) => { if (item === '苏大强') { console.log(index) }}) 以上使用 forEach...

# ref 引用 ref 可以在不依赖 jQuery 的情况下，获取 DOM 元素或组件的引用 每个 vue 的组件实例上，都包含一个 $refs 对象，里面储存着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 对象指向一个空对象 # 引用 DOM 元素 如果想要使用 ref 引用页面上的 DOM 元素，则可以按照如下的方式进行操作 123456789<h3 ref='myh3'>MyRef组件</h3><button...

# 生命周期与数据共享 # 生命周期 & 生命周期函数 生命周期 (Life Cycle) 是指一个组件从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段 生命周期函数：是由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行 组件创建阶段 New Vue() beforeCreate created beforeMount mounted 组件运行阶段 beforeUpdate updated 组件销毁阶段 beforeDestroy destroyed beforeCreated () :...

# webpack 概念 : webpack 是前端项目工程化的具体解决方案 主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆，处理浏览器端 JavaScript 的兼容性，性能优化等强大的功能 # webpack 的基本使用 在项目根目录中，创建名为微博 pack.config.js 的 webpack 配置文件，并初始化如下的基本配置 123module.exports = { mode: 'development' //mode 用来指定构建模式, 可选值有development...

# vue-cli 的基本使用 vue-cli 是 Vue.js 开发的标准工具。它简化了基于 webpack 创建工程化的 Vue 项目的过程 # 安装和使用 vue-cli 是 npm 上的一个全局包，使用 npm install @vue/cli -g 基于 vue-cli 快速生成工程化的 Vue 项目 : vue create 项目的名称 # vue 项目中 src 目录的构成 assets 文件夹：存放项目中用到的静态资源文件，例如: CSS 样式表，图片资源 components 文件夹：程序员封装的，可复用的组件，都要放到 components 目录下 main.js...

# axios axios 是一个专注于网络请求的库 # axios 的基本语法如下 : 1234567axios({ method: '请求的类型', url: '请求的URL地址'}).them((result) => { // .then 用来指定请求成功之后的回调函数 // 形参中的result是请求成功之后的结果}) 12345678910111213<script> const btn =...

# this 指向问题 this 总是 (在非严格模式下) 指向一个对象，而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的，而非函数声明时的环境 除了不常用的 with 和 eval 的情况，具体到实际应用中，this 指向大概可以分为以下几种 作为对象的方法调用 作为普通函数调用 构造器调用 call 或 apply 调用 箭头函数中，this 指向函数上层作用域的 this 构造器和普通函数的区别在于被调用的方式 A.call (B) => 可以理解为在 B 的作用域内调用了 A 方法 # this...