Vue.js从入门到精通(全),爆肝十一万字,“建议收藏”,国庆福利!!!

简介: Vue.js从入门到精通(全),爆肝十一万字,“建议收藏”,国庆福利!!!

内容很饱满,过程可能会枯燥,愿你经过风雨,过后能成为不一样的烟火🎇,为了奖励看到最后的小伙伴,博主为你们准备了礼物哦


目录


开始使用Vue


el


$mount


data


插值表达式


vue的响应式-1


vm.$el


vm.$nextTick & Vue.nextTick


vue的响应式-2


扩展_剖析Vue响应式原理


Vue相关指令


v-pre


v-cloak


v-once


v-text


v-html


条件渲染


v-if


v-else


v-else-if


v-show


v-if VS v-show


v-bind 指令


v-on指令


为什么在 HTML 中监听事件?


v-on指令的修饰符


事件修饰符


.stop


.prevent


.capture


.self


.once


.passive


注意


按键修饰符


按键码


系统修饰键


exact 修饰符


鼠标按钮修饰符


列表渲染


在v-for中使用数组


在v-for中使用对象


在v-for中使用数字


在v-for中使用字符串


循环一段包含多个元素的内容


关于key


key的使用方法


v-for 和 v-if 一同使用


练习_仿淘宝商品筛选


练习_todoList


v-model指令


input


type=text 文本框


type=checkbox 复选框


type=radio 单选框


textarea


select


单选


多选


修饰符


.lazy


.number


.trim


练习_简易计算器


练习_调查问卷


计算属性


基础用法


计算属性 vs 方法


深入计算属性


getter 读取


setter 设置


练习_姓名筛选


练习_全选商品


侦听器


值类型


函数类型


字符串类型


对象类型


数组类型


键类型


正常对象key值


字符串类型key值


vm.$watch


侦听器 vs 计算属性


练习_仿百度搜索联想


vue-resource


引入vue-resource


请求方法


POST请求


GET请求


PUT请求


PATCH请求


DELETE请求


HEAD请求


JSONP请求


options 参数说明


响应对象


属性


方法


最后的话


Axios


引入


API


config 配置对象


方法别名


配置默认值


全局配置


实例配置


请求配置


配置的优先顺序


并发


拦截器


请求拦截器


响应拦截器


移除拦截器


为axios实例添加拦截器


取消请求


错误处理


axios 预检


template 选项


Vue生命周期


生命周期图示


生命周期钩子


beforeCreate


created


beforeMount


mounted


beforeUpdate


updated


beforeDestroy


destroyed


练习_bilibili首页


组件基础


组件是什么?


组件注册


全局组件


局部组件


组件名


组件复用


自闭合组件


组件的data选项


单个根元素


组件_Prop


注册自定义特性


Prop的大小写


传递静态或动态 Prop


传递一个对象的所有属性


组件_Prop验证


组件_单向数据流


组件_非Prop特性


替换/合并已有的特性


禁用特性继承


组件_监听组件事件


使用事件抛出一个值


事件名


将原生事件绑定到组件


在组件上使用 v-model


.sync 修饰符


v-model VS .sync


组件_插槽


插槽内容


编译作用域


后备内容


具名插槽


作用域插槽


独占默认插槽的缩写语法


解构插槽Prop


动态插槽名


具名插槽的缩写


废弃了的语法


带有slot特性的具名插槽


带有slot-scope特性的作用域插槽


组件_动态组件


基本使用


keep-alive


activated & deactivated


组件_处理边界情况


访问元素 & 组件


访问根实例


访问父级组件实例


依赖注入


访问子组件实例或子元素


程序化的事件侦听器


循环引用


递归组件


组件之间的循环引用


模板定义的替代品


内联模板


X-Template


控制更新


强制更新


通过v-once创建低开销的静态组件


组件_通信


prop


$emit


v-model


.sync


$attrs


$listeners


$root


$parent


$children


ref


provide & inject


eventBus(事件总线)


Vuex


混入


基础


选项合并


全局混入


自定义指令


简介


钩子函数


bind


inserted


update


componentUpdated


unbind


钩子函数参数


练习


模拟 v-show


模拟 v-model


写一个 v-slice(截取文本框)


动态指令参数


函数简写


对象字面量


过滤器


定义过滤器


参数


过滤器串联


练习


首字母大写


