• 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

  • 相关阅读:
    读《构建之法》第一,二,十六章的奇思妙想
    四则运算
    鉴权
    sql注入
    【信息安全作业5】散列函数的应用及其安全性
    结对作业 -GUI四则运算
    阅读《构建之法》四章、十七章
    2016012064+小学四则运算练习软件项目报告
    简单四则运算一
    梦想开花的地方
  • 原文地址:https://www.cnblogs.com/TAO-JL/p/9750609.html
Copyright © 2020-2023  润新知