![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
lt要努力
这个作者很懒,什么都没留下…
展开
-
vue3 template编译出来了的,并且出现了#document-fragment,里面的内容显示不出来解决方法
原因猜想:template也是一个html标签,可能为了区分原始的标签和vue的模板吧!3. 解决方法: 在vue3 template编译出来了的,并且出现了#document-fragment,里面的内容显示不出来解决方法template标签上加一个 v-if=“true”现在依然是在页面中没有显现出来,dom元素都没有存在。2. 往div里面再加点内容看看。原创 2023-02-01 10:45:55 · 1910 阅读 · 1 评论 -
vue-动态路由(路由的传参和接参)
路由传参通过router-link的to属性中的params或query实现params在地址栏显示的时候不会显示键值对,直接是值跟在后面而query会有键名//eg:<router-link :to = "{name: 'list',params: {id: xxx}, query: {xxx:xxx}}"></router-link>//其中name就...原创 2019-11-18 22:31:05 · 2427 阅读 · 0 评论 -
vue-动态渲染数据(this.$nextTick) & swiper 组件
在 mounted 钩子里,不能根据数据改变而改变如果放在 updated 钩子里,随便一个数据发生改变,都会重新生成补丁对象但每次都实例化,这样是肯定不行的所以有了 $nextTicknextTick表示所有的真实dom渲染结束之后执行this.$nextTick(() => { })<template> <div class="swiper-conta...原创 2019-11-18 21:56:26 · 1211 阅读 · 0 评论 -
vue-路由懒加载、二级导航、路由重定向、错误路由匹配、组件缓存
路由懒加载路由的懒加载 : vue-router 懒加载是通过vue的异步组件和webpack的代码分割功能来完成的const Home = () => import(/* webpackChunkName: "group-foo" */ '../pages/home')二级导航使用 childrenconst routes = [ { ...原创 2019-11-18 21:45:08 · 457 阅读 · 0 评论 -
vue-router(vue 路由的使用)
路由的配置先搭建 vue 项目 vue create router-app(filename) 或者 vue create . //后者是当前文件 cd router-app安装vue-router yarn add vue-router在src目录下创建一个router目录, 里面创建一个index.js文件 , 这个目录就是router的模块在src/...原创 2019-11-18 10:12:08 · 211 阅读 · 0 评论 -
SPA(单页面应用)、路由模式
SPASPA ( single page App ) 单页面应用多页面应用 有多个html文件,通过a标签的连接联通各个页面缺点开发起来太冗余,编译、压缩很耗时间页面之间的跳转速度太慢,这个时候就会出现一个严重的问题,白屏单页面应用不需要刷新页面,因为它就是一个页面这个页面内容在切换单页面内容之间的切换要想实现我们就是用路由了如今我们的app、后台管理系统 主要的开发形式...原创 2019-11-16 18:18:40 · 626 阅读 · 0 评论 -
vue - 生命周期
为什么要有生命周期 ?Vue为了在一个组件的从创建到销毁的一系列过程中添加一些功能,方便我们更好的去控制组件特别注意:钩子函数不要写成箭头函数,箭头函数可能会改变this指向生命周期图示生命周期初始化阶段vue生命周期初始化阶段 - 4个生命周期钩子【 Hook 】函数研究方向! 1. 它们的公共特征 * a. 组件一旦创建,自动执行 * b. 执行一次! 2. ...原创 2019-11-16 17:58:52 · 145 阅读 · 0 评论 -
vdom、diff、jsx
vdomvdom的渲染流程第一次时template模板使用jsx语法进行编辑通过render函数将jsx解析为 vdom 对象模型将VDOM对象模型渲染为真实DOM,然后挂载到页面中当我们的数据发生改变时重新生成VDOM为什么vue会使用vdom?快 【 操作数据比操作真实dom要快】关于vdom面试题1. 为什么vue会使用vdom-2. vdom是什么?3. 是...原创 2019-11-16 17:36:35 · 100 阅读 · 0 评论 -
vue-插槽
slot 插槽插槽,给组件的内容预留一个空间分类普通插槽命名插槽命名插槽给slot加一个name属性<slot name = "header"></slot><body> <div id="app"> <Hello> <header slot = "header"> ...原创 2019-11-16 17:23:13 · 69 阅读 · 0 评论 -
vue-过滤器
作用是对已经有的数据做数据格式化使用格式已有数据 | 过滤器名称(arg1,arg2) // | 我们称之为 管道符<img :src = "item.img | imgFilter " onerror="this.style.visibility='hidden'">过滤器的全局定义全局定义 Vue.filter(过滤器名称,回...原创 2019-11-16 17:14:09 · 87 阅读 · 0 评论 -
vue-过渡效果(transition过渡组件)
借用animate.css添加类名使用transition包裹过渡组件动画: enter-active-class = "animated xxxx类名" ---- 进入 leave-active-class = "animated xxxx类名" ---- 离开 mode: - 新元素先进行过渡,完成后当前元素过渡离开 --- in-out ...原创 2019-11-16 17:03:32 · 300 阅读 · 0 评论 -
动态组件、组件缓存
动态组件通过改变值,和is属性 显示相应的组件<body> <div id="app"> <select name="" id="" v-model = "val"> <option value="father"> father </option> <option value="son">...原创 2019-11-16 16:53:24 · 467 阅读 · 0 评论 -
vue - 组件的通信
为什么要进行组件通信?组件是一个聚合体,将来项目要合并,那么必然各个组件之间需要建立联系,这个联系就是数据通信vue组件通信父子组件通信: props子父组件通信: 自定义事件非父子组件通信: ref 、 bus多组件状态共享: vuex数据预载: vue-router父子通信父组件将自己的数据同 v-bind 绑定在 子组件身上子组件通过 props属性接收老爸发...原创 2019-11-16 16:46:07 · 122 阅读 · 1 评论 -
vue-组件的嵌套写法
组件之间的嵌套要将子组件以标签化的形式放在父组件的模板中使用组件全局<body> <div id="app"> <Father></Father> <!-- 直接这么写是不行的 //因为解析到了Father就不会继续执行了 <Father> <Son>&...原创 2019-11-16 16:30:30 · 731 阅读 · 0 评论 -
面试题- vue的data选项为什么是函数
data选项为什么是函数?组件是一个整体,那么它的数据也应该是独立的,函数形式可以给一个独立作用域返回值为什么是对象呢?我们vue特点是什么呢? 深入响应式,data选项要做劫持【 es5的Object.defineProperty的getter和setter设置 】...原创 2019-11-16 16:23:58 · 725 阅读 · 0 评论 -
axios-拦截器
axios拦截器 数据请求前拦截 数据请求得到结果后拦截<script src="https://unpkg.com/axios/dist/axios.min.js"></script> <style> p{ display: none; } .show{ display: block; ...原创 2019-11-16 16:21:22 · 137 阅读 · 1 评论 -
vue-template模板
定义组件模板<body> <div id="app"> <Hello></Hello> </div></body><script src="../../../lib/vue.js"></script><script> Vue.component('Hello',...原创 2019-11-16 16:12:05 · 429 阅读 · 0 评论 -
vue-组件
前端组件化发展历史前后端耦合 前后端不分离项目 找后台搭建项目开发环境 寻找项目目录中的静态资源目录 js img css 同步修改css 前后端分离 前端团队合作项目的出现 组件化为了解决多人协作冲突问题 复用组件的概念组件是一个html 、 css 、js 、img...原创 2019-11-16 16:06:31 · 75 阅读 · 0 评论 -
mixin
混入的形式 全局混入 【 不推荐 】 局部混入混入的作用:将选项中某一个或是多个单独分离出去管理,让职能更加单一高效,符合模块化思想全局混入全局混入 Vue.mixin(config)mixin.js/* 这个文件搞方法*/const obj = { methods: { aa () { alert('aa') }, bb ...原创 2019-11-16 15:52:38 · 85 阅读 · 0 评论 -
methods vs computed vs watch
定义方法( methods )计算属性( computed )数据需要 反向 输入出渲染在页面<body> <div id="app"> {{ str.split('').reverse().join('') }} <p> {{ newStr }} </p> <p> {{ newMsg }} <...原创 2019-11-16 15:43:55 · 107 阅读 · 0 评论 -
vue-自定义指令
自定义指令有两种定义形式全局定义局部定义全局定义Vue.directive( 指令名称, 指令的配置选项 )//结构中使用:<input type="text" v-focus.stop = "info"> // /* v-focus */ Vue.directive('focus',{ /* 每一个选项中都有四个参数 */ bind: f...原创 2019-11-16 15:23:46 · 209 阅读 · 0 评论 -
vue-自定义事件
自定义事件 - 基于node.js的events模块 事件的发布 $on 发布【 声明一个事件 】 事件的订阅 $emit 订阅【 触发一个事件 】<body> <button @click = "myEvent"> 自定义事件 </button></body><script src="../../lib/vue....原创 2019-11-16 15:16:19 · 161 阅读 · 0 评论 -
vue-事件修饰符
前言什么是事件修饰符?事件修饰符是用来修饰事件的,它的作用是更加便捷的来使用一些重复的代码,比如时间冒泡的阻止事件修饰符.stop:阻止事件冒泡.prevent:阻止浏览器的默认行为.capture:阻止事件捕获.self:自身.once:一次性.passive:不需要触发onscroll事件键盘事件修饰符所有键盘的keyCode都能通过 .code数字 来实现on...原创 2019-11-16 15:08:40 · 229 阅读 · 0 评论 -
cli项目目录
读目录node_modules : 项目的依赖包public : 项目的静态资源文件夹 【 生产环境下的,webpack不编译 】src: 源代码开发目录assets 项目的静态资源文件夹 【 开发环境下的,webpack会编译 】components 存放组件【 公共组件 】App.vue [ App组件 ] , 一个vue文件【 单文件组件 】就是一个组件单文件组件,...原创 2019-10-26 17:42:33 · 300 阅读 · 0 评论 -
前端框架发展历史及MV*
前端框架发展历史html html [1990]----> html5 [2008.1.12]css css 1.0 1996 css 2.0 1998 css 3.0 2001EcmaScript 1997年诞生 2015 EcmaScript 2015 2016 EcmaScript 2016 dart语言 vs ...原创 2019-10-17 17:46:49 · 433 阅读 · 0 评论 -
Vue指令
一、模板的用法用法属性前加 v (指令【 借鉴angular 】)js的支持性null 和 undefined 是不会显示的,其他数据类型都是支持的,可以显示的挂载在window身上的全局属性,我们都不能用的: 比如; console alertmustache语法中 不写流程控制forifwhiledo…whilemustache(模板 {{ }} )语法中支持三元表达...原创 2019-10-18 21:09:04 · 265 阅读 · 0 评论 -
axios和fetch
axios第三方封装库https://www.npmjs.com/package/axios在html中加上 <script src=“https://unpkg.com/axios/dist/axios.min.js”></script>特点1.它在浏览器中创建的是浏览器对象2.它底层是用Node.js中的http模块实现的3 支持Promise4.可以...原创 2019-10-22 17:58:39 · 168 阅读 · 0 评论