vue
关注
分享
扫一扫
vue
西楠
这个作者很懒，什么都没留下…
展开
-
vue笔记(更新中-------)
1.v-text和v-html的区别相同点: 1.都覆盖掉所有元素的子节点 2.都可以去渲染数据不同点 1.text不能解析HTML标签 2.html可以解析HTML标签2.v-show和v-if的区别v-show:显示和隐藏 (相当于修改display:none)v-if :直接创建或者删除标签3.datadata命名不能使用 '$' , _ 开头数据可以在当前模板中直接使用(不需要`this`)4.什么是数据驱动视图1.监听指定的数据2.指定的数据发生改变原创 2020-09-17 08:01:52 · 350 阅读 · 2 评论
-
vueX的介绍以及使用
vuex文章目录vuex1、为什么要用 vuex ？2、通信解决方案3、vuex 是什么？4、vuex 的工作流5、安装 vuex6、引入 vuex7、从 Store 开始7-1、创建一个 Store8、核心概念8-1、state8-1-1、state 的创建8-1-2、在组件中使用 store8-1-3、store 配置8-1-4、使用辅助函数 `mapState`8-1-5、使用扩展运算符组合9、getters9-1、getters 函数9-2、通过属性访问9-3、通过方法访问9-4、使用辅助函数 `原创 2020-10-18 18:53:41 · 255 阅读 · 0 评论 -
vue插槽的使用?怎么改变头部内容?
什么是插槽?插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。怎么改变移动端项目的头部?单独写一个组件header.vue内容如下:<template> <div> //如下头部分为三部分=左=中=右然后写好全局样式 <div class="header"> <div class="h-left"> <原创 2020-10-11 18:27:25 · 432 阅读 · 1 评论 -
vue中使用npm 命令安装的nprogress以及如何修改颜色/位置
1.安装npm install --save nprogress或者yarn add nprogress2.使用在router.js中//导入import NProgress from 'nprogress'import 'nprogress/nprogress.css'//在路由守卫中可以直接使用使用下边的四个方法3.方法NProgress.start() — 开始出现进度条NProgress.set(0.4) — 设置百分比NProgress.inc() — 递增NP原创 2020-10-07 09:03:46 · 2939 阅读 · 2 评论 -
vue过渡＜transtion＞＜/transtion＞与列表过渡＜transtion-group＞＜/transtion-group＞
1.vue过渡组件Vue 在插入、更新或者移除 DOM 时，使用内置的过渡封装组件可以实现过渡效果语法格式: <transition name="xx"> </div></transition>2.过渡的类名在进入/离开的过渡中，会有 6 个 class 切换：v-enter：进入过渡的开始状态v-enter-active：进入过渡生效时的状态v-enter-to：进入过渡的结束状态v-leave：离开过渡的开始状态v-leave-acti原创 2020-10-06 20:37:58 · 380 阅读 · 0 评论 -
vue开发者模式Vue调试工具(浏览器为vue专门提供的扩展插件)vue-devTools
下载地址:vue-devTools安装步骤首先进入浏览器设置，点击扩展程序打开开发者模式点击加载以解压的扩展程序直接选择下载成功的文件夹加载成功后选择右下角开启是否安装成功通过npm run serve启动项目如果看到浏览器右上角的vue插件图片则成功安装,就可以使用了...原创 2020-09-28 10:39:02 · 1323 阅读 · 0 评论 -
vue项目移动端适配(flexible.js)
想要达到页面的自适应通过rem+淘宝的flexible.js第一步(cmd)输入命令npm install lib-flexible --save第二步(在main.js中引入lib-filexible)import 'lib-flexible/flexible.js'第三步(在项目根目录注释掉如下标签)<meta name="viewport" content="width=device-width, initial-scale=1.0">因为安装flexible会自动生原创 2020-09-28 08:32:58 · 895 阅读 · 0 评论 -
vue生命周期+钩子函数+各个钩子函数的作用
1.什么是vue生命周期?每个Vue实例再被创建之前都要经过一系列的初始化过程,这个过程就是Vue的生命周期。2.各个钩子函数之间的生命周期干的事在beforeCreate和create钩子函数之间的生命周期在这个生命周期之间,进行初始化,可以看到created的时候数据已经和data属性进行绑定(放在data中的属性值发生改变的同时,视图也会改变)此时还没有el选项created和beforeMount间的生命周期首先会判断对象是否有el选项,如果有的话就继续向下编译,如果没有el选原创 2020-09-27 22:56:48 · 1388 阅读 · 0 评论 -
vue路由跳转后高亮问题|active class(激活状态)linkActiveClass 和 linkExactActiveClass以及exact
linkActiveClass 是模糊匹配linkExactActiveClass 是精准匹配exact也是精准的意思问题看下边图片:当css样式为#nav a.router-link-exact-active { color: #42b983; }时,如果下边没有子路由不会有什么问题,但是如果有子集路由的话,当你点击小说下边的子集路由小说就不会高亮图片如下:解决这个问题只需要改变css为#nav a.router-link-active { color: #42b983; }对比初始的原创 2020-09-27 21:53:24 · 3727 阅读 · 0 评论 -
vue项目解决跨域问题(通过服务器代理)
使用的是服务器代理方式解决跨域第一步在vue项目根目录中创建文件夹vue.config.js文件(根目录就是项目名称目录就是根目录,直接在项目名称上右击创建文件)注意:文件名是固定的vue.config.js第二步打开文件vue.config.js写入如下代码:module.exports = {//搭建服务器 devServer: { //代理 proxy: { //代理名称 '/api': {原创 2020-09-26 13:18:19 · 2029 阅读 · 4 评论 -
vue实现分页效果原生,升级为组件写法(两种)
需求:实现分页通过组件传参第一步:通过先不封装自己写出来效果(代码如下):<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>原创 2020-09-21 10:52:25 · 361 阅读 · 0 评论 -
vue路由传参的基本实现方式小结【三种方式】
代码原创 2020-09-10 16:07:51 · 315 阅读 · 0 评论