Vue2.0
文章平均质量分 82
Vue相关内容
Continue丶
努力变得更好一点
展开
-
Vue:封装一个Toast
文章目录1.概述2.组件式封装3.插件式封装1.概述Toast(吐司),一个短期的弹出的会话,来告诉用户当前的操作是否合理。据说是因为烤吐司的时候会冒出一阵烟,然后过会烟又消失了,所以就是Toast这名字的由来。奇怪的知识增加了~2.组件式封装在vue项目中,我们可以通过组件的方式来简单的封装一个Toast,具体以下几个步骤。1.添加组件,写一个自己想要的风格这里我的例子就如上一个简单的弹窗2.在想用的组件内引用如上声明好的Toast子组件引用import Toast from "c原创 2021-05-21 15:18:06 · 1008 阅读 · 7 评论 -
Vue:Rutime-Compiler 和 Rutime-only的区别
文章目录1. 概述2. 简单介绍3. 进一步了解再进一步总结1. 概述在我们搭建脚手架的时候,它会需要我们选择是 Rutime-compiler安装还是 Rutime-only安装,如下。那它们是什么呢?又有什么区别呢?2. 简单介绍它们的区别其实就在于能否解析template内容Rutime-compiler:可以解析templateRutime-only:不能解析,但性能高,比Rutime-compiler小6kb内存3. 进一步了解让我们先了解Vue应用程序是如何运行起来的原创 2021-04-24 17:39:45 · 258 阅读 · 0 评论 -
Vue:插槽slot
文章目录1. 概述2. 基本使用3. 具名插槽1. 概述slot翻译为插槽,在生活中,我们也见过许多插槽,比如电源插座,USB插口等,这些都是插槽,它们起着各自的作用。在组件中,我们可以通过插槽slot来添加各自的功能,有助于增强组件的扩展性。比如在一个组件中,我们想多次调用,但每次调用组件后又想让它们有不同的地方,那么我们就可以在组件中预留插槽,然后在插槽中添加它们的不同。2. 基本使用<body> <script src='../js/vue.js'></原创 2021-04-23 11:07:27 · 179 阅读 · 1 评论 -
Vue:组件化
文章目录什么是组件化组件的基本使用组件创建的语法糖模板的分离写法父子组件子组件中的data为什么为函数父子组件通信什么是组件化面对一个非常复杂的问题时,我们不太可能直接解决,我们需要将问题拆解成许多小问题,然后依次解决小问题,最后整个大问题迎刃而解。其实组件化也就是这种思想,将页面拆分成一个个小的功能模块,完成属于自己的功能,那么整个页面的管理和维护就变得非常容易了。在vue.js中,组件化是非常重要的思想,它提供一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用.组件的基本使用原创 2021-04-23 00:57:50 · 437 阅读 · 4 评论 -
Vue: 计算属性computed
文章目录1. 什么是计算属性2. 计算属性的setter和getter3. 计算属性的缓存1. 什么是计算属性在模板中,我们可以通过直接使用插值语法来显示一些data中传来的数据,但有时候我们需要对数据进行一些转换再显示,或者需要拼接数据显示,这时候我们可以通过计算属性来实现。比如 我们可以通过拼接 姓 + 名 来组成 姓名显示。如下组成 李 白<body> <script src='../js/vue.js'></script> <div id=原创 2021-04-21 20:09:49 · 146 阅读 · 1 评论 -
Vue入门:(踩坑:Vue4.5.6引入elementui)
##今天用v4.5.6版本的Vue脚手架创建项目时选择了3.x的Vue.js版本。然后想引入elementui时报错#浏览器显示空白 检查报图示错误#而当我去掉element相关包后又运行正常,这时发现原来v4.5.6版本实例对象不一样了于是上网查询,发现了有遇到同样的问题的难友,他们最后都是通过删除当前版本,下载适应的版本最后成功解决,当我以为脱坑的时候,试了后发现仍然报错,深感绝望,决定重新去创建2.x版本。路过大佬们若有解决方法,欢迎留言。...原创 2020-12-03 00:33:36 · 563 阅读 · 2 评论 -
Vue入门:(v-for v-model)
v-for当需要将一个数组遍历或枚举一个对象循环显示时候,我常用的就是列表渲染指令v-for. 它需要结合着in 或者of来使用。例如<li v-for="(item,index) in list" >这里list是数组名,item为遍历的对象,index对应其下标v-model用于在表单类元素上双向绑定数据,例如在输入框上使用时,输入的内容会实时映射到绑定的数据上。<input type="text" placeholder="请输入任务" v-model="notec原创 2020-11-11 16:32:08 · 1137 阅读 · 1 评论 -
Vue入门:(v-show v-if v-bind)
v-show根据表达值的真假,切换元素的显示和隐藏(操纵的是display样式)<img v-show="表达式" />如果表达式为true,图片img显示如果表达式为false,图片img隐藏v-if根据表达值的真假,切换元素的显示和隐藏(操纵的是dom元素)<img v-if="表达式" />如果表达式为true,图片img显示如果表达式为false,图片img隐藏现在我们来写个简单的程序测试一下两者的区别<!DOCTYPE html>原创 2020-11-11 14:53:25 · 745 阅读 · 1 评论 -
Vue入门:v-on事件监听
Vue入门:v-onv-on就是绑定事件的监听器,具体事件类型由参数指定。基础用法v-on:(“方法名”)示例<button v-on:click="login"></button>v-on也可以简写以@代替<button @click="login"></button>var app =new Vue({ el:"#app", methods:{ login:function(){ // 逻辑代码原创 2020-11-10 20:26:49 · 431 阅读 · 1 评论 -
Vue入门:第一个程序
对于制作原型或学习,你可以这样使用最新版本:<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>对于生产环境,我们推荐链接到一个明确的版本号和构建文件,以避免新版本造成的不可预期的破坏:<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>如果你使用原生 ES Modules,这里也有一个兼容原创 2020-11-10 19:18:44 · 585 阅读 · 1 评论