数字中间加上逗号


数字添加文字“万”


安装脚手架


安装@vue/cli


快速原型开发


安装vscode插件


练习_树形组件


利用脚手架搭建项目


渲染函数


基础


节点、树、以及虚拟DOM


虚拟DOM


createElement参数


深入数据对象


使用JavaScript代替模板功能


v-if 和 v-for


v-model


事件&按键修饰符


插槽


JSX


插值


指令


v-text


v-html


v-show


v-if


v-for


v-on


v-bind


v-model


v-slot


v-pre


v-cloak


v-once


Ref


自定义指令


过滤器


插槽


函数式组件


slots() VS children


基于模板的函数式组件


过渡_单元素过渡


单元素/组件的过渡


过渡的类名


类名前缀


CSS 动画


自定义过渡的类名


同时使用过渡和动画


显性的过渡时间


初始渲染的过渡


JavaScript 钩子


过渡_多元素过渡


过渡模式


多组件过渡


过渡_列表过渡


列表的排序过渡


列表的交错过渡


过渡_复用过渡


组件_异步组件


VueRouter_基础


什么是路由?


什么时候使用前端路由?


安装路由


使用路由


JavaScript


html


router-link class


hash模式


history 模式


VueRouter_命名路由-嵌套路由-重定向-别名


命名路由


嵌套路由


重定向


别名


VueRouter_编程式的导航


$router


$router.push


$router.replace


$router.go(n)


$route


$route.path


$route.params


$route.query


$route.hash


$route.fullPath


$route.matched


$route.name


$route.redirectedFrom


VueRouter_动态路由匹配


VueRouter_命名视图-路由组件传参


命名视图


路由组件传参


布尔模式


对象模式


函数模式


VueRouter_导航守卫


全局守卫


全局前置守卫 beforeEach


全局解析守卫 beforeResolve


全局后置钩子 afterEach


路由独享守卫


beforeEnter


组件内守卫


beforeRouteEnter


beforeRouteUpdate


beforeRouteLeave


完整的导航解析流程


VueRouter_路由元信息


VueRouter_过渡动效-滚动行为


过渡动效


滚动行为


Vuex_State


安装


使用


State


在Vue组件中获得Vuex状态


mapState 辅助函数


Vuex_Getter


通过属性访问


通过方法访问


mapGetters 辅助函数


Vuex_Mutation


在组件中提交 Mutation


提交载荷(Payload)


对象风格的提交方式


使用常量替代 Mutation 事件类型


Mutation 需遵守 Vue 的响应规则


表单处理


双向绑定的计算属性


Mutation 必须是同步函数


严格模式


开发环境与发布环境


Vuex_Action


分发Action


组合 Action


Vuex 管理模式


Vuex_Module


命名空间


模块的局部状态


最后


开始使用Vue

引入vue.js

image.png

引入vue.js后,给我们提供了一个构造函数 Vue


在js中,new Vue()


new Vue() 后会返回一个vue实例对象,我们用变量接着它


const vm = new Vue()


传递一个配置对象{} -- > const vm = new Vue({})


el

image.png

  <!-- 被Vue控制的区域,我们称之为模板 -->
  <div id="app"></div>
  const vm = new Vue({
    el: '#app' // 控制id为app的元素
  })

$mount

  • 作用和el一致,都是配置控制的元素,使用哪个都可以,二选一
  <div id="app"></div>
  const vm = new Vue({})
  vm.$mount('#app');

问:和el有什么不同?

image.png image.png

data

  • 类型:对象
  • 作用:存放要用到的数据,数据为响应式的
  const vm = new Vue({
    el: '#app',
    data: {
      'mrDeng': '风姿绰约、花枝招展'
    }
  })

插值表达式

  • 使用方法: {undefined{ }}
  • 可以将vue中的数据填在插值表达式中,如:
  <div id="app">{{ mrDeng }}</div>
  const vm = new Vue({
    el: '#app',
    data: {
      mrDeng: '邓哥:风姿绰约、花枝招展'
    }
  })

除了填写data之外,还可以直接填写数据值(数字、字符串、布尔值、undefined、null、数组、对象),如:

  <div id="app">
    {{ 5201314 }}
    {{ '婀娜多姿、亭亭玉立' }}
    {{ true }}
    {{ ['邓旭明', '小刘', '王小宝'] }}
    {{ {name: '邓旭明', age: 80, height: '140cm', weight: '100kg'} }}
  </div>
