![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue学习
_花开蒂落_
这个作者很懒,什么都没留下…
展开
-
vue点名器
<template> <div style="margin-bottom:20px;border: 1px solid #333; width: 300px; height: 100px; color:red;font-size:20px;text-align:center;line-height:100px"> {{ choiceItem }} </div> <el-button @click="choiceCli.原创 2021-07-13 15:49:08 · 416 阅读 · 0 评论 -
vue中常用的指令(了解即可)
v-once 只执行一次,不跟数据的改变而改变,通过v-once来进行来使双括号绑定值不去改变 v-html v-text和双括号解析相同,v-html可以解析html代码,v-text只能解析文本 v-pre 跟<pre>标签显示方法相同 v-cloak 相当于一个遮挡物,在vue解析之前v-cloak显示,解析之后v-cloak不显示 应用场景:在解析之前{{message}}不能完全显示,只会显示出定义内容,这样对用户不友好,所以使用[v-cloak]{dispaly:none},原创 2021-04-07 18:23:27 · 52 阅读 · 0 评论 -
浅读vue组件(五)——兄弟组件的传递,中央事件总线
兄弟组件的传递方法很多,坑也比较多,在实际项目开发中,我使用过,父传子,子再传父的,多次传递,可以实现兄弟组件间的传递,这种方法不说了,没什么精髓,而且处理的比较慢,我介绍另一种兄弟组价的传递方法——中央事件总线 &&&&&&&&&&&&开发中很常用,尤其是想改变公共的header中的头像数据时经常会...原创 2019-12-31 11:22:17 · 235 阅读 · 0 评论 -
vue中watch简单了解
watch主要是用来监听数据变化,通过新数据和旧数据相比较,实时监听数据的变化 data(){ return{ pageNo: 1, } } watch:{ pageNo: function(oldVal, newVal) { //之前的数据 console.log("oldVal"); //变化之后的数...原创 2019-12-13 14:37:31 · 127 阅读 · 0 评论 -
父子组件调用总结
父组件给子组件传递数据 父——子==>props直接传递,但是在传递的时候需要在组件上进行绑定,:tableData=tableData,props:["tableData"] 子——父==>this.$emit("pageNoFun",val),在组件上绑定@pageNoFun="pageNoFun",pageNoFun(data){},data的值就是val的值 兄弟组件之间...原创 2019-12-11 10:27:35 · 98 阅读 · 0 评论 -
vue实践——使用e.target.dataset实现tab切换
前几篇文章曾经说到过vue实现tab切换的方法,详见https://blog.csdn.net/yt412182782/article/details/99291751 今天给大家介绍另一种实现方式 template methods data 实现效果 这种方法的关键点在index的值,index的值是通过data-index控制的,e.target.dataset.i...原创 2019-08-26 17:42:47 · 1821 阅读 · 0 评论 -
vue实践——tab切换
原生js的tab切换思路是这样的: 1.先将导航栏循环,得到每个单独的导航栏项 2.将循环的导航栏项进行点击 3.再进行一步循环,其他兄弟元素隐藏,拥有当前index值显示出来,当前类名改变,其他的类名变回公共类名 原生js的tab切换基本就是两步循环,一次循环导航,一次循环内容,两步嵌套实现切换 jquery的tab切换思路和原生完全一样。 进入正题~~~~ vue是MVVM框架,...原创 2019-08-12 11:25:55 · 731 阅读 · 0 评论 -
用node搭建简易服务器vue和socket.io完成一对多聊天功能
领导给我安排个工作,让我自己研究一下前端自己完成页面聊天功能,我就在网上找了多个,不是太过复杂,就是实用性讲解不全 我结合这些,研究了一个,和他们类似的 先说一下思路: 1.先要安装几个依赖 2.建立服务端,在vue项目中服务端就是单独建立一个文件夹,然后js文件(详见下文) 3.建立客户端 4.建立联系 1.安装依赖 npm install -s socket.io npm i...原创 2019-08-13 18:14:42 · 742 阅读 · 0 评论 -
浅读vue组件(四)——$ref
一、将字组件的方法传递给父组件 ref 加在子组件上,用this.$refs.ref值获取到的是组件实例,可以使用组件的所有方法。在使用方法的时候直接this.$refs.ref值.方法() 就可以使用了。 子组件: 父组件想使用子组件的方法: 先给子组件起个名字,利用ref给组件起名字 点击执行parent方法 parent方法: this.$refs.layer ...原创 2019-08-06 15:30:42 · 168 阅读 · 0 评论 -
浅读vue组件(三)——$emit
父组件给子组件传递数据使用props, 子组件给父组件传递数据就需要使用内置$emit触发自定义的事件 上例子: ~~~~~~~~~~~~~~~~~~~子组件~~~~~~~~~~~~~~~~~~~~~~~~~~ 这是个弹出框,点击取消和确定的时候执行并将数据传递给父组件: hideData方法: 利用内置的$emit将fieldClose传递给父组件 ~~~~~~~~~~...原创 2019-08-06 10:37:11 · 132 阅读 · 0 评论 -
浅读vue组件(二)——prop
通过 Prop 向子组件传递数据 官网文档上写了这样一句话:早些时候,我们提到了创建一个博文组件的事情。问题是如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话,它是没有办法使用的。这也正是 prop 的由来。 官网文档很明确的说了,向组件传递标题或内容的数据,prop的作用就是向子组件传递数据。 传递的方式 利用props选项传递 该组件可以应用父组件拿到的p...原创 2019-08-06 10:14:17 · 102 阅读 · 0 评论 -
浅读vue组件(一)
组件是可复用的 Vue 实例,且带有一个名字。 1.先创建一个组件,单页面组件, 2.在要引用的页面中import引入 3.再在components中将单页面的名称引入 4.在要用的位置引用 ...原创 2019-07-29 10:51:59 · 65 阅读 · 0 评论