图片左右两侧可以作为一个对比参照,下面会把Vue分为五部分讲解,前四部分作为基础概念,最后聊比较重要的注意事项

1.el:

        el标签定义了Vue的作用范围,可以使用id选择器或者是类选择器,都可以,比较容易理解.

2.data:{}

        data标签定义了Vue中使用到的模型的键和值,以键:值的形式定义,多个参数之间使用逗号分割,参数可以是基本数据类型,数组,对象等等,项目开发中大多使用模型的双向绑定,可以通过参数的赋值改变页面的展示效果.在页面中可以多个位置使用同一个被定义的data数据,但是一旦参数改变,使用同一个数据的地方都会受到影响,有特殊需求的可以使用,一般不建议.

3.methods{}

        methods标签是定义方法的位置,可以定义多个方法,方法区最重要的是方法的被调用关系,在页面标签中,可以在页面标签中绑定监听事件调用,比如当按钮被点击时,当光标离开时等等,方法与方法之间也可以相互调用.

4.生命周期相关的函数(或者说叫钩子函数)

        生命周期相关的函数直接定义在Vue中,并不是定义在methods里边,这一点需要注意,生命周期指的是从Vue的创建到Vue的销毁的过程,相关函数是随着生命周期的过程自动执行的,举个例子,钩子函数其中的mounted方法,在vue初始化完成后会被自动调用,一般页面加载完成后需要执行的操作都会定义在mounted函数中,还有一个比较常用就是当vue销毁的时候自动执行的函数.核心在于生命周期的相关函数是在程序执行到某一阶段是会自动执行的方法,可以利用这一特性做一些特殊操作

5.this的使用需要特别注意

        说到this的使用,就不得不提js中的函数定义的方式,

        第一种是使用function method(){ ... } 定义

        第二种是使用箭头函数的形式 () => { ... } 定义

        使用第一种方式定义的函数中this表示方法的调用者,比如说如果是method方法是被某个按钮buttton的单击事件所调用,this就表示这个button,但是如果是第二种方式定义的函数,意义就完全不同,如果是第二种箭头函数中使用this,这个this代表的是该函数所在的对象,这一点在vue中使用异步请求获取数据的时候非常容易出错,如果是下面这种:

        axios.get("/路径名").then((resp) => { this.data })

这种方式中的this代表该异步请求所在对象,但是如果是下边第二种定义方式:

        axios.get("/路径名").then(function (resp){ this.data })

这种方式中的this代表的是调用这个function函数的对象,两者的this有本质的区别,一定要特别注意!!!