vue-第二天

等一下要出门，没时间整理了囧，今天学到事件，跳过了一点绑定style属性的内容。

//Js控制台输出函数

console.log();

1. 计算属性computed“存取器”（多用）

本质上是一个函数（重点！！！具有响应式特性！！！他依赖的响应式属性改变时，会进行重新计算，并缓存该结果，直到属性再次改变，触发他重新计算）

1. “读”（get）方式存取器
2. “写”（set）方式存取器

Html部分要尽量的干净简洁，从而有助于后续代码的维护

语言和框架是思想的载体，关键的是我们表达的逻辑和内容！！！

计算属性具有缓存效果！而方法不具有！

Computed：①第一次访问时计算，以后访问时直接返回上次结果②若依赖响应式数据，数据变化时会重新计算

Methods:每次都会调用计算

2.侦听器（少用）：①拦截操作：变化时拦截，统一处理

（例：每次改变都存储× 侦听，发生变化就存储√）

每次改变都存储，则存储操作散落在程序中，不利于程序维护；侦听整个，发生变化就存储，就可以不管后续更新，不会影响存储操作。

*AOP面向切面编程：日志记录、性能统计、安全控制、事务处理、异常处理等。

②耗时操作：侦听一段时间，再统一处理

watch: {

    length(value) {

        this.area = value * value;

        console.log(vm.area);

    }

}

带一个参数，该参数即为侦听对象的新值，每当侦听对象变化，就会调用该方法。

计算属性是深度侦听，侦听器非特殊指定不是深度侦听！！！

深度侦听：当依赖/侦听的属性是对象，会以递归方式侦听对象的所有属性

侦听器使用深度侦听依然无法获得原值

使用immediate参数可以侦听到初始化操作

侦听数组

1. 使用标准化方法修改数组可以被侦听到：

Push()尾加pop()尾删unshift()头加shift()头删splice()删除/添加/替换sort()排序reverse()逆序

1. 替换数组可以被侦听

Filter()过滤不符合的元素concat()连接两个数组slice()从已有数组选择元素返回新数组

1. 无法被侦听

①直接通过下标修改数组②直接通过修改数组的length属性修改数组③数组元素是对象，改变元素属性

vm.array[2] = 5;     //修改数组元素本身

vm.array[3].x = 10;  // 数组元素是对象，修改对象的属性

vm.array.length = 0; //通过length修改数组长度

解决方法：①set（）②深度侦听③避免使用，用其他方法替换

vm.$set(vm.array, 2, 5);

vm.$set(vm.array[3], 'x',10);

Dom：文档对象模型，web 上构成文档结构和内容的对象的数据表示。

它代表页面，以便程序可以改变文档的结构、风格和内容。DOM 将文档表示为节点和对象；这样，编程语言就可以与页面交互。

事件种类：

用户界面事件、焦点事件、鼠标事件、滚轮事件、输入事件、键盘事件、输入法事件。

1.内联方式响应事件：（v-on绑定事件，=后直接用js语句处理）

 <div id="app">  

    <button v-on:click="length++">改变边长</button>

    <p>正方形的边长是{{length}}，面积是{{area}}。</p>

  </div>

1. 事件处理方法

<div id="app">  

<button v-on:click="changeLength">改变边长</button>

<p>正方形的边长是{{length}}，面积是{{area}}。</p>

</div>

......

methods: {

changeLength(){

    this.length++;

}}

V-on可简写为@

3.使用事件对象

methods: {

changeLength(event){

    this.length += Number(event.target.value);

}}

event则为事件对象，通过event.target获得触发事件的dom元素

方法调用使用事件对象：

<button v-on:click="changeLength($event)" value="1">边长+1</button>

<button v-on:click="changeLength($event)" value="10">边长+10</button>