vue2.X基础知识

vue2.X基础知识点

1.vue的优点

​ 渐进式：学一点，用一点，不用把vue全家桶里面所有的知识都学完才开发项目，后期的话我们学的越多就可以使用vue的全家桶（vue，vue-router，vuex）来进行开发。

​ 数据驱动，响应式开发：只需要修改数据，就可以自动更新渲染视图。

​ 双向数据绑定：表单里面输入数据，自动同步数据到data中

​ 体积非常小，压缩以后，这个vue的库只有20kb，

​ 性能高：不操作dom,vue自带虚拟dom，vue的底层会自动帮我们操作dom，比我们操作dom的性能要高

​ 生态非常繁荣：配套的周边的资源非常丰富：仓库（vuex),路由库（vue-router），配套的ui库非常丰富（element系列，vant系列，antd)

2.脚手架的区别

​ @vue/cli 与vue-cli

​ 区别：版本不一样。

​ @vue/cli:可以搭建vue2&vue3的项目

​ 搭建出来的项目，webpack的配置是隐藏起来的，我们要对webpack进行配置，都需要创建一个vue.config.js文件来进行配置

​ vue-cli:可以搭建vue1.0&vue2.0的项目

​ 搭建出来的项目，webpack的配置是被暴露出来的。

3.vue的组件

• 局部组件

  • 创建组件
  • 引入组件
  • 注册组件

• 全局组件

  • 创建组件

  • 在main.js引入组件

    // 引入全局组件的示例
    import Father from './components/father.vue'
    

  • 在main.js通过vue.component（组件名，组件实例）

    // 注册全局组件
    Vue.component('Father',Father)
    

  • 运用场景：多次需要使用，需要复用。

4.组件间的通讯

• 子传父

  • 子组件需要定义好传送的数据

  • 子组件可以通过绑定事件，也可以不绑定事件来传送

  • 子组件通过this.$emit(‘自定义的事件’，传送的数据)

     this.$emit('changeVal',this.msg1)
    

    • 父组件通过v-on绑定子组件传过来的自定义事件转换位自己的事件，在methods里面调用这个事件，通过传一个形参，就可以获取子组件中传过来的数据

    <Son :msg='msg' @changeVal='change'/>
    methods:{
       
        change(val){
       
            console.log(val,111);
            this.msg = val
        }
    }
  

• 父传子

  • 父组件通过自定义属性传参

     <Son :msg='msg' @changeVal='change'/>
    

    • 子组件通过props接受

   // props:['msg']
          props:{
       
              msg:{
       
                  type:String,   //设置父组件传递过来的数据类型	     String,Number,boolean,null,undefinend,Object,Array
                  require:true,   //设置是否必传，
                  default:'我是默认值哦' //设置默认值
              }
          },
  

• 中央事件总线

  • 在main.js new一个vue的示例对象，把这个属性对象了挂载在vue的原型上，一般叫$bus

    Vue.prototype.$bus = new Vue()
    

    • 兄弟1组件，可以通过this.$bus.$emit(‘自定义事件’，参数)

  this.$bus.$emit('msg',this.msg)    
  

  • 兄弟组件2，可以通过this.$bus.$on(‘传递过来的自定义事件’,(val)=>{val就可以获取到兄弟组件1传输过来的数据})

   this.$bus.$on('msg',(item)=>{
       
       console.log(item,2222);
       this.val =item
   })
  

• vuex

  • vue的状态管理（状态机，仓库），一般运用于大型项目，小型用的比较少，一般用于公用数据存储。
  • 五大属性
    • state
      • state一般用于存储数据的 =》 vue中的data。 取：this.$store.state.要去的数据 =》辅助函数mapState也可以取数据，一般结合computed来一起使用的
    • mutations
      • mutations 修改数据的唯一方法，改&增：this.$store.commit(‘mutations里面定义的函数’，要改&增的数据)=》辅助函数mapMutations ,一般结合methods来一起使用的. 所有的操作都是同步
    • actions
      • 异步操作，操作一些异步的数据，修改数据的话，还是需要调用mutations 里面的commit的方法来修改=》store.commit(‘mutations里面定义的函数’，要改&增的数据).调用action一般使用this.$store.dispatch(‘actions里面定义的方法’，需要传递的数据)=》mapActions,一般结合methods来一起使用的
    • getters
      • vuex的计算属性 == computed， 一定要有返回值 =》辅助函数mapGetters
    • module
      • 仓库的模块化，运用场景：项目模块比较多，都要使用vuex的时候，分模块使用，利于管理

5.动态&表单*

​ 封装一个表单，在不同的表单组件里面都可以使用。

​ 1.封装一个表单的组件，里面所有的数据全部都搞成动态（input，select，radio，checkbox,textarea)通过在父组件中传递的数据，进行v-for循环，然后进行v-if的判断，来进行渲染。获取到表单里面的数据我们通过子传父，传给父组件就行了。

​ 2.在父组件中，把我们需要传递到子组件中的数据封装好，父传子传递过去就行。

6.生命&周期

​ 共11个，其中8个常用的，3个不常用

​ 创建阶段

• beforeCreate

• created

  多用于发送请求

  面试题：如何在created里dom.

  答案:this.$nextTick() == vue.nextTick()。

  面试题：请你说说$nexttick的作用

  答案：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

  <p ref='app' id="app"/>
  this.$refs.app  == documnet.getElementById('app')
  

  挂载阶段

• beforeMount

• mounted

  dom生成，可以操作dom

  更新阶段

• beforeUpdate

• updated

  销毁阶段

• beforeDestory

• destoryed

  运用场景：项目的性能优化（清除定时器，解绑事件，解绑不必要的全局变量）

7.路由vue-router

• 路由模式

  • hash(默认模式 ---- 浏览器环境)
    • 底层基于onhashchange
  • history（浏览器环境）
    • 底层基于pushState
    • 缺点：项目打包以后，对页面进行刷新，会报错404. 需要后端对页面进行重定向
  • abstract（node.js环境）
    • 基本不用（了解项）

• 路由守卫

  • 前置守卫：beforeEach(to，from,next)

    • to:去哪儿
    • from:从哪儿来
    • next:放行
      • next():放行到某个页面
      • next(‘/goods’) 放行到规定的页面（商品），

  • 解析守卫：beforeResolve

  • 后置守卫：afterEach

  • 路由独享守卫：beforeEnter

  • 组件守卫：

     beforeRouteEnter(to, from) {