Vue知识点梳理（思维导图版）

Vue是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）

MVC 与MVVM的区别

• MVC 是后端的分层开发概念；
• MVVM是前端视图层的概念，主要关注于 视图层分离。MVVM把前端的视图层分为了 三部分 ：Model, View , VM ViewModel

一、Vue基本代码结构

const vm = new Vue({
   
	el:'#app',//所有的挂载元素会被 Vue 生成的 DOM 替换
	data:{
    // this->window },
	methods:{
    // this->vm},
	//注意，不应该使用箭头函数来定义 method 函数 ,this将不再指向vm实例
	props:{
   } ,// 可以是数组或对象类型，用于接收来自父组件的数据
	//对象允许配置高级选项，如类型检测、自定义验证和设置默认值
	watch:{
    // this->vm},
	computed:{
   },
	render(){
   },
	// 声明周期钩子函数
	...
})

当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
例外：Vue实例外部新增的属性改变时不会更新视图。
Object.freeze()，会阻止修改现有的 property，响应系统无法追踪其变化。

实例属性和方法

1. 访问el属性：vm.$el , document.getElemnetById(‘app’);
2. 访问data属性：vm.$data
   以 _ 或 $ 开头的 property 不会被 Vue 实例代理，因为它们可能和 Vue 内置的 property、API 方法冲突。你可以使用例如 vm.$data._property 的方式访问这些 property。
3. 访问data中定义的变量 ： vm.a , vm.$data.a
4. 访问methods中的方法：vm.方法名()
5. 访问watch方法：vm.$watch()

不要在选项 property 或回调上使用箭头函数,this将不会指向Vue实例

比如created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。
因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

二、Vue指令

插入数据：

1. 插值表达式相当于占位符，不会清空元素中的其他内容。直接写在标签中。会将html标签作为文本显示。
2. v-text会覆盖元素中原本的内容。写在开始标签中，以属性的形式存在。会将html标签作为文本显示。
3. v-html （innerHTML）会覆盖元素中原本的内容，会将数据解析成html标签。

三、动画

3.1使用过渡类名实现动画

过渡类名：

v-enter（刚开始进入的点）  v-enter-active  v-enter-to (结束点)
v