Vue学习笔记
关注
分享
扫一扫
文章平均质量分 77
Vue.js——构建用户界面的渐进式框架
莫璃Moly
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Vue插槽
让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件—>子组件。 默认插槽、具名插槽、作用域插槽父组件中 子组件中 3.2 具名插槽 父组件中 子组件中 3.3 作用域插槽 理解 数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）父组件中 子组件中...原创 2022-07-12 09:09:45 · 200 阅读 · 1 评论 -
Vue脚手架配置代理
在vue.config.js中添加如下配置： 说明：编写vue.config.js配置具体代理规则：原创 2022-06-08 19:44:16 · 366 阅读 · 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 · 296 阅读 · 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 · 444 阅读 · 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 · 672 阅读 · 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 · 879 阅读 · 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 · 412 阅读 · 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 BackSpace keyCode 9 = Tab T原创 2021-12-09 19:28:51 · 525 阅读 · 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 · 1413 阅读 · 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 · 191 阅读 · 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 · 337 阅读 · 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 · 554 阅读 · 2 评论