vue基础

Vue基础

1.双向绑定，

2.组件化开发，（代码复用）,

3.模板语法：

{{}}，vue指令，修饰符，过滤器（工具函数）

4.条件语句：v-if和v-show，

(1)v-if的原理是根据判断条件来动态的进行增删DOM元素，
(2)v-show是根据判断条件来动态的进行显示和隐藏元素。
(3)v-for比v-if优先级高，

5.watch 和 computed 和 methods 区别是什么？

• (1)当页面中有某些数据依赖其他数据进行变动的时候，可以使用computed（计算属性）。computed是具有缓存的，
• (2)数据变化的同时进行异步操作或者是比较大的开销。watch为一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。
• (3)data中没有声明的数据可以在computed中使用，但是不能在watch中使用。
• (4)在computed和watch方面，一个是计算，一个是观察。

①计算是通过变量计算来得出数据。而观察是观察一个特定的值，根据被观察者的变动进行相应的变化。

• (5)Methods是组件的方法。

6.Vue路由：

• (1)标签导航：标签导航是通过转义为标签进行跳转，其中router-link标签中的to属性会被转义为a标签中的href属性；
• (2)编程式导航：我们可以通过==this.$router.push()==这个方法来实现编程式导航，当然也可以实现参数传递，这种编程式导航一般是用于按钮点击之后跳转；

7.Vue路由守卫：

• (1)应用场景：在项目开发中每一次路由的切换或者页面的刷新都需要判断用户是否已经登录，
  路由守卫应用例子

8.Vue生命周期钩子函数

• 钩子函数有8个，ajax获取数据在mounted（模板渲染完毕后）中执行。

钩子函数	触发的事件	可以做的事情
beforeCreadted	vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。	加loading事件
created	vue实例的数据对象data有了，$el还没有	结束loading、请求数据为mounted渲染做准备
beforeMount	vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换。
mounted	vue实例挂载完成，data.filter成功渲染	配合路由钩子使用,ajax获取数据
beforeUpdate	data更新时触发	单元格
updated	data更新时触发	数据更新时，做一些处理（此处也可以用watch进行观测）
beforeDestroy	组件销毁时触发
destroyed	组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在	组件销毁时进行提示

9.Vue组件之间通信（传值）

• (1)使用$children获取子组件和父组件对象，（父传子），
• (2)通过props进行通信，（父传子），
• (3)使用$emit传递事件给父组件，父组件监听该事件，（子传父）
• (4)使用$parent.获取父组件对象，然后再获取数据对象，（子传父）
• (5)Slot：插槽传值，
• (6)使用事件总线，（任意组件）
• (7)Vuex（仓库），（任意组件）

10.Vuex

• (1)State，状态（数据）管理，
• (2)Mutations，状态修改的方法，
• (3)Getters：状态的进一步加工，（相当于组件的 computed），
• (4)Actions，状态的异步操作，（ajax请求），

11.Vue实例属性或方法

• (1)$refs：获取模板的中dom节点（元素），
• (2)$route：获取路由传递的参数，
• (3)$emit：向父级组件触发一个事件，
• (4)$event：事件发生对象，
• (5)$set：在vue中，给对象添加属性,
• (6)$options：获取当前组件的属性（获取当前组件的name）

vue3.0文档官网地址：开启传送阵