mynote

计算属性：

1.定义：通过已有属性计算得来的

2.原理：底层借助了object.defineproperty方法提供的getter和setter.

3.get函数什么时候执行？

1. 初次读取时会执行一次
2. 当依赖的属性发生变化时会被调用

4.set什么时候执行：当计算属性被修改时

5.优势：与methods相比，内部有缓存机制（复用），效率更高，更加方便。

6.备注：

• 计算属性最终会出现在vm上，直接使用即可
• 如果计算属性需要修改，那么必须通过set函数去相应修改，且set中要引起计算时依赖性的数据发生改变。

7.简写：只读取不修改时，计算属性可采取简写形式，把计算属性当成其get来写，如下

 full() {
    return this.first + '-' + this.last
 }

关于markdown的简单了解：

1.标题，使用#，后面跟一个标题，和html比价类似，有几个#就是几级标题

2.引用，通过>后面加一个空格即可引用一句话

3.无序列表：-后面加一个空格，即可构成无序列表的li

4.有序列表：序号后面一个英文句号，后面加一个空格，即构成有序列表，如1.

5.图片引入：英文输入状态下感叹号+[图片文本]+(url地址)

6：超链接:和图片类似，[跳转连接名称]+(跳转地址，如百度为：www.baidu.com)

7.文字加粗：双星号包裹要加粗的文字

8.斜体：单星号包裹文字

9.文字颜色、字号等的修改：通过font标签进行修改，font中的属性，face用来修改字体，color用来修改颜色，size用来更改文字大小

10.文字居中：通过center标签，标签体内是居中的文字

11.居左居右：通过p标签包裹，标签内用align为left或right来设置位置，图片一样

事件的基本使用：

1.使用v-on:xxx或@xxx绑定事件，其中xxx是事件名

2.事件的回调需要配置在methods对象中，最终会在vm上

3.methods中配置的函数，不需要箭头函数，否则this就不是vm了

4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象

5.@click=”demo”和@click=”demo($event)”效果一致，但后者可以传参

<button @click="demo1">点击传参1</button>
<button @click="demo2($event,66)">点击传参2</button>

methods:{
    demo1(){     
    },
    demo2(event,number){
    }
}

传参时通过$event进行传参，接收时通过event进行接收

vue中的事件修饰符：

1.prevent:阻止默认事件

2.stop:阻止事件冒泡

3.once:事件只触发一次

4.capture:使用事件的捕获模式

5.self:只有event.target是当前操作的元素时才触发事件

6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕

ps:vue中事件修饰符可以连着写，如：@click.stop.prevent阻止事件冒泡和默认事件，效果与@click.prevent.click相同

1.prevent：点击a链接时会执行alert事件，然后跳转到百度，prevent阻止跳转到百度的默认事件

<a href="http://www.baidu.com" @click="demo">阻止默认行为1</a>
<a href="http://www.baidu.com" @click.prevent="demo2">阻止默认行为2</a>
methods:{
    demo(e){
        e.preventDefault()//阻止默认行为
        alert('同学，你好')
    },
    demo2(){
         alert('同学，你好')
    }
}

2.stop:点击button，其showmsg事件时会冒泡到父元素身上，父元素也会执行showmsg事件，stop阻止showmsg事件冒泡到父元素身上

 <div @click="showmsg" style="width: 200px;height:200px;background-color:#ccc">
      <button @click="showmsg">阻止冒泡事件1</button>
 </div>
 <div @click="showmsg2" style="width: 200px;height:200px;background-color:#ededed">
      <button @click.stop="showmsg2">阻止冒泡事件2</button>
 </div>
methods：{
   showmsg(e) {
          e.stopPropagation()
          alert('同学你好')
          },
  showmsg2() {
          alert('同学你好')
          }
}

3.once:事件只触发一次，后面事件不再触发

 <button @click.once="showmsg">事件只触发一次</button>

4.capture:事件分为捕获阶段和冒泡阶段，先捕获再冒泡，捕获阶段是由外到内的，冒泡阶段是由内到外的，假如没有阻止事件冒泡，应先输出2再输出1，capture则在捕获阶段处理事件，所以先输出1，再输出2

 <div @click="showinfo(1)" style="width: 200px;height:200px;background-color:#ededed">
     <div @click="showinfo(2)" style="height: 100px; width:100px;background-color:#ccc">捕获事件</div>
 </div>
 methods:{
      showinfo(number) {
          console.log(number)//2 1
      }
 }
 
 
  <div @click.capture="showinfo(1)" style="width: 200px;height:200px;background-color:#ededed">
     <div @click="showinfo(2)" style="height: 100px; width:100px;background-color:#ccc">捕获事件</div>
 </div>
 methods:{
      showinfo(number) {
          console.log(number)//1 2
      }
 }

