![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue2、vue3的教程
文章平均质量分 67
茶茶只知道学习
这个作者很懒,什么都没留下…
展开
-
vue3的组件间的v-model参数
vue3中,如何实现父子组件的数据双向传递,用v-model并携带参数,实时更新数据的那种原创 2024-03-12 00:41:34 · 401 阅读 · 0 评论 -
动态组件、keep-alive的使用及自定义指令
1.什么是自定义指令vue 官方提供了v-text、v-for、 v-model、 v-if 等常用的指令。除此之外 vue 还允许开发者自定义指令。2. 自定义指令的分类。原创 2023-04-24 22:12:32 · 480 阅读 · 0 评论 -
ref的使用与数组中的最全的使用方法
ref 用来辅助开发者在不依赖于 jQuery 的情况下,在vue中获取 DOM 元素或组件的引用。每个vue的组件实例上,都包含一个$refs 对象,里面存储着对应的 DOM 元素或组件的引用。默认情况下,组件的 $refs 指向一个空对象。拿当前的DOM对象:效果显示:App根组件改变它的字体颜色:注意:ref的值不能冲突,不然后面的DOM对象会覆盖之前获得的对象,最终获取的是最后一个对象。原创 2023-04-24 02:00:00 · 2823 阅读 · 0 评论 -
vue组件之间的数据共享
父组件向子组件共享数据需要使用自定义属性。组件之间如何实现共享数据,父传子、兄弟组件等的数据传输原创 2023-04-23 18:08:52 · 470 阅读 · 0 评论 -
vue组件的生命周期
mounted时期:已经把内存中的HTML结构,成功的渲染到了浏览器之中。mounted时期:已经把内存中的HTML结构,成功的渲染到了浏览器之中。destroyed时期:组件已经被销毁,此组件在浏览器中对应的DOM结构已被完全移除!beforeUpdate时期:将要根据变化过店、最新的数据,重新渲染组件的模板结构。beforeUpdate时期:将要根据变化过店、最新的数据,重新渲染组件的模板结构。updated时期:已经根据最新的数据,完成了组件DOM结构的重新渲染。了当前组件的DOM结构。原创 2023-04-23 16:21:34 · 455 阅读 · 0 评论 -
在vue组件中,怎么解决组件之间的样式冲突问题
① 单页面应用程序中,所有组件的DOM结构,都是基于唯一的index.html页面进行呈现的。默认情况下,写在.vue组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题。② 每个组件中的样式,都会影响整个index.html页面中的DOM元素。不加时,更准确的说,在父组件中不是它的亲儿子,没有自动添加该属性。原创 2023-04-23 13:01:43 · 223 阅读 · 0 评论 -
使用vue.component全局注册组件、props的使用
通过components注册的是私有子组件例如:在组件A的 components 节点下,注册了组件F。则组件F只能用在组件A中;不能被用在组件C中。原创 2023-04-20 15:31:17 · 800 阅读 · 0 评论 -
vue-cli的使用和单页面应用程序、使用vue-cli脚手架创建vue项目步骤
pplication)简称SPA,顾名思义,指的是一个Web网站中只有唯一的一个HTML页面,所有的功能与交互都在这唯一的一个页面内完成。在工程化的项目中,vue 要做的事情很单纯:通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。vue-cli是Vue.js开发的标准工具。它简化了程序员基于webpack创建工程化的Vue项目的过程。components 文件夹: 程序员封装的、可复用的组件,都要放到 components 目录下。App.vue 是项目的根组件。原创 2023-04-20 14:45:22 · 341 阅读 · 0 评论 -
axios的使用,axios的get请求、post请求方式、put请求方式
axios (发音:艾克C奥斯)是前端圈最火的、专注于数据请求的库。react/vue官方都推荐使用axios发送ajax请求,是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。原创 2023-04-20 02:44:28 · 494 阅读 · 0 评论 -
vue中的计算属性的概念与使用方法
计算属性指的是通过一系列运算之后,最终得到一个属性值。这个动态计算出来的属性值可以被模板结构或 methods 方法使用。el:'#app'data: {r:0,g:0,b:0},},methods: {},})案例:效果演示:计算属性的特点:定义的时候,要被定义为“方法”在使用计算属性的时候,当普通的属性使用即可实现了代码的复用只要计算属性中依赖的数据源变化了,则计算属性会自动重新求值!原创 2023-04-20 01:47:37 · 102 阅读 · 0 评论 -
vue的watch侦听器、watch的属性 immediate(侦听属性)、deep(侦听一个对象)
watch侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作。watch: {//监听username值的变化// newVal 是"变化后的新值”,oldVal 是"变化之前的旧值"})案例:效果如下:(改变值后,控制台的输出)原创 2023-04-20 01:15:35 · 469 阅读 · 0 评论 -
vue2中的(filters)局部过滤器与全局过滤器、过滤器传参、调用多个过滤器
在filters节点下定义的过滤器,称为“私有过滤器”,因为它只能在当前 vm 实例所控制的 el 区域内使用。dayjs.min.js插件能够快速实现时间格式化,直接百度dayjs可以搜索或下载文件和查看官方文档;过滤器仅在 vue 2.x 和 1.x 中受支持,在 vue 3.x 的版本中剔除了过滤器相关的功能。如果全局过滤器和私有过滤器名字一致, 此时按照“就近原则”,调用的是”私有过滤器”;是vue为开发者提供的功能,常用于文本的格式化。原创 2023-04-19 02:54:58 · 1711 阅读 · 0 评论 -
v-model实现双向绑定、v-show、v-if、v-else-if、v-for的使用
当数据源里的username的值改变,v-model 和 v-bind 绑定的元素的值都会发生改变,但是如果改变 v-bind 绑定的元素里的值,数据源里的username的值不会发生改变,而v-model 会。vue提供了v-model双向数据绑定指令,用来辅助开发者在不操作DOM的前提下,快速获取表单的数据。注意: v-else-if 指令必须配合v-if指令一起使用, 否则它将不会被识别!注意: v-else 指令必须配合v-if指令一起使用,否则它将不会被识别! v-for、v-show原创 2023-04-18 22:52:38 · 1360 阅读 · 0 评论 -
v-on指令及简写形式、用this访问数据、事件修饰符(.prevent、.stop、.capture、.once、.self)、按键修饰符@keyup的使用
1.v-on事件绑定指令vue提供了v-on事件绑定指令,用来辅助程序员为DOM元素绑定事件监听。原生DOM对象有onclick. oninput. onkeyup等原生事件,替换为vue的事件绑定形式后,分别为: v-on:click、v-on:input、 v-on:keyup。在事件处理函数中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。因此,vue提供了事件修饰符的概念,来辅助程序员更方便的对事件的触发进行控制。常用的5个事件原创 2023-04-18 18:15:46 · 605 阅读 · 0 评论 -
v-text与{{ }}、v-html的区别、v-bind指令
内容渲染指令用来辅助开发者渲染DOM元素的文本内容。常用的内容渲染指令有如下3个:v-text指令的缺点:会覆盖元素内部原有的内容!{{ }}插值表达式:在实际开发中用的最多,只是内容的占位符,不会覆盖原有的内容!v-html指令的作用:可以把带有标签的字符串,渲染成真正的HTML内容!原创 2023-04-18 01:38:06 · 710 阅读 · 0 评论 -
vue的基本用法、vue调试工具、vue指令分类
基本使用步骤① 导入vue.js的script脚本文件② 在页面中声明一个将要被vue所控制的DOM区域③ 创建vm实例对象(vue实例对象)-- 2.在页面中声明一个将要被vue所控制的DOM区域-->-- 1.导入vue.js的script 脚本文件-->// 3.创建vm实例对象(vue 实例对象)// 3.1指定当前vm实例要控制页面的哪个区域// el属性是固定的写法,表示当前vm实例要控制页面上的哪个区域,接收的值是一个选择器。原创 2023-04-18 01:06:58 · 78 阅读 · 0 评论 -
什么是vue、vue特性、双向数据绑定和单向数据绑定以及插件安装、MVVM原理
官方给出的概念: Vue (读音/vju:/,类似于view)是一套用于构建用户界面的前端框架。MVVM是vue实现数据驱动视图和双向数据绑定的核心原理。MVVM指的是Model. View 和ViewModel,它把每个HTML页面都拆分成了这三个部分,原创 2023-04-17 19:16:29 · 76 阅读 · 0 评论 -
vue2工程化的概念
前端工程化指的是:在企业级的前端项目开发中,把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。企业中的Vue项目和React项目,都是基于工程化的方式进行开发的。好处:前端开发自成体系,有一套标准的开发方案和流程。原创 2023-04-16 13:38:46 · 65 阅读 · 0 评论