标签:顺序 简单 用户输入 侦听器 添加 开始 size 允许 属性
开始
学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
标签:顺序 简单 用户输入 侦听器 添加 开始 size 允许 属性
原文地址:https://www.cnblogs.com/TAO-JL/p/9750609.html