- 什么是路由?路由,其实就是指向的意思。例如:当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容。Home按钮 => home 内容, about按钮 => about 内容,也可以说是一种映射. 所以在页面上有两个部分,一个是点击部分,一个是点击之后,显示内容的部分。点击之后,怎么做到正确的对应,比如,我点击hom... 什么是路由?路由,其实就是指向的意思。例如:当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容。Home按钮 => home 内容, about按钮 => about 内容,也可以说是一种映射. 所以在页面上有两个部分,一个是点击部分,一个是点击之后,显示内容的部分。点击之后,怎么做到正确的对应,比如,我点击hom...
- 异步组件:vue的一种性能优化的方法,可以实现组件的按需加载组件通过import函数引用,什么时候需要什么时候加载有利于项目的性能优化,提高页面的加载速度路由懒加载就是使用了异步组件的原理规则:使用import引入components: {IsAsyncDemo: () => import(‘./IsAsyncD.vue’)},ex:点击按钮才加载组件<template> <div> ... 异步组件:vue的一种性能优化的方法,可以实现组件的按需加载组件通过import函数引用,什么时候需要什么时候加载有利于项目的性能优化,提高页面的加载速度路由懒加载就是使用了异步组件的原理规则:使用import引入components: {IsAsyncDemo: () => import(‘./IsAsyncD.vue’)},ex:点击按钮才加载组件<template> <div> ...
- 目录slot 介绍 2.6.0以下版本2.6.0及以上版本作用域插槽说明$slots 属性slot 在组件开发中的使用slot 介绍 vue 对于前端的重要性不言而喻,而插槽对于 vue 的重要性亦是如此,在高阶组件的封装中离不开插槽的使用,所以学会使用 slot 对前端来讲很重要。官网说:Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范... 目录slot 介绍 2.6.0以下版本2.6.0及以上版本作用域插槽说明$slots 属性slot 在组件开发中的使用slot 介绍 vue 对于前端的重要性不言而喻,而插槽对于 vue 的重要性亦是如此,在高阶组件的封装中离不开插槽的使用,所以学会使用 slot 对前端来讲很重要。官网说:Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范...
- 文章目录1.provide和inject1.1基本使用1.2如何处理响应式数据2.全局事件总线mitt库2.1安装mitt库,封装eventbus.js工具类2.2在其中一个组件中触发事件2.2在该组件的兄弟组件或者兄弟组件的子组件中监听该事件1.provide和injectprovide/inject主要适用于在一些深入嵌套的组件中,子组件想要获取父组件的部分内容的情况,此时可以在父组件中... 文章目录1.provide和inject1.1基本使用1.2如何处理响应式数据2.全局事件总线mitt库2.1安装mitt库,封装eventbus.js工具类2.2在其中一个组件中触发事件2.2在该组件的兄弟组件或者兄弟组件的子组件中监听该事件1.provide和injectprovide/inject主要适用于在一些深入嵌套的组件中,子组件想要获取父组件的部分内容的情况,此时可以在父组件中...
- VUE基础篇(双向绑定)1、v-model的使用v-model 用在表单中,与数据是双向绑定关系,相当于表单绑定的vue实例中data的数据改变了,表单的渲染也会改变,同样操作表单,改变了表单的数据,相应的vue实例中data的数据也会发生相应的改变,这种页面渲染的表单数据和vue实例的data数据互相影响,任何一方改变都会导致另一方数据的改变就是数据的双向绑定下面介绍几种常见的表单数据绑定... VUE基础篇(双向绑定)1、v-model的使用v-model 用在表单中,与数据是双向绑定关系,相当于表单绑定的vue实例中data的数据改变了,表单的渲染也会改变,同样操作表单,改变了表单的数据,相应的vue实例中data的数据也会发生相应的改变,这种页面渲染的表单数据和vue实例的data数据互相影响,任何一方改变都会导致另一方数据的改变就是数据的双向绑定下面介绍几种常见的表单数据绑定...
- 文章目录修饰符1.事件修饰符2.按键修饰符修饰符1.事件修饰符vue中提供的事件修饰符一共有4种.stop:用来阻止事件冒泡(防止事件向父标签传递).prevent:用来阻止标签的默认行为.self:只监听自身标签触发的事件.once:该事件只触发一次语法:@事件名.事件修饰符=“事件处理函数”例:@click.stop=“test”,给click加了一个stop修饰的事件具体代码内容<!D... 文章目录修饰符1.事件修饰符2.按键修饰符修饰符1.事件修饰符vue中提供的事件修饰符一共有4种.stop:用来阻止事件冒泡(防止事件向父标签传递).prevent:用来阻止标签的默认行为.self:只监听自身标签触发的事件.once:该事件只触发一次语法:@事件名.事件修饰符=“事件处理函数”例:@click.stop=“test”,给click加了一个stop修饰的事件具体代码内容<!D...
- Class 与 Style 绑定绑定HTML Class(类名)对象语法数组语法用在组件上绑定内联样式对象语法数组语法自动添加前缀多重值truthy 解释官方文档介绍得很详细;建议看官方文档官方文档操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用v-bind处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 ... Class 与 Style 绑定绑定HTML Class(类名)对象语法数组语法用在组件上绑定内联样式对象语法数组语法自动添加前缀多重值truthy 解释官方文档介绍得很详细;建议看官方文档官方文档操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用v-bind处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 ...
- 又来学习源码系列,今天就看一下vue中的过滤器具体是怎么实现的,我觉得这是一个不常用但是很重要的知识点,开冲!01 前言过滤器实质不改变原始数据,只是对数据进行加工处理后返回过滤后的数据再进行调用处理。我们看一下官方的定义:Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应... 又来学习源码系列,今天就看一下vue中的过滤器具体是怎么实现的,我觉得这是一个不常用但是很重要的知识点,开冲!01 前言过滤器实质不改变原始数据,只是对数据进行加工处理后返回过滤后的数据再进行调用处理。我们看一下官方的定义:Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应...
- 文章目录01.Vue声明式渲染02.MVVM03.Vue使用相关问题04.插值表达式05.事件06.操作标签内容01.Vue声明式渲染<body> <div id="#app"> {{msg}} </div> <script src="js/vue.js"></script> <script> new Vue({ el:"#app", data:{ msg:"Hello!V... 文章目录01.Vue声明式渲染02.MVVM03.Vue使用相关问题04.插值表达式05.事件06.操作标签内容01.Vue声明式渲染<body> <div id="#app"> {{msg}} </div> <script src="js/vue.js"></script> <script> new Vue({ el:"#app", data:{ msg:"Hello!V...
- Vue侦听器1、Vue侦听器2、value类型2.1、value为函数类型2.2、value为字符串类型2.3、value为对象类型3、key类型(键类型)3.1、正常键值3.2、字符串类型4、vm.$watch5、vm.$watch返回值1、Vue侦听器vue配置对象中的一个属性,侦听属性,它是响应数据变化,这里的数据指的是data和computed中的数据, 相当于监视数据,当数据发生变... Vue侦听器1、Vue侦听器2、value类型2.1、value为函数类型2.2、value为字符串类型2.3、value为对象类型3、key类型(键类型)3.1、正常键值3.2、字符串类型4、vm.$watch5、vm.$watch返回值1、Vue侦听器vue配置对象中的一个属性,侦听属性,它是响应数据变化,这里的数据指的是data和computed中的数据, 相当于监视数据,当数据发生变...
- 文章目录computed:1、基本使用:1.1 应用场景:1.2 代码位置:1.3 值:2、复杂操作-结合data中数据:3、计算属性写法演变:3.1 计算属性的setter和getter:① 完整的计算属性写法:属性+方法② 计算属性一般只有get方法,是只读属性。所以一般写法为:③ 语法糖---简化写法:4、项目中实例:computed:1、基本使用:在computed中定义一个函数(看... 文章目录computed:1、基本使用:1.1 应用场景:1.2 代码位置:1.3 值:2、复杂操作-结合data中数据:3、计算属性写法演变:3.1 计算属性的setter和getter:① 完整的计算属性写法:属性+方法② 计算属性一般只有get方法,是只读属性。所以一般写法为:③ 语法糖---简化写法:4、项目中实例:computed:1、基本使用:在computed中定义一个函数(看...
- 我之前学了学angular 发现angular和vue的指令有点类似先说一下new Vue({ el: "#box", // element(元素) 当前作用域 data(){ return { //用return返回对象 msg: "122" } ... 我之前学了学angular 发现angular和vue的指令有点类似先说一下new Vue({ el: "#box", // element(元素) 当前作用域 data(){ return { //用return返回对象 msg: "122" } ...
- 学习vue有一段时间了,简单谈一下关于vue生命周期,因为这个还是很重要的,理解了vue的生命周期对于以后我们做复杂的大型项目的是很有帮助的,写在前面,本人也是搬运工一枚,在网上搜集的资料然后自己动手操作,如有理解错误的地方恳请告知修改。 首先展示一张关于vue生命周期的图示 Vue2.0的生命周期钩子一共有10个,同样结合官方文档作出了下表生命周期钩子详细beforeCreate在实例初... 学习vue有一段时间了,简单谈一下关于vue生命周期,因为这个还是很重要的,理解了vue的生命周期对于以后我们做复杂的大型项目的是很有帮助的,写在前面,本人也是搬运工一枚,在网上搜集的资料然后自己动手操作,如有理解错误的地方恳请告知修改。 首先展示一张关于vue生命周期的图示 Vue2.0的生命周期钩子一共有10个,同样结合官方文档作出了下表生命周期钩子详细beforeCreate在实例初...
- 因为项目需要用到富文本编辑器众多富文本编辑器中,选择了 Tinymce,根据项目需要对Tinymce 进行扩展和增强插件,记录一下,并同时分享给需要帮助的人。 因为项目需要用到富文本编辑器众多富文本编辑器中,选择了 Tinymce,根据项目需要对Tinymce 进行扩展和增强插件,记录一下,并同时分享给需要帮助的人。
- node的安装与卸载今天遇到个问题 使用npm命令时报错显示栈溢出,所以将node重装了一下,一.卸载node:1.在程序与功能里卸载node.js,然后删除node相关文件夹,此次安装我将node安装在C盘里,将他的全局缓存指向在D盘的nodejs文件夹中(node_cache\node_config)2.删除环境变量和用户变量中的参数3. 执行一下npm -v 看看还有没有反应二.安装n... node的安装与卸载今天遇到个问题 使用npm命令时报错显示栈溢出,所以将node重装了一下,一.卸载node:1.在程序与功能里卸载node.js,然后删除node相关文件夹,此次安装我将node安装在C盘里,将他的全局缓存指向在D盘的nodejs文件夹中(node_cache\node_config)2.删除环境变量和用户变量中的参数3. 执行一下npm -v 看看还有没有反应二.安装n...
上滑加载中
推荐直播
-
DeepSeek 深入浅出白话解读
2025/02/12 周三 17:00-18:00
Tim-华为云中国区AI解决方案总监
DeepSeek的来龙去脉,为什么DeepSeek那么强?哪些是它的领先优势?它是怎么发展过来的?在华为云上能不能用到DeepSeek?本节课将一一解读。
即将直播
热门标签