• 浅谈 vue实例 和 vue组件


    vue实例: 

    import Vue from 'vue';
    import app from './app';
    import myRouter from './routers';
    
    new Vue({
        el: '#app', //渲染目标
        router: myRouter, //前端路由,整个项目的路由都在这
        template: '<App />', //渲染内容
        components: { //内容内使用到的组件
            App: app
        },
        data:{ //需要用到的数据,根实例一般不需要用
            num1: 5,
            num2: 8,
        },
        methods:{ //需要用到的方法,根实例一般不需要用
            fn1(){
                // .....
            },
            fn2(){
                // .....
            }
        },
        computed:{ //特殊的data,get和set之前都先经过自定义处理
            b(){ //简写相当于只有get
                return 'bbbbb'
            },
            c:{ //完整版
                get(){
                    return 'ccc'
                },
                set(val){
                    this.a = val;
                }
            }
        },
        watch:{ //检测变量的变化
            num1(n,o){
                console.log(n,o);
            }
        }
    })

    Vue组件:

    相当于上面import的app

    export default {
      template: `<div>{{a}}<span v-html="a"></span></div>`.
      data(){
        return{
            a: '你好,<strong>张啊咩</strong>',
            dataC: '',
            dataD: ''
        }
      },
      methods:{
          fn1() {},
          fn2() {},
      },
      computed:{
          b(){
              return 'bbbbb'
          },
          c:methods:{
          fn1() {},
          fn2() {},
      }{
              get(){
                  return this.dataC;
              },
              set(val){
                  this.dataC = parseInt(val)
              }
          },
          d:{
              get(){
                  return this.dataD;
              },
              set(val){
                  this.dataD = parseInt(val)
              }
          }
      },
      watch:{
          d(newVal,oldVal){
              console.log(newVal,oldVal);
          }
      },
      props: ['inputData1','inputData2'],
      mixins: [
        {
            methods:{
                fn3() {}
            }
        },
        {
            data(){
                return {
                  dataE: ''  
                }
            },
            methods:{
                fn4() {}
            }
        }
      ],
      extends: {
        methods:{
            fn5() {}
        }
      },
      delimiters: ['<%=','%>'],
      beforeRouteEnter:(to,from,next)=>{ //组件进入的路由钩子
         console.log("准备进入");
         next();
      },
      beforeRouteLeave: (to, from, next) => { //组件离开的路由钩子
         console.log("准备离开");
         next();
      }
    }

    区别

    其实vue实例和vue组件本质都是一个组件而已,大家的属性基本是一样的

    但是vue实例会比vue组件多出el和router属性,而vue组件的data会被要求必须是函数,防止出现同种组件多实例共享同一个data的事情


    vue实例的高逼格写法

    import App from 'app';
    
    new Vue({
        render: h =>h(App)
    }).$mount('#app')

    我们经常写出一些整个应用就只有一个组件。

    所以为了方便,

    原来的  template、components   ------变成------>   render: h=>h(App)

    原来的  el   ------变成------>   .$mount('#app')  

    ps:mount是挂载的意思


    值得注意的是里面的methods

    我们千万不要把里面的方法写成箭头函数的形式 

    因为我们避免不了在这些方法里面写this,若写成箭头函数,this的指向就会变成未被编译成vue对象的这个配置obj

  • 相关阅读:
    010 排序: 冒泡 选择
    洛谷 P1540 机器翻译
    洛谷 P1011 车站
    周期串
    2019.03.29 大数据图解
    2019.03.29 算法解读
    2019.03.28 博客反省
    2019.03.27 常用的模块
    2019.03.25 git
    2019.03.25 Ajax三级联动
  • 原文地址:https://www.cnblogs.com/amiezhang/p/8366194.html
Copyright © 2020-2023  润新知