Vue

vue 的基本使用

1. 基本建立：

首先是 new Vue()创建一个实例，传入参数是一个对象，对象基本属性有 el,该键值写的是对应容器元素选择器，data 属性，键值是一个对象，该对象存入的是要绑定的数据
dom 元素都是直接写在容器里，跟写 html 布局一样

2 插值语法：

如果元素中间要插入 js 语法，可以使用双大括号{ {}}插入 js 表达式或值(data 键值对象里的属性可以直接填写在里面)，这里面除了函数表达式不可以，其他都可以注意：函数调用可以填写，因为函数调用有返回值（js 表达式与 js 语句:js 表达式有返回值）

3 挂载：

正常创建实例时，传入的对象属性有 el 及其键值，就传入了容器元素，挂载上了该容器
若在传入挂载时，可以通过$vue.mount(“容器元素选择器”)挂载上
还可以进行异步挂载

4 data 的函数式写法：

可以在组件复用时，防止多个组件对数据操作时有冲突，所以把 data 书写为一个函数，返回一个对象，在复用时每个对象都是独一无二的

5 类class动态绑定

–动态类只有一个的时候，class 的值是一个字符串
–动态类有多个且类名个数确定时，但不确定是否使用时，class 值是一个对象，且对象键值为布尔值
–动态类有多个且类名个数不确定时、不确定使用哪一个时，class 的值是一个数组可以用数组方法 push 等进行增删

6 style的动态绑定

–正常绑定:style=“{属性名:‘属性值’}”
–style 属性的值是对象，具体根据实际情况设置
–如果要增删属性值里面的 css 样式，不要直接给 style 值对象.属性添加，这样没有改变对象地址，不会重新渲染
–如果是要增删属性值里面 css 样式，可以将 data 中 style 属性值设置为数组，通过 vue 数组方法增删，数组键号.属性取值

指令

1. v-bind

1.1 基本使用：

v-bind:元素属性可以强制绑定元素属性，是该元素属性值具有 js 环境，““里面是 js 插值环境，可以书写单个 js 表达式
v-bind 可以简写为 :元素属性完整的书写为 v-bind:元素属性=”” 或 :元素属性=“”

1.2 class 动态绑定

1.3 style 动态绑定

2. v-model

2.1 v-model 基本作用：

可以用来替代表单元素的 value 属性，与数据进行双向绑定，方便收集表单数据此处数据双向绑定：设置的 data 里的数据可以显示在表单标签内容中，当操作表单，更改标签内容时，data 中的数据也会动态变化 (不用我们用事件监听表单数据变化，然后根据变化后的值设定 set 更改 data 值)

2.2 复选框中的应用：

单个复选框可以利用 v-model 绑定一个布尔值表达式来表达选择状态如

多个复选框利用 v-model 绑定数据时，类似于表单元素的 name 属性，设置 v-model=“data 对象中对应属性名”，这个 data 中的属性值，可以用数组存储（主要多选，可以有多个值）；表单元素的 value 属性填写对应选项要提交的值为了表单最终会提交数据给后台，最好也设置上 name 属性 name:value 可以对的上

2.3 单选框中的应用：

基本用法与上面复选框一样，不同的是 data 中的属性值可以用空字符串表示（单选，不管几个选项，最终都是一个值）

2.4 select 中的应用：

同单选框基本一样，data 属性值可以用字符串表示（因为一般是单选），注意 select 设置 v-model 绑定是必须设置在 select 上，不是 option 上
option 正常写 name 和 value 属性
如果是多选，可以用数组存

2.5 v-model 修饰符

–.lazy 修饰符：
正常 js 中 input 事件是表单数据一发生变化就可以触发到，从而获取数据变化值；
onchange 事件是表单元素失去焦点后（点击 enter 后也会失去焦点）会触发，从而获取最终数据变化值；
v-model 类似于 input 事件，只要视图一更新，data 数据就会发生变化，
加上.lazy 修饰符后，就会如 onchange 事件一般，失去焦点后，data 数据更新

–.number 修饰符
表单数据值一般是字符串类型，如果想要 number 类型值，可以添加这个修饰符
注意：添加这个修饰符后，表单标签中不能输入除数字外的其他数据类型

