当前位置: 首页 > news >正文

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

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

 

转载于:https://www.cnblogs.com/TAO-JL/p/9750609.html

相关文章:

  • 20180925-3 效能分析
  • 网络知识
  • [Android] Implementation vs API dependency
  • (转载)跟我一起学习VIM - The Life Changing Editor
  • linux安装LNMP环境之安装MySQL
  • 11111111
  • 单词个数统计上机实验
  • vue 项目基础 搭建
  • PHP基础知识(三)
  • PHP 使用 Swoole - TaskWorker 实现异步操作 Mysql
  • 数据库两大必备神器:索引和锁底层原理是什么!
  • swiper-动态更改数据后轮播点击或拖动失效
  • 解决oracle报Environment variable ORACLE_UNQNAME not d
  • Notification-状态栏上的通知
  • Linux、Windows如何进行性能监控与调优
  • 【跃迁之路】【463天】刻意练习系列222(2018.05.14)
  • 5分钟即可掌握的前端高效利器:JavaScript 策略模式
  • CSS进阶篇--用CSS开启硬件加速来提高网站性能
  • ECMAScript入门(七)--Module语法
  • export和import的用法总结
  • express如何解决request entity too large问题
  • Java 实战开发之spring、logback配置及chrome开发神器(六)
  • java概述
  • JS数组方法汇总
  • JS题目及答案整理
  • PHP那些事儿
  • Protobuf3语言指南
  • swift基础之_对象 实例方法 对象方法。
  • ucore操作系统实验笔记 - 重新理解中断
  • Vue实战(四)登录/注册页的实现
  • 成为一名优秀的Developer的书单
  • 从PHP迁移至Golang - 基础篇
  • 解决jsp引用其他项目时出现的 cannot be resolved to a type错误
  • 经典排序算法及其 Java 实现
  • 浏览器缓存机制分析
  • 罗辑思维在全链路压测方面的实践和工作笔记
  • 前端技术周刊 2019-02-11 Serverless
  • 用element的upload组件实现多图片上传和压缩
  • 正则表达式
  • 1.Ext JS 建立web开发工程
  • linux 淘宝开源监控工具tsar
  • ​Spring Boot 分片上传文件
  • #微信小程序:微信小程序常见的配置传旨
  • $.type 怎么精确判断对象类型的 --(源码学习2)
  • (6)【Python/机器学习/深度学习】Machine-Learning模型与算法应用—使用Adaboost建模及工作环境下的数据分析整理
  • (function(){})()的分步解析
  • (ZT) 理解系统底层的概念是多么重要(by趋势科技邹飞)
  • (附源码)spring boot公选课在线选课系统 毕业设计 142011
  • (附源码)计算机毕业设计SSM在线影视购票系统
  • (附源码)计算机毕业设计大学生兼职系统
  • (四)linux文件内容查看
  • (转)C#调用WebService 基础
  • **PyTorch月学习计划 - 第一周;第6-7天: 自动梯度(Autograd)**
  • .NET/C# 的字符串暂存池
  • .net流程开发平台的一些难点(1)