执手天涯@的博客

1 、Vue路由简介1、什么是路由【生活举例】：设备和ip的映射关系接口和服务的映射关系路径和组件的映射关系2、路由的优缺点【优点】：实现业务场景的切换整体不刷新页面，用户体验良好数据传递容易，开发效率高【缺点】：开发成本高首次加载比较慢，不利于seo的设置3、如何使用路由【Vue-Router】： 第三方包，是vue官方提供的路由管理器官网【简介】：vue-router模块包它和 Vue.js 深度集成可以定义 - 视图表(映射规则)模块化

1、动态组件问题描述：当我们在使用大多数网站的时候，登录和注册可以在同一个页面实现，就是当点击登录的时候登录的相关信息显示，点击注册的时候，注册的相关信息显示。针对以上问题我们可以使用v-if和v-show等方式来解决在vue中我们还提供了一种解决方式，就是利用动态组件来实现1、准备两个需要切换的组件UserName.vue<template> <div> <span>用户名：</span> <input ty

1、$refs简介$refs是vue提供的获取真实dom的方法。1、$refs获取DOM元素【使用步骤】：在原生DOM元素上添加ref属性利用this.$refs获取原生的DOM元素【代码演示】：<template> <div> <h1>获取原生的DOM元素</h1> <h4 id="h" ref="myH">我是h4标签</h4> </div></template>

1、简介axios是一个专门用于发送ajax请求的库。【特点】：支持客户端发送ajax请求支持服务端node.js发送请求支持Promise请求支持请求和响应拦截器自动转换JSON数据2、基本语法axios({ method: '请求方式', // get post url: '请求地址', data: { // 拼接到请求体的参数, post请求的参数 xxx: xxx, }, params: { // 拼接到请求行的参数, get请求的参数

首先，我们了解一下"生命周期"这个词。 通俗的来说，生命周期就是一个事务从出生到消失的过程。例如，一个人从出生到去世。在vue中，vue的生命周期是指，从创建vue对象到销毁vue对象的过程。1、图解Vue的生命周期2、钩子函数【解释】：钩子函数是Vue框架中内置的一些函数，随着Vue的生命周期阶段，自动执行【作用】：特定的时间，执行特定的操作...

在原生的JavaScript中，当我们需要使用重复使用标签的时候，大多数情况下我们会使用复制粘贴的方法。在vue中我们使用组件的方式，可以有效的解决代码片段的重复使用。1、组件的引入【实现多个折叠面板】：不使用组件：<!-- * @Author: your name * @Date: 2022-03-12 08:50:07 * @LastEditTime: 2022-03-12 15:44:24 * @LastEditors: Please set LastEditors * @D

1、侦听器的基本使用在vue中侦听器是用来监听数据对象或计算属性中vue变量的数值是否发生变化。1、侦听器语法watch:{ "被侦听的属性名"(newVal,oldVal){ 数值改变的时候要执行的代码 }}2、基本使用演示<template> <div> <input type="text" v-model="name" /> </div></template><script>expor

1、计算属性简介在原生的JavaScript中我们需要一个来自不同数的和的变量，我们会使用let num=a+b:这种写法，但是当a和b发生改变的时候，num并不会自动修改，在vue中我们提供了计算属性可以很好的解决这个问题。2、计算属性的语法在vue的配置项中添加computed:{ "计算属性名" () { return "值" }}3、计算属性的使用<template> <div> <!-- 调用计算属性 -->

VUE中的过滤器本质就是一个函数，就是将传入的值进行处理之后再返回。1、过滤器定义语法在main.js中使用如下方法定义一个全局过滤器Vue.filter("过滤器名称",(需要处理的值)=>{return "返回处理后的值"})【演示】import Vue from 'vue'import App from './App.vue'Vue.config.productionTip = false/** * 定义一个全局过滤器用来翻转字符串 * 在此处定义的过滤器可以在任意

在原生的JavaScript中我们要给一个元素设置动态的样式需要我们利用添加类名和移除类名的方法来设置，在vue中我们可以有效的利用v-bind指令来设置动态的样式。1、动态class【语法】：:class="{类名: 布尔值}"【演示】：<template> <div> <p :class="{ color_red: bool }">我们来动态改变字体颜色！！</p> </div></template&gt

1、v-for就地更新v-for默认行为会尝试原地修改元素而不是移动元素。【图解】：2、虚拟DOM.vue文件中的template里写的标签, 都是模板, 都要被vue处理成虚拟DOM对象, 才会渲染显示到真实DOM页面上内存中生成一样的虚拟DOM结构(本质是个JS对象)因为真实的DOM属性好几百个, 没办法快速的知道哪个属性改变了比如template里标签结构<template> <div id="box"> <p class

前言为了更好的学习vue的指令，本小节先介绍vue的设计模式——MVVM设计模式：一套被反复使用的，多数人知晓的、经过分类编目的、代码设计经验的总结。【图解】：1、插值表达式又叫声明式渲染、文本插值可以把vue数据变量直接显示在标签内部vue中的变量声明在data函数返回的对象上，用key属性声明。【语法】：{{ 表达式 }}【演示】： 在项目的app.vue中书写如下代码<template> <div> <h1>{{msg

1、什么是Vue官方解释：vue是一种渐进式的JavaScript框架，一套拥有自己规则的语法。渐进式：逐步进步，需要用的使用，不需要使用的不必使用。库：封装自己的属性和方法框架：拥有自己的规则和元素。不易改变。官网地址2、如何学习vue1、两种开发方式传统的html中引入vue（不推荐，灵活性差）工程化开发（强烈建议，灵活性高，便于集成工具）2、编者建议要想学好vue，首先要学好其基本语法，建议将基本语法书写下来，每天多看几遍，同时加强练习。熟能生巧。2、vue/

1、webpack基本介绍webpack本质是一个第三方的模块包，用于分析并打包代码提高网站打开的速度【工作图解】：2、webpack基本使用步骤1、环境准备1、初始化包环境yarn init2、安装依赖yarn add webpack webpack-cli -D3、配置scripts {package.json中} "scripts": { "build": "webpack" }2、使用webpack打包两个js文件在项目中新建src目录在src

1、ES6模块化1、回顾一下node.js中我们所遵守是commonJS模块化规范导入其他模块语法是require()方法使用module.exports对象导出模块2、模块化的优点降低了沟通的成本极大的方便了各个模块之间的相互调用3、分类AMD和CMD是适用于浏览器的模块化规范CommonJS是适用于服务端的模块化规范ES6的模块化规范既适用于浏览器又适用于服务器4、ES6模块化1、定义一种适用于浏览器和服务器端的模块化规范。2、语法每一个单独的js文件都是一