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.

posted @ 2019-09-16 09:34  princeness  阅读(113)  评论(0编辑  收藏  举报