注意:在插值表达式中直接书写对象类型值时,不要将三个{}连在一起,这样会报错,如:
  <div id="app">
    <!-- 这样可是不行滴 -->
    {{{name: '邓旭明', age: 80, height: '140cm', weight: '100kg'}}} 
  </div>

还可在插值表达式中写表达式,如:

  <div id="app">
    <!-- 运算表达式 -->
    {{ 'you' + 'me' }}
    {{ 10 - 5 }}
    {{ 100 * 7 }}
    {{ 1000 / 12 }}
    <!-- 逻辑表达式 -->
    {{ liu || li }}
    {{ deng && liu }}
    {{ !wang }}
    <!-- 三元表达式 -->
    {{ 1 + 1 === 3 ? '邓旭明' : '正常人' }}
    <!-- 函数调用也是表达式,也可以使用,这个以后再学哈... -->
  </div>
image.png

还可以填写其他的吗?不可以,No,以下这些都是不行滴:

  <div id="app">
    <!-- 这是语句,不可以写在插值表达式中 -->
    {{ var Deng = 'shuaige'; console.log(deng) }}
    <!-- 流程控制也不可以 -->
    {{ if(Deng.looks === 'shuai'){ console.log('不可能')} }}
  </div>

  • 记住:插值表达式中,可以写:data、js数据、表达式,其他的想都不要想。
  • 注意,只要插值表达式中使用了数据,必须在data中声明过,否则会报错

  <!-- 此时就报错啦,因为mrCheng,未在data中声明过 -->
  <div id="app">
    {{ mrCheng }}
  </div>
  const vm = new Vue({
    el: '#app',
    data: {
      mrDeng: '邓哥:风姿绰约、花枝招展'
    }
  })

还有另外一种可能,使用了未被声明过的数据,不报错:

  <!-- 此时不报错啦,why? -->
  <!-- 在作用域上找不到,报错 -->
  <!-- 在原型链上找不到,值为undefined -->
  <!-- undefined为js基本类型值,所以就不报错啦 -->
  <div id="app">
    {{ mrDeng.wife }}
  </div>
  const vm = new Vue({
    el: '#app',
    data: {
      mrDeng: {
        name: '邓旭明', 
        age: 80, 
        height: '140cm', 
        weight: '100kg'
      }
    }
  })

vue的响应式-1

  • 数据变化,页面就会重新渲染
  • 怎么更改数据?so easy
  <div id="app">
    {{ mrDeng }}
  </div>
  const vm = new Vue({
    el: '#app',
    data: {
      mrDeng: '邓哥:风姿绰约、花枝招展'
    }
  });
  vm.mrDeng = '手如柔荑、肤如凝脂'; // 见证奇迹的时刻,页面变化啦

问:为什么data会直接出现在vm实例对象中咧?image.png问:实例中除了data数据外,其他东西是啥子?image.png

  • 更改的数据必须是存在的数据,否则不能重新渲染页面,因为他监听不到,如:
  <!-- 即使更改了数据,也不会重新渲染页面 -->
  <div id="app">
    {{ mrDeng.wife }} 
  </div>
  const vm = new Vue({
    el: '#app',
    data: {
      mrDeng: {
        name: '邓旭明', 
        age: 80, 
        height: '140cm', 
        weight: '100kg'
      }
    }
  })
  vm.mrDeng.wife = 'liu';
  • 更改的数据必须已渲染过的数据,否则从性能角度考虑,不会重新渲染页面,如:
  <!-- 即使更改了数据,也不会重新渲染页面 -->
  <div id="app">
    {{ mrDeng.wife }} 
  </div>

 <!-- 即使更改了数据,也不会重新渲染页面 -->

 

  <!-- 即使更改了数据,也不会重新渲染页面 -->
  <div id="app">
    {{ mrDeng.wife }} 
  </div>
  const vm = new Vue({
    el: '#app',
    data: {
      msg: '邓哥:风姿绰约、花枝招展',
      mrDeng: {
        name: '邓旭明', 
        age: 80, 
        height: '140cm', 
        weight: '100kg'
      }
    }
  })
  vm.mrDeng.wife = 'liu';
  vm.msg = '邓哥:手如柔荑、肤如凝脂';

