VUE复习

  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充当中间者；将两边的数据进行交互；

　　　　　　　　　　　　　　　　　　（ｒｅｆ ）

需要操作DOM时；使用VUE内置  refs  属性    自定义ref名字；this.＄refs.xxx 拿到ＤＯＭ

  

结构如图：

ｒｅｆ还可以拿到组件实列；可实现父组件内调用子组件的数据、方法；

嵌套组件内自定义个ｒｅｆ；

 与操作ＤＯＭ时一致，调用this.＄refs.xxx；拿到组件实例　就可调用其方法、数据。

ｒｅｆ　命名为ｘｘｘＲｅｆ　　 

 调用方法报错；方法定义了　则为调用者未定义　

 想让操作在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的值）