开始
学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
Object.freeze方法是唯一一个无法追踪变化，会阻止修改现有属性
vue不能检测变动数组的：长度、索引直接设置那一项
?解决：vm.items[indexOfItem] = newValue,会触发状态更新
?解决：用splice
vue不能检测对象属性的添加/删除
??不能动态添加根级别的响应式属性，但嵌套对象可以添加响应式属性
??????????vue.set(object,key,value)
v-on提供事件修饰符
事件处理程序，更好的方式是纯数据逻辑，不考虑处理DOM细节
形式： ?v-on.stop，顺序很重要
有：stop、prevent、capture、self、once、passive(提高性能)
??阻止传播、不允许、捕获模式、自身、仅一次、被动
?prevent.self 阻止自己（所有）
?self.prevent 自身不能点击
?prevent与passive一起，prevent会被忽略
按键修饰符：就键值
enter、tab、delate、esc、space、up、down、left、right
自定义按键修饰符： config.keyCodes
系统修饰符：ctrl、alt、shift、meta
鼠标修饰符：left、right、middle
exact修饰符：和系统修饰符组合 触发的事件，精确地控制
lazy修饰符
number
trim
Vue.js学习（一）
原文地址：https://www.cnblogs.com/TAO-JL/p/9750609.html