![](https://img-blog.csdnimg.cn/9a7520a4d5f64764b381bb40899f610b.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue学习笔记
文章平均质量分 77
Vue.js——构建用户界面的渐进式框架
莫璃Moly
这个作者很懒,什么都没留下…
展开
-
Vue插槽
让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于父组件—>子组件。默认插槽、具名插槽、作用域插槽父组件中子组件中3.2 具名插槽父组件中子组件中3.3 作用域插槽理解数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。(games数据在Category组件中,但使用数据所遍历出来的结构由App组件决定)父组件中子组件中...原创 2022-07-12 09:09:45 · 141 阅读 · 1 评论 -
Vue脚手架配置代理
在vue.config.js中添加如下配置:说明:编写vue.config.js配置具体代理规则:原创 2022-06-08 19:44:16 · 247 阅读 · 0 评论 -
Vue全局事件总线
Vue全局事件总线1. 全局事件总线的作用2. 安装全局事件总线3. 使用事件总线4. 在beforeDestroy钩子中,用$off解绑当前组件所用到的事件5. 样例1. 全局事件总线的作用一种组件间通信方式,适用于任意组件间通信。2. 安装全局事件总线new Vue({ ...... beforeCreate(){ Vue.prototype.$bus=this //安装全局事件总线,$bus就是当前应用的vm }, ......})3. 使用事件总线接收数据:A组件想接收数原创 2022-05-24 09:47:29 · 235 阅读 · 0 评论 -
Vue组件02
文章目录脚手架文件结构关于不同版本的Vue:vue.config.js配置文件脚手架文件结构|-- node_modules|-- public| |-- favicon.ico:页签图片| |-- index.html:主页面|-- src| |-- assets:存放静态资源| | |-- logo.png| |-- component:存放组件| | |–HelloWorld.vue| |-- App.vue:汇总所有组件| |-- m原创 2022-01-08 09:39:11 · 255 阅读 · 0 评论 -
Vue组件01
文章目录1. 非单文件组件1.1 局部非单文件组件1.2 全局非单文件组件2. 组件的嵌套1. 非单文件组件创建组件的三个步骤:第一步:定义组件第二步:注册组件第三步:编写组件标签1.1 局部非单文件组件<script> //第一步:创建组件 //创建school组件 const school=Vue.extend({ //一定不要写el配置项,因为最终的所有组件都要被一个vm管理,由vm决定服务于哪个容器 //el:'#原创 2021-12-15 21:15:27 · 574 阅读 · 0 评论 -
Vue生命周期函数
文章目录1. 生命周期2. beforeCreate生命周期函数3. created生命周期函数4. beforeMount生命周期函数5. mounted函数1. 生命周期2. beforeCreate生命周期函数这时候如果这样写,会报错。<script> var vm = new Vue({ el: '#app', data: { msg:'OK' }, methods:{原创 2021-12-13 21:18:24 · 548 阅读 · 0 评论 -
Vue自定义指令
文章目录1. 自定义全局指令1. 自定义全局指令,让文本框获取焦点2. 自定义全局指令,设置文字样式3. 自定义指令的时候,使用传递的参数值1. 自定义全局指令1. 自定义全局指令,让文本框获取焦点自定义一个指令"v-focus"<input type="text" class="form-control" v-model="keywords" id="search" v-focus>使用Vue.directive()定义全局指令。其中,参数1是指令名称,在定义的时候,指令名称前面原创 2021-12-10 10:39:49 · 318 阅读 · 0 评论 -
Vue自定义按键修饰符
文章目录1. vue提供的按键码2. 其他按键码3. 自定义全局按键修饰符1. vue提供的按键码.enter.tab.delete.esc.space.up.down.left.right示例代码:<input type="text" class="form-control" v-model="name" @keyup.enter="add()">2. 其他按键码keyCode 8 = BackSpace BackSpacekeyCode 9 = Tab T原创 2021-12-09 19:28:51 · 389 阅读 · 0 评论 -
Vue中过滤器的使用
文章目录1. 全局过滤器的基本使用2. 案例1. 全局过滤器的基本使用过滤器定义语法Vue.filter(‘过滤器的名称’,function(){})过滤器中的function,第一个参数已经规定死了,永远都是过滤器管道符前面传递过来的数据<!DOCTYPE html><html><head><meta charset="utf-8"><title>过滤器的基本使用</title><script src="ht原创 2021-12-08 21:13:44 · 1311 阅读 · 0 评论 -
Vue.js学习笔记03
文章目录1. v-for指令的四种使用方式1.1 使用v-for循环普通数组1.2 使用v-for循环对象数组1.3 使用v-for循环对象1.4 使用v-for迭代数字2. v-for中key的使用3. v-if和v-show的使用1. v-for指令的四种使用方式1.1 使用v-for循环普通数组<div id="app"> <p v-for="(item,i) in list">{{i}}----{{item}}</p></div>&原创 2021-12-07 21:20:57 · 98 阅读 · 0 评论 -
Vue.js学习笔记02
文章目录1. 通过属性绑定,为元素设置class类样式1.1 直接传递一个数组1.2 在数组中使用三元表达式1.3 在数组中使用对象1.4 直接使用对象2. 使用内联样式2.1 直接在元素上通过:style的形式,书写对象2.2 将样式对象,定义到data中2.3 在:style中通过数组,引用多个data上的样式对象1. 通过属性绑定,为元素设置class类样式首先定义几个class类。<style> .red{ color: red; } .th原创 2021-12-07 18:56:42 · 268 阅读 · 0 评论 -
Vue.js学习笔记01
文章目录一、v-cloak v-text v-html的使用1. v-cloak2. v-text3. v-html二、v-bind指令一、v-cloak v-text v-html的使用1. v-cloak使用v-cloak能够解决插值表达式闪烁的问题。例如,当不使用v-cloak时,如果网速过慢,加载过程中就会显示{{msg}}。<div id="app"> <p>{{msg}}</p></div><script> var原创 2021-06-11 16:43:55 · 224 阅读 · 2 评论