5.self:e.target是当前操作元素时才触发,当div中的click事件使用.self修饰符时，点击button,由于e.target是button而不是当前div，所以没有触发div中的事件

  <div @click="demo" style="width: 200px;height:200px;background-color:#ededed">
     <button @click="demo" style="height: 100px; width:100px;background-color:#ccc">e.target</button>
  </div>
  methods:{
       demo(e) {
            console.log(e.target)//点击button时输出两次button代码，因为e.target是button
       }
  }

6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕。

​ scroll和wheel的区别：scroll是监听滚动条的滚动事件，鼠标滚轮和键盘上下键都可以触发，滚动条到底后再往下则不触发；whell监听的是鼠标滚轮的滚动事件，只要鼠标滚轮滚动就会触发事件。

  <ul @wheel="demo" style="height:200px;width:200px;background-color:#ccc;overflow: auto;">
         <li style="height: 100px;">1</li>
         <li style="height: 100px;">2</li>
         <li style="height: 100px;">3</li>
         <li style="height: 100px;">4</li>

  </ul>
  methods:{
       demo() {
             for (i = 0; i < 100000; i++) {
                console.log("xxx")
             }
            console.log("完成")

       }
  }

如果没加.passive修饰符，会先执行for循环，然后再滑动，加了以后不用等待for循环结束，直接滑动

keyup:键盘按下后抬起

keydown：键盘按下

1. Vue中常用的按键别名：

   • 回车 => enter

   • 删除 => delete(捕获“删除”和“退格”键)

   • 退出 => esc

   • 空格 => space

   • 换行 => tab(特殊，必须配合keydown使用)

   • 上 => up

   • 下 => down

   • 左 => left

   • 右 => right

     enter:按下回车后触发

     

​ 2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，需要注意的是，例如CapsLock这种需要转为caps-lock来使用

​ e.key:键盘按键名

​ e.keyCode:按键编码

​ 3.系统修饰符：ctrl、alt、shift、meta

• 配合keyup使用：按下修饰键的同时，再按下其他键，然后释放其他键，事件才会被触发

• 配合keydown使用：正常触发事件

• 只有按下特定按键才会触发：如@keyup.ctrl.y,只有按下ctrl和y两个按键时才会触发

  ​

  4.使用keyCode去指定具体按键，如keyup.13,但是不推荐

  5.定制按键别名：Vue.config.keyCodes.自定义键名=键码，如Vue.config.keyCodes.huiche=13

放一下天禹老师的ppt

笔记：

1.vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）

2.vue中数据代理的好处：更加方便的操作data中的数据（否则需要通过_data来拿数据）

3.基本原理：通过object.defineProperty()把data对象中所有属性添加到vm上

​ 为每一个添加到vm上的属性都指定一个getter/setter

​ 在getter/setter内部去操作（读/写）data中对应的属性

object.defineproperty():给一个对象定义一个新属性或修改一个对象的现有属性，并返回此对象。

object.defineproperty(object,’propName’,descriptor);

object:要定义的对象

propName:要定义/修改的属性名

descriptor:要定义/修改的属性描述

enumerable:控制属性是否可枚举，默认false

writeable:控制属性是否可修改，默认false

configurable:控制属性是否可被删除，默认false

get(){}:当有人读取属性时，get函数（getter）就会被调用，且返回值就是要定义/读取的值

set(value){}:当有人定义/修改属性时，set函数(setter)就会被调用，且会收到修改的具体值

一个简单的数据代理

let obj = { x: 100 }
let obj2 = { y: 200 }


Object.defineProperty(obj2, 'x', {
    get() {
        return obj.x
    },
    set(value) {
        obj.x = value
    }
})

obj2.x = 300
console.log(obj.x, obj2.x)//300 300

1. 具有 href 属性的 a 标签是超链接，具有 name 属性的 a 标签是锚点。

2. name 和 id 都是区分大小写的，且 id 最好别是数字开头。

3. 具体使用方式：

   <!-- 第一种方式：a标签配合name属性 -->
   <a name="test1"></a>
   <!-- 跳转到test1锚点-->
   <a href="#test1">去test1锚点</a>
   
   推荐：
   <!-- 第二种方式：其他标签配合id属性 -->
   <h2 id="test2">我是一个位置</h2>
   <!-- 跳转到test2锚点-->
   <a href="#test2">去test1锚点</a>
   

   ​

   <!-- 跳到本页面顶部 -->
   <a href="#">回到顶部</a>
   
   <!-- 跳转到其他页面锚点 -->
   <a href="demo.html#test1">去demo.html页面的test1锚点</a>
   
   <!-- 刷新本页面 -->
   <a href="">刷新本页面</a>
   
   <!-- 执行一段js,脚本放在:与;之间，可以留空，javascript:; -->
   <a href="javascript:alert(1);">点我弹窗</a>
   

4.超链接可以唤起指定应用

<!-- 唤起设备拨号 -->
<a href="tel:10010">电话联系</a>

<!-- 唤起设备发送邮件 -->
<a href="mailto:10010@qq.com">邮件联系</a>

<!-- 唤起设备发送短信 -->
<a href="sms:10086">短信联系</a>