–.trim 修饰符
去除表单数据的前后空格，保证收集的表单数据格式规范

3. v-on

3.1 该指令主要用来绑定事件；

基本表达：v-on 事件名=“事件回调函数” 简写 @事件名=“事件回调函数”，一般事件回调函数中函数指向 vue 实例
在创建实例时为了和 data 里的数值区分，事件回调函数的值我们可以另外传一个属性 methods 对象存储事件函数，在这个存储的事件回调函数中的 this 指向 vue 实例
注意：如果是以 data 函数式写法存储的事件回调函数，里面 this 指向 window

3.2 如果事件函数逻辑简单可以之间忽略函数

例如： <button @click=“()=>{isChecked =! isChecked}”>点我
可以写成<button @click=“isChecked =! isChecked”>点我

data 中数据要在 dom 中有应用，否则通过事件函数改变数据，并不起作用
例如：这个例子中{ {count}}必不可少
<button @click=“count++”>点我 { {count}}

3.3 事件函数传参：

默认情况下（未传参时）事件函数第一个参数就是 event
如果加小括号了可以传参，在 vue 中不会调用函数，所以事件回调函数中不用 return 一个函数来防止事件未触发时事件函数就被调用了
对于 e 事件，如果要传参，就要在传参中时传入参数$event 关键字，事件函数就可以正常接受 event 了，注意在对应位置接受

3.4 事件修饰符：可以 2 个连着写

– .self 只触发当前元素
– .stop 阻止冒泡
– .once 只触发一次回调函数
– 键盘相关事件 .{keyCode|keyAlias} 点击该键时触发

4. v-for

5. v-if 和 v-show

6. v-html和v-text

7. v-pre

8. v-once

9. 计算属性

10. 侦听属性

watch ：可以侦听数据变化

非单文件组件

步骤：

用Vue.extend()创建一个组件，内部传入配置项，与vm配置类似，但是没有el这一项属性配置
用template配置模板
用name定义组件名字

简写：可以直接定义一个对象名={}，里面填写对应配置就好了

要运用这个组件要在父组件里配置components:{组件名}

全局注册组件

步骤：

用Vue.component(“组件名”,{template:模板具体内容})
之后不用引入，就可以直接用在其他组件里

原理：

我们创建的组件其实就是新创建一个VueComponent函数
每次创建一个新的组件就是新的VueComponent函数
当这个组件被注册的时候，会实例化VueComponent函数，得到一个组件实例对象
这个组件实例其实就是相当于小型vm，拥有当前组件的数据、方法、生命周期等一些内容
组件中的方法、生命周期函数等的this都是指向当前组件实例

重要的内置关系：

每一组件就是一个VueComponent函数
组件实例就是VueComponent函数的实例化对象（因为每一个组件都是新的VueComponent函数，所以每一个组件的实例化对象的隐式原型都不是同一个）
为了能够让所有组件实例都能访问同一个对象，则修改左右的VueComponent函数的原型对象的隐式原型指向Vue构造函数的原型对象
组件实例(vc)—proto–>VueComponent的原型对象—proto–>Vue的原型对象–>Object的原型对象–>null
组件实例(vc1)—proto–>VueComponent1的原型对象—proto–>Vue的原型对象–>Object的原型对象–>null
组件实例(vc2)—proto–>VueComponent2的原型对象—proto–>Vue的原型对象–>Object的原型对象–>null
只要把一个属性放在Vue的原型对象上，则多有的组件实例都能访问到

生命周期

1.挂载过程

new Vue() —>init lifecycle&events —> init injections&reactivity —>Has “el” option ?

if no —> When vm.$mount(“el”) is called?—>Has “template” option

if yes —> Has “template” option ?

if no —> Compile “template” into render function—> Create vm.$el and replace el with it

if yes —>Compile el’s outerHTML as template—> Create vm.$el and replace el with it

—>mounted —>Teardown watchers,child,components and event listners —>Destroyed

2. 更新过程

mounted—>When data changes—>Virtual DOM re-render and dispatch —>mounted

3.生命周期函数

