Vue
Vue从入门到精通
blag_
这个作者很懒,什么都没留下…
展开
-
Vue3.0-获取属性
在组合式API setup中获得属性。在setup语法糖中获得属性值。原创 2022-09-20 23:08:17 · 1515 阅读 · 0 评论 -
Vue3.0-Teleport
to的值可以指定body 这样就是在body渲染新的div,也可以指定index.html中的div,id就是#,class就是.下面就是teleport实现模态弹窗。原创 2022-09-20 22:44:32 · 201 阅读 · 0 评论 -
Vue3-生命周期函数
在Vue3.x中,新增了一个setup生命周期函数,setup执行的时机是在beforeCreate生命函数之前执行,因为在这个函数中不能通过this来获取实例的;同时为了命名的统一,将beforeDestory改名为beforeUnmount,destoryed改名为unmounted。Vue中每个组件都是独立的,每个组件都有一个属于它的生命周期,从一个组件创建、数据初始化、挂载、更新、销毁、这就是一个组件所谓的生命中周期。Vue2.x中的生命周期。来访问组件的生命周期。原创 2022-09-20 22:32:59 · 871 阅读 · 0 评论 -
Vue3.0-监听属性
注意:监听reactive定义的响应式数据的时候,会强制开启深度监视并且oldvalue无法正确获取。监听reactive定义的响应式数据的某一个值的时候:deep 配置有效。与Vue2.x中的watch配置功能一直。原创 2022-09-20 22:27:57 · 469 阅读 · 0 评论 -
Vue3.0-计算属性computed
然后在template标签中要使用计算结果的地方使用{{name}} 就可以使用最后的返回值了。retrun 返回值,也就是计算结果。Vue3.0中的computed的功能与2.0中的计算函数功能一样。在引入之后,设计箭头函数。原创 2022-09-16 23:17:42 · 229 阅读 · 0 评论 -
Vue3.0-ref、reactive实现setup函数中的响应式数据
ref函数可以让在setup函数中的数据实现响应式数据,其基本原理就是监听了value值的改变,然后劫持value的setter和getter函数。因此,如果实现的响应式数据,是一层又一层的引用数据的的话,会一直监听,劫持,这样效率就会非常的低下。所以,一般情况下ref函数实现的响应式数据就是基本数据。引入:案例:这样就实现了点击按钮,在页面没有刷新的情况下,图片完成了切换。原创 2022-09-16 23:11:33 · 228 阅读 · 0 评论 -
Vue3.0-setup函数
第一种是正常的在script中使用setup函数,然后给出数据、方法的返回值就可以使用对应的数据、方法,这种情况下,vue2.0中的生命周期函数,data,methods、计算属性,监听器等都可以正常使用,但是data和setup两个的优先级,setup优先级更高。第二种是在script标签中将setup当成一个属性,这是setup的一种语法糖,添加进去,然后再script中不再需要像setup函数一样需要返回对应数据、方法,组件中所有用到的:数据、方法等等,都要配置在setup中。原创 2022-09-16 22:56:59 · 486 阅读 · 2 评论 -
VueX 全局状态(数据)管理库
VueX是Vue团队为了方便组件之间的数据共享,借鉴了redux,用来来实现vue组件全局状态(数据)管理的一种机制.使用VueX易于开发和后期维护上都有很大的好处,引入方式:在下载脚手架的时候,可以选择引入,VueX中一共有5个对象可以使用:一、State1.State:创建state状态,状态就是那个存数据的对象2.组件中访问数据二、Getter1.Getter:类似组件中的计算属性,用来对创库数据进行计算,它会传入state对象供我们操作。原创 2022-09-15 00:55:39 · 218 阅读 · 0 评论 -
vue-网络代理
在vue项目中,经常需要将后端数据请求到vue项目中然后拿来使用并显示到页面上,但是后端服务器与我们的vue测试服务器是不一样的,因此我们请求数据的时候,往往需要进行跨域请求,如果后端是在egg框架上写的,那么就需要给egg框架配置跨域请求,这样就可以然后配置router,以及返回数据这样就可以得到了。这样在controller文件和router文件中分别配置,就完成了,这时,vue主页加载完成后,就会将返回的对象打印在控制台中,这完成了vue的前后端的初步交互。这样也一样完成了前后端的初步交互。原创 2022-09-09 20:14:35 · 573 阅读 · 0 评论 -
vue-组件的自定义事件
当满足条件后,直接调用this.$emit("事件名",fn接受的形参)就可以返回给父组件了,这个时候父组件的fn就会运行.Box1组件是事件源 myevent是Box1组件绑定的事件类型 fn是Box组件上面绑定的监听器。myevent由Box组件内部自己设计 什么时候触发:就在watch监听器里面写,fn要 myevent触发了就会运行 myevent事件什么条件下才会触发呢?事件源 target 事件类型type 监听器handler。原创 2022-09-08 01:22:36 · 116 阅读 · 0 评论 -
Vue-插槽
在vue中插槽就是子组件写上一个slot标签,然后父组件在使用子组件的时候,使用双标签,然后再双标签之中可以进行填充标签,比如HTML的标签,填充的标签,就在子组件的插槽中显示出来。在这个例子中,就显示了slot插槽数据的使用。原创 2022-09-08 00:52:50 · 189 阅读 · 0 评论 -
Vue中CSS相关技术
vue文件中可以出现多个style标签 凡是添加了scoped属性的,里面的选择器就会被修改 没添加scoped属性的就不会被修改。全局样式的写法:1.在.vue文件中的style中写的样式 打包后就是全局样式 2.写一个css文件 在项目中导入就是全局样式。如果全局样式出现了相同的选择器. 就看是哪个最后打包引入项目 哪个的优先级就最高。并且为添加了scoped的style中的样式选择器上添加一个属性选择器。把当前组件模板中的每一个元素添加一个相同的哈希值命名的属性名。原创 2022-09-08 00:38:45 · 96 阅读 · 0 评论 -
组件的属性的类型验证
这一个propos就是详细声明,其中一个数组包含了string和number两个数据类型,就是titile能够接受的数据类型,如果不是这两个类型中的一个,vue还是能正常运行只是会报出警告。这便是父组件和子组件,其中props:["title"] 就是组件的属性的简单声明。而且也可以将属性再划分为对象,添加一个default 写上默认值。组件的属性可以有多个只是在例子中只写了一个。原创 2022-09-06 22:45:59 · 115 阅读 · 0 评论 -
Vue脚手架下载和Vue-单文件组件
首先创建一个Vue项目,这一次的Vue项目不再使用cdn而是去npm社区下载vue脚手架,来在.vue文件中进行。注册的组件名不能跟vue中原生DOM重名,如onclick,注册的名字是驼峰,使用的时候就用连字符。4. 进入项目文件夹: cd app1 //进入项目文件夹,也可以直接在项目文件夹中打开终端。注册的组件使用的时候可以是双标签也可以是单标签:如果有插槽(参考博客:还没写)必须使用双标签。npm run build //生成的打包文件在dist中 用于项目上线。@代表了src目录的意思。原创 2022-09-06 22:11:34 · 1195 阅读 · 0 评论 -
Vue计算属性,过滤器,侦听器
computed是vue的计算属性,是根据依赖关系进行缓存的计算,只有在它的相关依赖发生改变时才会进行更新上面代码就使用了computed去进行计算,拼接然后得到完整的用户输入名字在上面代码运行时,会发现,当点击获得完整名字按钮后,再改写两个输入框中的内容,下面的box的内容不需要进行其他操作也会跟着改变,因为computed的每一个计算属性都会被缓存起来,只要依赖发生变化,就会重新进行计算,并且渲染。原创 2022-09-05 16:47:54 · 222 阅读 · 0 评论 -
Vue-条件渲染和循环渲染
条件渲染一共有两个v-if 和 v-show当设置为false时,他们都会使对应标签在浏览器中消失,true的时候都会出现,而两个条件渲染方法,虽然都是让标签在浏览器中消失,却有所不同。原创 2022-08-31 19:35:23 · 762 阅读 · 0 评论 -
Vue-样式绑定
实现效果就是点击后消失,再次点击出现。而上述案例中,一共用了几个知识点和DOM操作中的onclick是一样的然后再和data同级中写methods,再在里面编写函数,实现具体功能。原创 2022-08-31 18:47:39 · 184 阅读 · 0 评论 -
Vue的基础指令
{{}}是一种插值表达式 会执行js语法执行环境上面的{{hello}}就是将,Vuue对象中的data对象中的hello的值传入到div中去,前提是得用el去选中元素,选中元素就和dom操作的元素选择是差不多的,id用#,class用 . ,当然,hello也可以是对象,数组,函数等其他数据,导出数据方式,和js中的对应导出方式一样。............原创 2022-08-29 18:39:44 · 136 阅读 · 0 评论