码迷,mamicode.com
首页 > Web开发 > 详细

Vue.js学习(一)

时间:2018-10-07 18:03:33      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:顺序   简单   用户输入   侦听器   添加   开始   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

 

Vue.js学习(一)

标签:顺序   简单   用户输入   侦听器   添加   开始   size   允许   属性   

原文地址:https://www.cnblogs.com/TAO-JL/p/9750609.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!