beforeCreate(){此时还不能访问到vm中data数据和method方法}—>created(){此时可以访问到vm中data数据和method方法}—>beforeMount(){1.页面呈现的是未经Vue编译的DOM结构；2.所有对DOM的操作，最终都不奏效}—>mounted(){1.页面中呈现的是经过Vue编译的DOM；2.对DOM的操作均有效，致辞初始化结束。3.应用：开启定时器、发送网络请求、订阅消息、绑定自定义事件}—>(beforeUpdate(){数据是更新后的，但是页面还是之前的，页面和数据还未同步好}—>updated(){数据和页面都是更新好的，已经同步})—>beforeDestroy(){1.vm中所有data、methods、指令等，都处于可用状态，马上要执行销毁过程；2.应用：关闭定时器、取消订阅消息、解绑自定义事件}—>destroyed

3. 父子嵌套中的生命周期

3.1 挂载过程

父beforeCreate—>父created—>父beforeMount—>子beforeCreate—>子created—>子beforeMount—>子mounted—>父mounted

3.2 更新过程

父beforeUpdate—>子beforeUpdate—>子updated—>父updated

3.3 卸载过程

父beforeDestroy—>子beforeDestroy—>子destroyed—>父destroyed

组件通信

1. props传值–父传子

步骤：

