zoukankan      html  css  js  c++  java
  • vue

    1.vm.$data.msg === vm.msg
    2.数据绑定: mustache{{}}(插值语法)
    从data中获取,不作用在html属性上
    3.双相数据绑定(简单的例子)
    4.动态添加数据

    1 Vue.set(object, key, value) - 适用于添加单个属性
    2 Object.assign() - 适用于添加多个属性
    

    5.异步DOM的更新
    如果需要那到更新后dom中的数据 则需要通过 Vue.nextTick(callback):在DOM更新后,执行某个操作(属于DOM操作)
    实例调用vm.$nextTick(function () {})
    6.指令:
    v-text

    v-html

    v-bind 语法:v-bind:title="msg" 简写::title="msg" v-on 作用:绑定事件 语法:v-on:click="say" or v-on:click="say('参数', $event)" 简写:@click="say" v-model

    Message is: {{ message }}

    v-for

    {{item}} -- {{index}}

    {{item}} -- {{key}}

    {{item}}

    key属性 6.样式处理 -class和style
    ===> 解析后
    ===>解析后
    ===>解析后

    v-if v-show v-pre v-once

    7.过滤器 filter(全局过滤器,局部过滤器)
    过滤器可以用在两个地方:{{}}和 v-bind 表达式
    通过全局方式创建的过滤器,在任何一个vue实例中都可以使用
    注意:使用全局过滤器的时候,需要先创建全局过滤器,再创建Vue实例
    显示的内容由过滤器的返回值决定

    {{ dateStr | date }}
    {{ dateStr | date('YYYY-MM-DD hh:mm:ss') }}

    局部过滤器
    说明:局部过滤器是在某一个vue实例的内容创建的,只在当前实例中起作用
    {
    data: {},
    // 通过 filters 属性创建局部过滤器
    // 注意:此处为 filters
    filters: {
    filterName: function(value, format) {}
    }
    }
    8.按键值修饰符
    9.监视数据变化
    概述:watch是一个对象,键是需要观察的表达式,值是对应回调函数
    作用:当表达式的值发生变化后,会调用对应的回调函数完成响应的监视操作
    VUE $watch

    new Vue({
      data: { a: 1, b: { age: 10 } },
      watch: {
        a: function(val, oldVal) {
          // val 表示当前值
          // oldVal 表示旧值
          console.log('当前值为:' + val, '旧值为:' + oldVal)
        },
    
        // 监听对象属性的变化
        b: {
          handler: function (val, oldVal) { /* ... */ },
          // deep : true表示是否监听对象内部属性值的变化 
          deep: true
        },
    
        // 只监视user对象中age属性的变化
        'user.age': function (val, oldVal) {
        },
      }
    })
    

    10.计算属性变化
    说明:计算属性是基于它们的依赖进行缓存的,只有在它的依赖发生改变时才会重新求值
    注意:Mustache语法({{}})中不要放入太多的逻辑,否则会让模板过重、难以理解和维护
    注意:computed中的属性不能与data中的属性同名,否则会报错

    Vue computed属性原理
    var vm = new Vue({
      el: '#app',
      data: {
        firstname: 'jack',
        lastname: 'rose'
      },
      computed: {
        fullname() {
          return this.firstname + '.' + this.lastname
        }
      }
    })
    

    11.实例生命周期
    12.自定义指令
    13.组件(全局组件,局部组件)
    14.组件通讯
    父子组件传值
    内容分发
    获取组件(或元素) - refs
    15.路由
    基本使用
    重定向
    路由其他配置
    路由参数
    嵌套路由
    16.

  • 相关阅读:
    AWTK-MVVM 在 STM32H743 上的移植笔记
    windows 中文 unicode 编码显示
    SpringBoot项目jar包运行
    Activiti中的互斥网关、并行网关、兼容网关、事件网关
    【LeetCode】739.每日温度(5种方法,详细图解)
    【LeetCode】20.有效的括号(使用栈,动图详解)
    你知道权限管理的RBAC模型吗?
    关闭Win10自动更新
    iOS 中如何判断当前是2G/3G/4G/5G/WiFi
    GCD API 记录 (三)
  • 原文地址:https://www.cnblogs.com/princeness/p/11664888.html
Copyright © 2011-2022 走看看