更改数据后,页面会立刻重新渲染吗?

image.png

<div id="app">{{ msg }}</div>
const vm = new Vue({
  el: '#app',
  data: {
    msg: '杉杉'
  }
})
vm.msg = '杉杉超美的';
console.log(vm.msg); // 杉杉超美的,此时数据已更改
console.log(vm.$el.innerHTML); // 杉杉。此时页面还未重新渲染

vm.$el

  • 值为被Vue控制的元素(或者说,Vue挂载的元素)

vm.$nextTick & Vue.nextTick

  • 如何在更改数据后,看到渲染后的页面上的值?image.png
<div id="app">{{ msg }}</div>
const vm = new Vue({
  el: '#app',
  data: {
    msg: '杉杉'
  }
})
vm.msg = '杉杉超美的';
console.log(vm.msg); // 杉杉超美的,此时数据已更改
// 1. 使用vm.$nextTick
vm.$nextTick(() => {
  console.log(vm.$el.innerHTML); // 杉杉超美的
})
// 2. 使用Vue.nextTick
Vue.nextTick(() => {
  console.log(vm.$el.innerHTML); // 杉杉超美的
})
  • vm.nextTick和Vue.nextTick还可以作为Promise使用



<div id="app">{{ msg }}</div>
const vm = new Vue({
  el: '#app',
  data: {
    msg: '杉杉'
  }
})
vm.msg = '杉杉超美的';
// 1. 使用vm.$nextTick
vm.$nextTick().then(() => {
  console.log(vm.$el.innerHTML); // 杉杉超美的
})
// 2. 使用Vue.nextTick
Vue.nextTick().then(() => {
  console.log(vm.$el.innerHTML); // 杉杉超美的
})

vm.$nextTick 和 Vue.nextTick的区别?image.png

  Vue.nextTick(function () {
    console.log(this); // window
  })

image.png

  vm.$nextTick(function () {
    console.log(this); // vm实例
  })

  • 好奇nextTick是怎么实现的吗?
  • 异步任务分为宏任务(macro)和微任务(micro)
  • 宏任务比较慢(如setTimeout等),微任务比较快(如Promise.then()等)
  • 微任务在前,宏任务在后(eventloop,事件环)

  // 控制台打印顺序:promise > timeout
  setTimeout(() => {
    console.log('timeout');
  }, 0)  
  Promise.resolve().then(() => {
    console.log('promise');
  })

在nextTick的实现源码中,会先判断是否支持微任务,不支持后,才会执行宏任务

  if(typeof Promise !== 'undefined') {
    // 微任务
    // 首先看一下浏览器中有没有promise
    // 因为IE浏览器中不能执行Promise
    const p = Promise.resolve();
  } else if(typeof MutationObserver !== 'undefined') {
    // 微任务
    // 突变观察
    // 监听文档中文字的变化,如果文字有变化,就会执行回调
    // vue的具体做法是:创建一个假节点,然后让这个假节点稍微改动一下,就会执行对应的函数
  } else if(typeof setImmediate !== 'undefined') {
    // 宏任务
    // 只在IE下有
  } else {
    // 宏任务
    // 如果上面都不能执行,那么则会调用setTimeout
  }


  • 曾经vue用过的宏任务
  • MessageChannel 消息通道 宏任务

vue的响应式-2

  • 除了未被声明过和未被渲染的数据外,还有什么数据更改后不会渲染页面?
  • image.pngimage.png
<!-- 即使向数组中添加了第4项,数组仍然显示3项 -->
<!-- 咳咳,一家三口,有第4个人也不能摆出来给大家看呀~ -->
<div id="app">{{ list }}</div>
const vm = new Vue({
  el: '#app'
  data: {
    dengFamily: ['邓哥', '小刘', '王小宝']
  }
})
vm.dengFamily[3] = '铁锤妹妹'; // 不是响应式的
相关文章
|
2月前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
367 2
|
24天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
23天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
30 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
1月前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
73 10
|
29天前
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
3月前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
2月前
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战
|
2月前
|
自然语言处理 JavaScript 前端开发
JavaScript高级——ES6基础入门
JavaScript高级——ES6基础入门
26 1
|
2月前
|
JavaScript API 开发者
十分钟 带你强势入门 vue3
十分钟 带你强势入门 vue3
63 1
|
2月前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
508 1