vue学习笔记
关注
分享
扫一扫
文章平均质量分 74
vue学习笔记--网易云课程
卷毛崽
这个作者很懒，什么都没留下…
展开
-
79-高阶
这里写目录标题mixinmixinMixin 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个 mixin 对象可以包含任意组件选项。当组件使用 mixin 对象时，所有 mixin 对象的选项将被“混合”进入该组件本身的选项。mixin会和原本组件的选项里的数据合并(例如data,methods之类)，组件的选项优先级高于mixin,如果有相同的会被替换，如果是生命周期的钩子函数，会新执行mixin再执行组件里的钩子函数<!DOCTYPE html><html原创 2021-11-21 22:33:56 · 529 阅读 · 0 评论 -
vue布局组件(router-view)
网页中，很常见的是头部导航栏、底部链接、面包屑或者其他部分，在网站的每一个页面都会出现，并且样式统一可以使用vue-router提供的router-view来构成一个布局组件，将头部导航栏、底部链接等写在页面上固定渲染，切换页面时，只切换中间内容部分思路：1、创建一个layout文件，放置一个router-view标签即可，每一个路由请求默认都是从这里进去跳转，这里是示例每个页面都带一个面包屑组件（一般是app.vue，这里我自定义了一个）//layout文件<template>原创 2021-11-05 14:42:32 · 7581 阅读 · 0 评论 -
65-68 watch侦听 补充知识点
65-68 watch侦听 补充知识点watch侦听器单项数据流（补充）动态绑定传参便携写法no props 主要用于传递样式watch侦听器watch可以监听data中的数据，自带两个参数，current,prev分别是之前和之后的值掌握watch和计算属性的区别watch更适合异步的操作，适合一个属性变化引起一系列变化的情况计算属性:需要通过计算得到，直接计算结果 watch:{ price(current,prev){原创 2021-10-10 22:17:50 · 220 阅读 · 0 评论 -
62- 生命周期
这里写目录标题生命周期生命周期生命周期函数：在一个组件的生命周期范围内某一阶段自动执行的函数vue 官方生命周期图示原创 2021-10-08 23:39:24 · 236 阅读 · 0 评论 -
56-61 组件插槽、动态组件，异步组件
插槽的基本使用先写一个组件，然后将按钮注释，改为插槽，其中插槽可以编写默认内容，在应用组件时，将自定义元素写在组件中，就会替换slot的标签，十分灵活 <body> <div id="app"> <lk-box><button>点我</button></lk-box> <lk-box><input type="text" placeholder="输入名字"></lk原创 2021-10-05 21:44:08 · 420 阅读 · 0 评论 -
24-39 v-if/v-show；v-for；v-model
24v-if 和v-show区别小案例：登录方式切换v-if 和v-show区别v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当的销毁重建v-show不管初始条件是什么，元素总是会被渲染，并且只是简单基于css进行切换v-show适用于页面多次切换；小案例：登录方式切换v-if方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2021-09-05 22:09:20 · 446 阅读 · 0 评论 -
vue-14 v-bind动态绑定class
VUE课时14v-bind 动态绑定样式（css）第一种.字符串第二种 对象--最常用第三种 数组v-bind 动态绑定样式（css）第一种.字符串<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &原创 2021-08-29 20:36:37 · 252 阅读 · 0 评论 -
40-55 组件化、父子组件通信
40-全局化组件局部组件-使用components选项进行引入父子组件组件标签化第二种-template标签（项目开发中常用）掌握1、组件不能直接访问vue实例的数据data为什么是函数，不是对象全局化组件组件必须先进行注册，挂载到实例时当全局组件中使用其他组件时，必须在实例前使用；<body> <div id ="app"> <div id="home"><span>首页</span></div>原创 2021-09-23 00:10:26 · 365 阅读 · 0 评论 -
20-23 计算属性
20 计算属性函数和方法的区别计算属性1、计算属性体验2、计算属性运用计算3、计算属性内部实现4、计算属性和函数的区别函数和方法的区别函数：全局定义或者是windows对象方法：把函数绑定在具体的一些对象或者构造函数上，通过对象去调用的就是方法计算属性1、计算属性体验<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpo原创 2021-08-29 23:41:57 · 250 阅读 · 0 评论 -
16-19 v-style和v-on基本使用
这里写目录标题1、v-style 动态绑定style2、v-on2-1 v-on基本使用2-2 v-on 参数传递2-3 v-on 常见修饰符（1）阻止冒泡@click.stop（2）阻止默认事件@click.prevent（3）只能点击一次 @click.once(4)键盘响应（回车）@keyup.enter1、v-style 动态绑定style<!DOCTYPE html><html lang="en"><head> <meta charset=原创 2021-08-29 21:42:21 · 733 阅读 · 0 评论 -
VUE-DAY01
04、简单Vue创建实例总结:(1)定义变量:let 定义变量 ； const 定义常量；(2)const app = new Vue ({el:加上绑定的元素；data:{} })其中创建实例关键字为new，Vue指调用vue.js中的Vue函数直接调用函数进行创建实例，类似于var app= function vue(); <div id="app"> <p>{{message}}</p> <p>{{原创 2021-01-05 00:36:03 · 237 阅读 · 0 评论 -
vue-day2
18 掌握 v-bind动态绑定style（对象语法）可利用v-bind:style来绑定一些内联样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devi原创 2021-02-24 23:14:25 · 145 阅读 · 0 评论