vue
小白追梦
前端小菜鸡,欢迎交流
展开
-
mac使用 github 这一篇就足够啦 + 上传github出现 白色向右箭头处理方法
1、mac使用 github点击跳转2、上传github出现 白色向右箭头处理方法1、删除这个文件夹就可2、小技巧 上传 github 或者 给别人文件时,记得删掉 node_modules包(项目变复杂,这个包会很大)3、分享我的github,当前 上传了三个很好的 demo,欢迎学习和使用 ,账号是 huanhunmao ,点击跳转4、nice!...原创 2020-12-16 08:12:28 · 1506 阅读 · 0 评论 -
vue 精简教程(五) vue-cli脚手架
文章目录前言一、重要的部分?1、vue-cli 脚手架2、我们来使用一下脚手架 搭建一个最简单的程序3、vuex状态管理3-1 mutations 修改数据3-2 getters3-3 actions3-4 modules总结前言一、重要的部分?1、vue-cli 脚手架1) Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统其实就是一个配置好了的使用webpack完成打包构建的初始化工程,和我们前面讲的webpack打包没啥区别,只是更为全面,在实际开发中也是常用的工具2)全局原创 2020-10-19 19:16:26 · 202 阅读 · 0 评论 -
vue 精简教程(四) vuerouter 路由
文章目录前言一、vue router 路由1、基础使用方式2、命名视图和命名路由2-1命名视图2-2 命名路由3、嵌套路由 路由传参4、路由的扩展部分 路由模式5、路由守卫总结前言一、vue router 路由1、基础使用方式1) 在vue 下面引入 vue router<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script>2) 将之前的样式 style拷贝过来3)原创 2020-10-18 17:53:45 · 437 阅读 · 0 评论 -
vue 精简教程(三)大 组件它真的来了 组件通信方式 浅谈 过滤和 自定义组件
文章目录前言一、vue component组件?1.引入库`全局组件和私有组件`的基本定义 ?2. `vue 动态组件`3. 我们来加一点 `组件的动画`二、组件通信1.组件通信 父组件传子组件2.组件通信 子组件传父组件3.父组件触发子组件事件4、vue 过滤和 自定义组件5、vue 自定义指令总结前言一、vue component组件?1.引入库全局组件和私有组件的基本定义 ?有几个注意的事情 :1)全局组件 component 建立在 vue 实例前2)私有组件 compo原创 2020-10-18 09:31:48 · 133 阅读 · 0 评论 -
vue 精简教程(二 )常用指令用法 更新超长版本 一次看个过瘾好吧
文章目录前言一、vue常用指令 + 事件+样式?1、v-for2、v-if v-show3、filter 筛选 避开 v-if v-for 一起使用4、v-bind v-model5、监听器 watch6、计算属性7.vue 事件8、按键事件9、样式处理10、动态行内式二、过渡效果和动画?总结前言一、vue常用指令 + 事件+样式?1、v-for这个我们已经说过了,需要注意的是,需要加:key=“data.id”2、v-if v-showv-if 如果 是false 会直接删除v-原创 2020-10-17 15:23:50 · 260 阅读 · 0 评论 -
vue 精简教程(一) dev tools mvvm spa单页面 数据定义和渲染
文章目录一、vue dev tools下载安装?二、什么是mvvm ? 什么是spa单页面web应用?1.mvvm2.spa单页面web应用三、数据定义和渲染 ?1、我们先看一下 vue 都可以 定义那些数据 ,以及如何定义?2、我们写的这些数据 如何在页面中渲染出来 ?3、如果只是单独的数组 ,只需要循环{{data}}出来就行4、可以迭代数字5、可插入 html标签总结一、vue dev tools下载安装?直接翻墙 chorme 商店 搜索下载二、什么是mvvm ? 什么是spa单页面.原创 2020-10-15 08:02:44 · 238 阅读 · 0 评论 -
vue 基础教程(八)生命周期 过滤器
文章目录前言一、生命周期二、vue 过滤器1.我们来回顾一下之前的axios拿到json后使用前言学习一下组件的生命周期一、生命周期1)先说三组 创建、准备、更新我们将代码展现一下主要看下面几个函数 方法 上面的都是之前的过渡内容 点击显示或者隐藏<html><head> <title>test</title> <meta charset="utf-8" /> <style> .原创 2020-10-14 21:49:56 · 133 阅读 · 0 评论 -
vue 基础教程(七) vue进阶: 插槽 slot 具名slot 过渡
1 vue进阶: 插槽 slot2)更加动态的显示内容 而不是将内容写固定住<html><head> <title>test</title> <meta charset="utf-8" /> <style></style></head><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">&原创 2020-10-14 19:44:32 · 225 阅读 · 0 评论 -
vue 基础教程(六)ref通信 非父子通信 事件总线 动态组件
1 ref 通信ref 放在标签上拿到的是原生节点基本用法<html><head> <title>test</title> <meta charset="utf-8" /> <style></style></head><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script&g原创 2020-10-13 22:04:01 · 218 阅读 · 0 评论 -
vue 基础教程(五) 虚拟dom_diff 定义组件 父组件和子组件
1 虚拟dom_diff2 定义组件1)2)先写一个最简单的全局组件需要注意 几件事情1、 注意写的顺序 必须是Vue.component 定义在前面 new Vue({})定义在后面2、如果全局组件定义的是 navbar 上面也必须用这个 不过渲染后变成了 div 3、全局组件中 使用方法 直接写在 和template 同级别就好 不能写在 new Vue中<html><head> <title>test</原创 2020-10-13 19:56:58 · 183 阅读 · 0 评论 -
vue 基础教程(五)数据请求方式:fetch 和axios 计算属性(基本用法,模糊查询)
1 fetchw3c 基本写法 需要两个then 才能拿到数据第一个.then 拿到的是对象 里面包含请求体 请求头响应部分 第二个.then 拿到的才是真正的数据// 里面的test.json 直接去网上下载一个测试使用的json文件就行fetch("./test.json") .then((res) => { return res.json(); }) .then((res) => { console.l原创 2020-10-13 07:07:39 · 464 阅读 · 0 评论 -
vue 基础教程(四) 表单控件绑定 购物车 表单修饰符
1)vue 表单控件绑定v-model再来一个最简单的内容<html> <head> <title>test</title> <meta charset="utf-8" /> <style></style> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></scri原创 2020-10-12 21:04:44 · 153 阅读 · 0 评论 -
框架学习之VUE(十)学无止境 vue的更多学习内容和总体的方向
11)点击不同的东西 如何实现不刷新 切换 ? 提升性能?不同组件的切换当两个组件不是父子组件的时候 却可以产生关联的效果这个需要 vuex的内容vue-router后台需求和代码会有很多 ,但是对样式要求不高这个时候需要用到组件库 比如element-ui但是大多时候 面试要求你写出某个组件源码学无止境 首先达到就业标准 满足就业要求 再沉下来好好学习 不断学习 加油!...原创 2020-10-12 14:00:45 · 96 阅读 · 0 评论 -
框架学习之VUE(九)搜索框组件 侧边栏和页面组件 将组件整合起来
1 搜索栏 和 侧边栏组件做一个整合1.新建Aside.vue把之前零散的组件封装起来<template> <div class="aside"> <ChannelSearch /> <TitleMenu :isActive="activeId === 100" @active="activeId = 100"> <template v-slot:title> <!-- 这里面写的是插槽原创 2020-10-12 14:00:11 · 590 阅读 · 0 评论 -
框架学习之VUE(八)搜索框组件。这一节写一下搜索组件的内容,尽量详细写出搭建的过程
1 搜索框组件1-1第一个问题 点击展开的时候 为啥不设置 height : auto ?我直接展示不就好了吗?有一个问题 0.3s 过渡动画会失效 为什么?因为 如果最终的变化结果是 auto 浏览器渲染的时候 不会进行过渡 渲染完成后才想起需要过渡但是已经过去了1-2字体小图标 我们怎么封装为一个组件 ?为什么需要封装成一个组件 ?1)添加新的小图标的时候 不管是使用在线的还是本地的 都会多次更新内容2) 小图标的名称大多数是作者起名 并不规范 对于后期维护存在问题1、原创 2020-10-12 13:58:42 · 1748 阅读 · 0 评论 -
框架学习之VUE(七) 继续完善频道列表。这是一份很实用的教程,可以帮你快速理解vue
1 继续完善频道列表组件常规修改方式事件 插槽 属性 修改组件现在显示的是2竖列 如果 某天 需要显示 3列或者多列 怎么办 ?1)首先 完善一下 channelList.vue 的内容2)3)channelList.vue<template> <div class="channel-list"> <div v-for="item in channels" :key="item.id" class="it原创 2020-10-12 13:54:37 · 197 阅读 · 0 评论 -
框架学习之VUE(六)完成频道列表 这里将做一下频道列表的内容 从开始慢慢做完很舒适
1 完成频道列表组件?怎么做出这一块的组件 ?1-1新建channel.vue1-2修改一下<template> <div class="channel"> <Item :isActive="isActive" @active="$emit('active')"> <div class="inner"> <span class="name">动漫</span> <原创 2020-10-12 13:54:02 · 181 阅读 · 0 评论 -
这份教程肯定适合你 vue 全面的内容 (二)有源码可以快速上手练习真棒! 新鲜热乎的 20201011
1)事件处理方式vue- 事件处理常规情况存在三种写法1-1直接写函数名字1-2写函数表达式 需要传入参数时1-3直接写js 判断表达式 常规用在取反和赋值这种简单操作2) 修饰符vue----事件修饰符为什么要有这个的概念? 我们原生js怎么解决这个冒泡时间呢?冒泡事件指的是 我在子类执行方法之后 父类也会跟着触发3)如何阻止默认的冒泡事件 ? 之前怎么处理的?4)vue 怎么处理这个事情 ?利用事件修饰符 .stop5)第二个事件修饰符 .pre原创 2020-10-11 16:50:48 · 73 阅读 · 0 评论 -
请收下这份舒服的教程 vue 全面的内容 (二)有源码可以快速上手练习真棒! 新鲜热乎的 20201011
1 我现在有这样的一个需求 输入文本框 筛选出部分内容?1)vue-列表key值设置2)vue-列表数组检测并且补充解决之前对象属性无法添加的问题 ,3)vue --- 列表过滤应用需要先了解3个事情3)-1@input = "handleInput()"事件 文本框改变就会触发3)-2@change事件=handleChange()事件 鼠标离开文本框就会触发3)-3数组的filter方法 帮助过滤3)-43)-52 这样操作的问题是使用的是fil原创 2020-10-11 14:41:13 · 85 阅读 · 0 评论 -
框架学习之 VUE (四)(关键词:脚手架 通用组件开发 单向数据流)利用实际做b站频道组件的开发过程,深度理解vue
1 使用脚手架 搭建工程1)mac 安装过程 出现错误 前面加上一个 sudo 就可2)选择一个文件夹 打开终端 然后 创建 等待3) 需要进行 3步选择 选择好之后等待搭建4)启动服务 终端输入 npm run serve5)然后 command 点击链接 跳转到网页6) 后续对这个初始的状态进行修改就行2 我们需要解释一下 安装的这些东西 都有什么作用 ?一个网页 后面 加/favicon.ico 可以得到它的 favicon.ico小图标3原创 2020-10-11 10:58:49 · 195 阅读 · 0 评论 -
框架学习之 VUE (三) (关键词:箭头函数 模块化 组件化 组件树 实际的VUE案例) 利用实际做b站频道组件的开发过程,深度理解vue
1 es6 补充// 1 普通函数写法var sum = function (a, b) { return a + b;};console.log(sum(1, 2)); //3// 2 箭头函数表达法var sum = (a, b) => { return a + b;};console.log(sum(3, 2));关于箭头函数有几个需要注意的地方 :1) 若左边只有一个参数 则左边的小括号可以省略掉2) 若右边只有一个 return 返回值 则右边的大原创 2020-10-11 10:58:22 · 653 阅读 · 2 评论 -
框架学习之 VUE (二) (关键词:diff 算法 模板语法 计算属性)利用实际做b站频道组件的开发过程,深度理解vue
1 diff 算法2模板语法总结一下:1、只有内容部分 可以使用 mustache模板 {{xxxxx}}2、指令部分 不能使用 {{xxx}} 只能用 v- 开头以下内容是基本的指令2-1 v-for 循环渲染元素2-2 v-html 设置元素的innerHTML 导致元素模板内容失效2-3 v-on 当…怎么样 注册事件 点击事件 .prevent 可以阻止事件的默认事件.stop 阻止冒泡事件2-4 v-bind 绑定动态属性 提供简写原创 2020-10-11 10:58:01 · 122 阅读 · 0 评论 -
框架学习之VUE (一) (关键字:速写 模版字符串 注入 虚拟DOM树 diff算法 )利用实际做b站频道组件的开发过程,深度理解vue
1核心 解决复杂的DOM操作特点 是什么渐进式 一部分用VUE 其他也可以不用组件化 每个人开发一块内容响应式2应用场景前台页面 用户看到的 前台部分需要VUE中后台页面 中间人看到的 后台界面 大量的后台需要 VUE开发3当前主流版本 2.xxxxx 可以兼容很久终端设备和人交互都会使用前端技术 手机电脑 冰箱 车载。。。。就业主要学习 vue react4简单理解 MVVM 模式 module(数据)---view原创 2020-10-11 10:57:34 · 193 阅读 · 0 评论 -
再来一套 vue 全面的内容 (一)有源码可以快速上手练习真棒!
新建一个html 文件 先利用 cdn 引入一下 vue然后 简单操作一下2)变量定义在vue data 里面比较好用3) 我们展示一下这个程序<html><head> <title>test</title> <meta charset="utf-8"></head><body>// 上面这部分 使用vue 进行渲染 把这个id 已经放到了实例 el中进行渲染 <d...原创 2020-10-11 10:49:57 · 83 阅读 · 0 评论