axios安装后在需使用的组件内要导入;或者在入口文件全局配置。
v-model指令修饰符如上;.number使得用户输入值变为数值类型;.trim让输入去除两端空格;.lazy有点类似防抖,不会实时更新data内数据,当离开输入框时才会改变。
v-model给值true&false vue内部会判断input的类型自动添加样式。
在 @event.修饰符 实现阻止事件冒泡、阻止事件默认行为等;
@click=“add” 事件add后未添加实参和$event在methods内add(e){}仍然可以拿到事件e e.target就是出发时间的对象。
使用了v-for后都应添加一个唯一的key值给循环的item,key的值为数字或者字符串,一般使用数据的id ,因其具有唯一性。 如在添加商品列表中 不添加key的话,对单个商品的勾选等操作是不固定的,勾选的第二个商品,添加商品后商品列表次序改变。
过滤器filter在vue3 被移除
watch 侦听器语法如下;监视数据作为函数名,当数据改变出发函数相应操作。
newVal和oldVal内置;直接形参接受新旧值;顺序新前旧后。
如需进入页面立即触发监听函数,应改成对象模式,immediate(立即)值给true;
若监听对象为对象里的属性,可使用对象形式的监听添加deep:true属性;也可使用单引号包裹对象点属性,的函数监听模式,如下
计算属性 返回一个值,会在vue实列上生成一个rgb属性
axios语法格式👇 get传参用params;post用data
请求结果为promise对象
使用vue-cli脚本创建项目后的目录 放文件类型如下
阶段复习:
$mount()等价于 vue实列内部使用el挂载到#app; 组件内部script需要使用默认导出(export default{});组件内嵌套组件;1-导入组件import from@/xxxx(@为vue-cli自动创建项目结构时定义的目录位置 src目录) 2-组测组件 与methods等平级 创建template对象 放入导入的组件 3-将其当作标签使用(闭合);;
在根组件内导入组件
packge.json内serve 定义的什么就通过npm run xx 来运行vue项目
main.js入口函数中render 下绑定谁,谁就是根组件,被渲染到index.html单页面中替换。
组测全局组件 在min.js下组测 语法如下:
1.导入想全局组测的组件 2.使用vue.component( x , x )方法 第一个参数为自定义组件名称;第二个为导入组件名字(即为import 时 的名字)3. 全局标签使用
props:
“只读”是因vue不建议直接修改props的值;实际是能修改并报错的。
公共组件使用props设置自定义属性,使用该组件的组件可以自定义设置属性值;提高复用性
此处一些注意:使用公共组件的组件在行内式设置属性初始值时,直接给值会是字符串类型;使用v-bind,得到数字型;因v-bind“ ”内使用的是js语法;
props对象格式: 可以设置默认值
可设置值类型: 设置该自定义属性用户是否必须传值:
组件行内式添加scoped 可让该组件内样式设置不溢出;在选择器前添加/deep/,可在该组件内修改公共组件样式。
Vue生命周期钩子函数 (与data等平级函数形式使用)
created函数 常用于发起ajax请求;请求数据
beforeMount 正在将HTML结构渲染到浏览器中 此时还未有DOM结构;
mouted 为最早拿到DOM结构阶段
👇beforeupdta 数据更新了;正在更新DOM结构;可以拿到最新数据,拿不到最新DOM
👇updata 依据最新数据完成了DOM结构的更新渲染; 数据变化后的最新DOM
两者都是数据change时触发的钩子函数,可以执行0-N次 ;其余周期函数只能执行一次
组件销毁时 才会触发👇
{组件传值部分}
父向子传值props;
父组件值使用v-bind 绑定到子组件自定义属性名上,子组件内使用props拿到值
简单数据类型的值是复制一份在父子组件中相互独立;复杂数据类型则是复制引用,内存地址未改变,直接修改props值能改变原数据。
子向父传值 $emit ;
子组件函数内使用this.$emit()前值为自定义函数名,后值为传递的值;父组件内的子组件标签行内式绑定该自定义事件num,num事件触发后执行getNewCount函数,val拿到值;
其中自定义事件num在子组件中 this.$emit()就触发
兄弟组件传参: EventBus
原理创建公共js充当中间者;将两边的数据进行交互;
(ref )
需要操作DOM时;使用VUE内置 refs 属性 自定义ref名字;this.$refs.xxx 拿到DOM
结构如图:
ref还可以拿到组件实列;可实现父组件内调用子组件的数据、方法;
嵌套组件内自定义个ref;
与操作DOM时一致,调用this.$refs.xxx;拿到组件实例 就可调用其方法、数据。
ref 命名为xxxRef
调用方法报错;方法定义了 则为调用者未定义
想让操作在DOM更新后执行(拿到最新DOM结构);使用nextTick函数 里cb为callbck回调函数
(不调用生命周期函数updat?)若使用updata调用,因为每当数据更新就会重新渲染调用该函数,不符合调用逻辑;
component标签
相当于占位符 is 绑定谁将谁渲染在该区域
使用keep-live包裹component 实现该区域组件缓存
(组件动态切换时会销毁切换前的组件)
切换过程中会触发以下两者函数 (对缓存激活时间段进行操作)使用【keep-alive】时才可使用
keep-alive的两个属性 include&exclude
(两者不可同时使用) (include包含的组件都缓存)(exclude包含的组件都不缓存)
与data平级为组件设置name属性 不设置name默认为在其他组件component{}注册时的名字
加与不加区别(注册时的名字主要作为标签使用;in/exclude 需使用定义的名字(若加了name) 在测试工具上看到的组件名字也为name的值)