Vue.js学习

Posted 2021-01-11 冰锐格

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js学习相关的知识，希望对你有一定的参考价值。

开始

学Vue肯定看官方教程先，https://cn.vuejs.org/v2/guide/

会看到一大串
　　介绍、深入组件、过渡与动画、复用与组合、工具、规模化

　　是什么：声明式渲染、条件与循环、用户输入、组件化的构建

　　实例：创建、数据与方法、生命周期

　　模板语法：插值、指令、缩写

　　计算属性与侦听器：缓存、setter、侦听器

　　绑定：html class、内联样式

　　条件渲染、列表渲染、表单输入绑定、事件处理、

　　组件：注册、Prop、自定义事件、动态与异步、插槽

大可直接看拆分部分，其他内容都是碎碎念

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

拆分

Vue是一个渐进式框架，专注于UI。

　　它一切由模板开始，才会有mvvm，声明式渲染，指令。

　　为了复用代码和扩展HTML元素，采用组件化，程序应用由多个组件组成（页面由多个组件组成）

　　　　剩下交给其他

核心

声明式渲染：通过模板语法将数据和DOM绑定在一起，做到所有元素都是响应式
　　　　双向数据绑定

组件化：页面（应用程序）是由多个组件组成，利于复用
　　组件是一个---有预定义选项的----vue实例

模板语法

底层：vue模板结合响应系统，会智能计算最少需要重新渲染多少组件，并把dom操作次数减到最少

双大括号语法：文本插值，将数据解释为文本

指令：模板语法出现的产物，是值改变出现特定的响应式

深入响应式原理-----实现双向数据绑定

用数据劫持和发布-订阅模式结合的方式
　　Object.definePropery方法劫持各属性的setter、getter
　　订阅者模式：数据变化，通知事件响应，更新视图

为什么要在HTML中监听事件
　　1看html模板轻松定位js对应方法
　　2就逻辑，与DOM解耦，易于测试
　　3简单---VM销毁，所有事件处理器也会被删除

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

其他

常用的指令有缩写
v-bind：默认：关于属性
v-on：默认 @ 监听dom事件，能承接方法名称（处理更复杂的）还能内联

v-for 绑定数组数据来渲染列表，比if优先级高
v-model 表单与应用状态的双向绑定，监听用户输入事件及更新数据，并处理极端场景
v-once 一次性地插值，创建低开销的静态组件
v-html 将数据译为HTML

v-if 条件渲染，惰性，切换开销大
v-else
v-else-if

v-show 根据条件展示元素选项，简单，初始渲染开销大

　　key属性：唯一的值，来管理可复用的元素（复用元素不是从头开始渲染）

　　计算属性：响应数据变化，用于简单运算，好处理
　　如：数据随其他数据变化而变化

　　侦听属性：观察和响应实例的数据变动，是通用的

　　自定义侦听器---watch选项：响应数据变化，主要在异步/开销较大的操作上

绑定
数据绑定体现之：操作元素的class列表和内联样式
v-bind：class
v-bind：style

实例
用函数来创建实例，可复用组件树、可选嵌套
$是vue自定义属性

data对象：存储所有属性，属性值改变，视图会响应

实例生命周期：创建、安装、更新、销毁
create、mount、update、destroy