methods中的this的指向

在methods中，普通方法调用this时，指向是data:funcation(){}中的数据
但是在箭头函数中，this的指向是window，调用不了data中的数据
https://mp.weixin.qq.com/s/hYm0JgBI25grNG_2sCRlTA

Vue3的基本指令

1.Mustche双大括号语法：{{...}}

  里面可以写data里的数据名，也可以是一个表达式:num++,但是不建议写太长的表达式；

2.v-once

  用于指定元素或组件【只渲染一次】
      <h2 v-once>{{count++}}</h2>
  如果放到大标签<div v-once>...</div>
      div里面所有用到的数据，都只会更新一次

3.v-text

      <h2 v-text="msg"></h2>
 等价于<h2>{{msg}}</h2>

4.v-html

      默认情况，vue是不会解析html代码的，写上v-html，vue就会解析
      data(){
          return{
              msg:<span>....</span>
          }
      }
      在调用的时候{{msg}}实际上输出的是html，但是如果<div v-html>
   输出出来的就是被解析过的数据

5.v-pre

       如果有的内容，我们不希望被解析，就使用该指令
       <h2 v-pre>{{msg}}</h2>   此时输出的就不是msg真正的内容，而是{{msg}}

6.v-bind绑定属性

      某些属性，我们也希望动态来绑定，比如a标签的href属性、img标签的src属性
      缩写就是' : ',一个冒号
      动态绑定一个或多个属性，或一个组件prop到表达式
        
      <img :src="imgURL">
      
      data(){
          return{
              imgURL:"www.baidu.com"
          }
      }

7. v-bind动态绑定属性名称

      <div :[name]="value"></div>
      可以将name变成一个标签，值由value来决定
      
      data(){
          return{
            name:"abc",
            value:"123"
          }
      }

8.v-bind属性直接绑定一个对象

      <div v-bind="info"></div>
      data(){
          return{
              info:{
                name:"abc",
                value:"123"
              }
          }
      }

9.v-on绑定方法事件

      简写是：“ @ ”，一个艾特符号
      <button @click="btnClick">点击</button>  
      methods:{
          btnClick(){
              ...
          }
      }
         
 补充：v-on的参数传递
      在这里必须要用 $event，才能将event传递出去
      
      <button @click="btnClick($event,'coderwhy')">点击</button>    
      methods:{
          btnClick(event,name){
              consolo.log(event,name)
          }
      }
      
      注：当一个参数都没写的时候，会默认传一个event对象

10.v-on的修饰符

       <button @click.stop="btnClick"/>停止冒泡

图片.png

Vue01-coderwhy

methods中的this的指向

Vue3的基本指令