Vue学习之路-基础语法学习

1.vue是渐进式JavaScript框架，是在核心库的基础上添加不同需求的插件，属于声明式开发;

1.1 遵循MVVM模式

1.1.1 M是Modle，数据对象data；

1.1.2 V是View，模板中的html页面视图；

1.1.3 ViewModle，是所创建的vue实例，包括数据绑定（将内存中数据和页面绑定）和DOM监听，是用于处理数据和页面绑定、交互等操作；

2.Vue的插件

2.1 vue-cli：vue脚手架,用于项目搭建；

2.2 axios：用于处理ajax请求，进行前后端交互；

2.3 vuex：用于vue的状态管理；

2.4 vue-router：用于vue路由管理；

2.5 mint-ui：第三方组件库，基于vue的UI组件库，常用于处理移动端项目；

2.6 emlement-ui：第三方组件库，基于vue的UI组件库，常用于处理PC端项目；

3.基础语法

const vm = new Vue({
    el:"需要绑定的id"，
    data:{
       //需要操作的数据
    }，
   method:{
     //需要绑定的方法
   }，
   computed:{
    //需要计算的属性
     test(){
     //计算属性中的方法，该方法的返回值作为属性返回；
       return XXX；
      }，
      //对象属性的监听
      test123:{
          get(){
            //相关业务代码
           }
          set(){
            //相关业务代码
           }

      }
   }，
   watch:{//配置监视
   //需要监听的属性
    test1：function(newVal,oldVal){
    //监听test1,并设置test1的回调函数，参数是新的值和之前的值，在方法体中可以添加相关业务代码； 
    }
   }
})
//vue实例方法监视test2属性的变化
vm.$watch('test2',function(newVal,oldVal){
//通过监听到的新值和旧值编写相关业务代码
})

3.2 v-bind:XXX：双向数据绑定，可以用“:”代替，eg：:test="test123"；

3.3 v-on:click：用于方法绑定，可以用“@”代替，eg：@testClick(parm);

3.4 v-text：作用是textContent，将数据添加成文本

3.5 v-html：作用是innerHTML，将数据改变文本、 URL及链接目标:

3.6 computed计算属性：会在初始化调用计算属性中的方法，并且在这些方法中涉及的属性发生改变时，也会调用一次该方法然后计算后返回新的值，存在缓存，多次读取只执行一次getter方法；

3.8 watch监听：设置需要监听属性,并设置需要监听属性的回调函数，参数是新的值和之前的值，在方法体中可以添加相关业务代码； 

3.9 get：属性的回调函数，当读取当前属性值时回调，根据计算并返回当前属性的值；

3.10 set：属性的回调函数是监视，一旦属性值改变就会调用，将最新的值更新所计算的属性

3.11 class样式绑定，有三种方式，一种是属性绑定通过传递一个属性，比如:class="XXX";还有一种是作为一个对象进行绑定，比如:class="{class1:boolean1,class2:boolean2}"再在方法中对boolean1和boolean2两个属性的值进行相关业务设置；还有一种用的比较少的绑定方式是将class样式汇聚成一个数组的形式，比如:class="['class1','class2','class3']"；

3.12 style样式绑定，通过:style="{键1：值1，键2：值2，键3：值3}"的形式进行定义，值可以设置变量通过业务代码方法进行设置