子组件标签上绑定要传入的数据 :数据名=“数据值”
子组件文件内，配置项添加props这一配置，注意这个值是数组，里面是传入的数据名
如果要限制props的数据类型，可以这样格式: [{数据名：{type:number,required:true}]

2. 自定义事件–子传父

步骤：

给子组件绑定一个自定义事件，这个自定义事件属于父组件里方法；
在子组件里通过this.$emit(“自定义事件的名称”,“要传入父组件的值”)调用定义在父组件的自定义事件；
通过调用定义在父组件里的自定义事件后，该函数可以接收从子组件里传入父组件的值
在子组件里通过this.$off()可以解绑这个自定义事件
可以传递多个数据this.$emit(“自定义事件的名称”,“数据1”,‘数据2’)

3. 消息订阅与发布

步骤：

注意下载相关第三方包后，正确引入使用一般pubsub-js
订阅事件PubSub.subscribe(“订阅数据名”,(“数据重命名”,接受的data数据)=>{})
发布事件PubSub.publish(“数据名”,发布的data数据)
注意：先订阅后发布注意顺序数据更新要保证重新发布了

4. 事件总线

步骤：

在全局配置里添加Vue.prototype.$bus=this
通过this. $b u s .$ emit(“数据名”,数据值1,数据值二)发送数据
通过this. $b u s .$ on(“数据名”,(value指发送过来的数据)=>{})
通过this. $b u s .$ off(“数据名”)解绑，一般放在beforeDestroy生命周期函数里

事件总线2个条件：

所有组件都可以访问
能调用$emit $on

vm与组件对象的关系：组件对象原型的原型就是vm的原型

VueComponent.prototype=Object.create(Vue.prototype)

5. 插槽

5.1 具名插槽

步骤：

主要是主体html结构相同的组件，只有一部分不同，可以通过slot插槽预留一部分空间，插入对应部分，达到重复利用
在结构相同要重复利用的子组件中，中间不同结构部分，用slot插槽标签替代占位
用到这个子组件的父组件里，将子组件标签写成双标签，中间根据具体情况，插入具体的html结构
这个插入结构，最后会正常呈现在页面中

5.2 作用域插槽

步骤：

有的数据在子组件里，无法提升到父组件，这样我们在根据数据插入具体的html结构（里面会有用到数据的文字，html标签多少等）时，会有问题，可以用作用域插槽传递数据到父组件，这样就可以正常写html结构了
在子组件里加入slot插槽标签替代占位同时在标签上通过props方式，传递要传递的数据
父组件中，子组件双标签中，加入根标签template，并在此标签中通过scope属性接收数据，scope=“传递的数据组成的对象”，注意template这个scope属性，后面的""就是js环境，不需要:绑定
传递的数据接受时可以直接解构

过滤器

1. 局部过滤器

步骤：

主要是有的数据前或后需要添加同一字符或数据等，可以定义一个过滤器传入要添加的字符或数据
在要添加字符或数据的插值数据后面添加管道符|和过滤器函数，该过滤器参数是要添加的字符或数据
在组件配置中添加filters这一属性配置，filter里面写对应过滤器函数，该函数的接受的第一个参数是要过滤的插值数据，从第二个参数开始是过滤器函数传入的参数（要添加的字符或数据）
这样我们可以通过接收到的要过滤的插值数据和要添加的字符或数据，在过滤器函数里进行对应逻辑，return返回对应处理好的数据

插值：{
   
   {0|priceType("￥")}}
配置：filters: {
    priceType(value, args) {
      console.log(value,args);
      return typeof value === "string" ? 0 : args + value.toFixed(2);
    },
  },

2. 全局过滤器

步骤：

在main.js文件中添加Vue.filter(“过滤函数名”,(value,args)=>{return})
这个过滤函数可以在任一组件里使用

// 全局过滤器
Vue.filter("day", (value) => {
  return dayjs(value);
});

自定义指令

步骤：

可以根据具体需求，自定义指令，不用每次设置
在配置里添加directives（注意是复数）对象属性，里面添加自定义指令函数
自定义指定可以接收2个参数，第一个参数是绑定该指令的元素，第二个参数是指令对象（该对象包含name,rawname,ref等属性）
通过接收的参数，可以给元素进行自定义操作

<p v-red>我是红色指令</p>
directives: {
    red(ele, dirObj) {
      ele.style.backgroundColor = "red";
      console.log(ele,dirObj);
    },
  },

自定义插件

步骤：

新建一个js文件
文件中export default 一个对象{}
对象中必须包含install(Vue){}方法
当在写代码时，引入插件后，插件被使用时，会自动调用install这个方法，并且传递一个Vue进去
可以根据传入的Vue定义指令，过滤器，组件等
引用后，使用Vue.use(“引用过来的名字”)

// 自定义插件，暴露一个对象出去
export default {
  // 对象必须拥有install方法 当插件被使用的时候，会自动调用这个方法
  install(Vue) {
    Vue. ("red", (ele) => {
      ele.style.background = "red";
    });
    Vue.filter("bolang", (value) => {
      return value + "~~~";
    });
    Vue.component("MyFooter", {
      template: `
        <footer>我是Footer组件 </footer>
        `,
    });
    Vue.prototype.$bus = "bus";
  },
};
//main.js中引入
// 引入插件
import my from "./my.js";
// 使用插件
Vue.use(my);

混合mixin

步骤：

定义一个js
引用
配置里加mixins:[]
注意如果混合里数据和自身组件数据重合，主要看自身组件的，但是mounted等生命周期函数不会重合
全局的用法引入 Vue.mixin(“要引入混合里的配置的名字”)

//mixin.js
export const mixMethods = {
    
    
  methods: {
    
    
    showName() {
    
    
      alert(this.name);
    },
  },
};

export const mixDatas = {
    
    
  data() {
    
    
    return {
    
    
      x: 100,
      y: 200,
    };
  },
};

import { mixMethods, mixDatas } from "../mixin.js";
//局部混合，在要引入的组件配置里加
mixins: [mixMethods, mixDatas],
// 全局混合
Vue.mixin(mixMethods);
Vue.mixin(mixDatas);

自定义组件

步骤：

一般有重复js、css、html的可以放在一个组件里以便复用，难点在于动态数据
首先保证找到重复的js、css、html等文件放到组件里，然后处理
找到里面的动态数据，用变量定义，这些数据最终是通过props接收，所以添加props配置，接收这些变量代表的数据
全局注册该组件
根据实际情况引入，使用组件标签，并通过props方式传递动态数据

Ref的使用

步骤：

给要获取元素对象的元素绑定ref=“自命名”，这个自命名类似于class等取名
通过this.$refs.自命名获取元素对象

<p ref="oP">我是ref属性绑定者</p>
<button @click="getRef">获取ref</button>
 methods: {
    getRef() {
      console.log(this.$refs.oP);
    },
  },

vue2总结相关笔记

Vue