import titleCom from "@/components/home/titleCom";
import bannerCom from "@/components/home/bannerCom";
import cellCom from "@/components/home/cellCom";
components: {
  titleCom, bannerCom, cellCom;
}

const path = require("path");
const files = require.context("@/components/home", false, /\.vue$/);
const modules = {};
files.keys().forEach((key) => {
  const name = path.basename(key, ".vue");
  modules[name] = files(key).default || files(key);
});
components: modules;

created(){
  this.getList()
},
watch: {
  inpVal(){
    this.getList()
  }
}

watch: {
  inpVal:{
    handler: 'getList',
      immediate: true
  }
}

watch:{
  inpValObj:{
    handler(newVal,oldVal){
      console.log(newVal)
      console.log(oldVal)
    },
    deep:true
  }
}

// 数组:不建议使用
props:[]
// 对象
props:{
 inpVal:{
  type:Number, //传入值限定类型
  // type 值可为String,Number,Boolean,Array,Object,Date,Function,Symbol
  // type 还可以是一个自定义的构造函数，并且通过 instanceof 来进行检查确认
  required: true, //是否必传
  default:200,  //默认值,对象或数组默认值必须从一个工厂函数获取如 default:()=>[]
  validator:(value)=> {
    // 这个值必须匹配下列字符串中的一个
    return ['success', 'warning', 'danger'].indexOf(value) !== -1
  }
 }
}

props: {
  width: {
    type: String,
    default: ''
  }
},
mounted() {
  console.log(this.$attrs) //{title: "这是标题", height: "80", imgUrl: "imgUrl"}
}

//父组件:
provide: { //provide 是一个对象,提供一个属性或方法
  foo: '这是 foo',
  fooMethod:()=>{
    console.log('父组件 fooMethod 被调用')
  }
},
// 子或者孙子组件
inject: ['foo','fooMethod'], //数组或者对象,注入到子组件
mounted() {
  this.fooMethod()
  console.log(this.foo)
}
//在父组件下面所有的子组件都可以利用inject

//父组件:
provide: {
  foo: '这是 foo'
},
mounted(){
  this.foo='这是新的 foo'
}
// 子或者孙子组件
inject: ['foo'],
mounted() {
  console.log(this.foo) //子组件打印的还是'这是 foo'
}

//父组件
mounted(){
  console.log(this.$children)
  //可以拿到 一级子组件的属性和方法
  //所以就可以直接改变 data,或者调用 methods 方法
}
//子组件
mounted(){
  console.log(this.$parent) //可以拿到 parent 的属性和方法
}

// 父组件
mounted(){
  console.log(this.$root) //获取根实例,最后所有组件都是挂载到根实例上
  console.log(this.$root.$children[0]) //获取根实例的一级子组件
  console.log(this.$root.$children[0].$children[0]) //获取根实例的二级子组件
}

// 在 main.js
Vue.prototype.$eventBus = new Vue();
// 传值组件
this.$eventBus.$emit("eventTarget", "这是eventTarget传过来的值");
// 接收组件
this.$eventBus.$on("eventTarget", (v) => {
  console.log("eventTarget", v); //这是eventTarget传过来的值
});

function broadcast(componentName, eventName, params) {
  this.$children.forEach((child) => {
    var name = child.$options.componentName;
    if (name === componentName) {
      child.$emit.apply(child, [eventName].concat(params));
    } else {
      broadcast.apply(child, [componentName, eventName].concat(params));
    }
  });
}
export default {
  methods: {
    dispatch(componentName, eventName, params) {
      var parent = this.$parent;
      var name = parent.$options.componentName;
      while (parent && (!name || name !== componentName)) {
        parent = parent.$parent;
        if (parent) {
          name = parent.$options.componentName;
        }
      }
      if (parent) {
        parent.$emit.apply(parent, [eventName].concat(params));
      }
    },
    broadcast(componentName, eventName, params) {
      broadcast.call(this, componentName, eventName, params);
    },
  },
};

// 路由定义
{
  path: '/describe/:id',
  name: 'Describe',
  component: Describe
}
// 页面传参
this.$router.push({
  path: `/describe/${id}`,
})
// 页面获取
this.$route.params.id

// 路由定义
{
  path: '/describe',
  name: 'Describe',
  component: Describe
}
// 页面传参
this.$router.push({
  name: 'Describe',
  params: {
    id: id
  }
})
// 页面获取
this.$route.params.id

// 路由定义
{
  path: '/describe',
  name: 'Describe',
  component: Describe
}
// 页面传参
this.$router.push({
  path: '/describe',
    query: {
      id: id
  `}
)
// 页面获取
this.$route.query.id

// 工厂函数执行 resolve 回调
Vue.component("async-webpack-example", function (resolve) {
  // 这个特殊的 `require` 语法将会告诉 webpack
  // 自动将你的构建代码切割成多个包, 这些包
  // 会通过 Ajax 请求加载
  require(["./my-async-component"], resolve);
});
// 工厂函数返回 Promise
Vue.component(
  "async-webpack-example",
  // 这个 `import` 函数会返回一个 `Promise` 对象。
  () => import("./my-async-component")
);
// 工厂函数返回一个配置化组件对象
const AsyncComponent = () => ({
  // 需要加载的组件 (应该是一个 `Promise` 对象)
  component: import("./MyComponent.vue"),
  // 异步组件加载时使用的组件
  loading: LoadingComponent,
  // 加载失败时使用的组件
  error: ErrorComponent,
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时时间且组件加载也超时了，
  // 则使用加载失败时使用的组件。默认值是：`Infinity`
  timeout: 3000,
});

export default {
  components: { home },
};

Vue.component("home", home);

// 创建构造器
var Profile = Vue.extend({
  template: "<p>{{extendData}}</br>实例传入的数据为:{{propsExtend}}</p>", //template对应的标签最外层必须只有一个标签
  data: function () {
    return {
      extendData: "这是extend扩展的数据",
    };
  },
  props: ["propsExtend"],
});
// 创建的构造器可以挂载到元素上,也可以通过 components 或 Vue.component()注册使用
// 挂载到一个元素上。可以通过propsData传参.
new Profile({ propsData: { propsExtend: "我是实例传入的数据" } }).$mount(
  "#app-extend"
);
// 通过 components 或 Vue.component()注册
Vue.component("Profile", Profile);

const mixin = {
  created() {
    this.dealTime();
  },
  methods: {
    dealTime() {
      console.log("这是mixin的dealTime里面的方法");
    },
  },
};
export default {
  mixins: [mixin],
};

const extend = {
  created() {
    this.dealTime();
  },
  methods: {
    dealTime() {
      console.log("这是mixin的dealTime里面的方法");
    },
  },
};
export default {
  extends: extend,
};

var MyPlugin = {};
MyPlugin.install = function (Vue, options) {
  // 2. 添加全局资源,第二个参数传一个值默认是update对应的值
  Vue.directive("click", {
    bind(el, binding, vnode, oldVnode) {
      //做绑定的准备工作,添加时间监听
      console.log("指令my-directive的bind执行啦");
    },
    inserted: function (el) {
      //获取绑定的元素
      console.log("指令my-directive的inserted执行啦");
    },
    update: function () {
      //根据获得的新值执行对应的更新
      //对于初始值也会调用一次
      console.log("指令my-directive的update执行啦");
    },
    componentUpdated: function () {
      console.log("指令my-directive的componentUpdated执行啦");
    },
    unbind: function () {
      //做清理操作
      //比如移除bind时绑定的事件监听器
      console.log("指令my-directive的unbind执行啦");
    },
  });
  // 3. 注入组件
  Vue.mixin({
    created: function () {
      console.log("注入组件的created被调用啦");
      console.log("options的值为", options);
    },
  });
  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    console.log("实例方法myMethod被调用啦");
  };
};
//调用MyPlugin
Vue.use(MyPlugin, { someOption: true });
//3.挂载
new Vue({
  el: "#app",
});

mounted(){
//因为 mounted 阶段 dom 并未渲染完毕,所以需要$nextTick
  this.$nextTick(() => {
    this.$refs.inputs.focus() //通过 $refs 获取dom 并绑定 focus 方法
  })
}

// 使用
// 在双花括号中
{
  {
    message | capitalize;
  }
}
// 在 `v-bind` 中
<div v-bind:id="rawId | formatId"></div>;
// 全局注册
Vue.filter("stampToYYMMDD", (value) => {
  // 处理逻辑
});
// 局部注册
filters: {
  stampToYYMMDD: (value) => {
    // 处理逻辑
  };
}
// 多个过滤器全局注册
// /src/common/filters.js
let dateServer = (value) => value.replace(/(\d{4})(\d{2})(\d{2})/g, "$1-$2-$3");
export { dateServer };
// /src/main.js
import * as custom from "./common/filters/custom";
Object.keys(custom).forEach((key) => Vue.filter(key, custom[key]));

var res = Vue.compile("<div><span>{{ msg }}</span></div>");
new Vue({
  data: {
    msg: "hello",
  },
  render: res.render,
  staticRenderFns: res.staticRenderFns,
});

var version = Number(Vue.version.split(".")[0]);
if (version === 2) {
  // Vue v2.x.x
} else if (version === 1) {
  // Vue v1.x.x
} else {
  // Unsupported versions of Vue
}

Vue.config.performance = true;

Vue.config.errorHandler = function (err, vm, info) {
  // handle error
  // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
  // 只在 2.2.0+ 可用
};

Vue.config.warnHandler = function (msg, vm, trace) {
  // `trace` 是组件的继承关系追踪
};

router.beforeEach((to, from, next) => {
  console.log("全局前置守卫：beforeEach -- next需要调用"); //一般登录拦截用这个,也叫导航钩子守卫
  if (path === "/login") {
    next();
    return;
  }
  if (token) {
    next();
  }
});

beforeRouteEnter (to, from, next) {
  // 这里还无法访问到组件实例，this === undefined
  next( vm => {
    // 通过 `vm` 访问组件实例
  })
}

new Vue({
  data: {
    // vue不会对list里的object做getter、setter绑定
    list: Object.freeze([{ value: 1 }, { value: 2 }]),
  },
  mounted() {
    // 界面不会有响应,因为单个属性被冻结
    this.list[0].value = 100;
    // 下面两种做法，界面都会响应
    this.list = [{ value: 100 }, { value: 200 }];
    this.list = Object.freeze([{ value: 100 }, { value: 200 }]);
  },
});

// vue-cli 2.x在vue-loader.conf.js 默认配置是
transformToRequire: {
    video: ['src', 'poster'],
    source: 'src',
    img: 'src',
    image: 'xlink:href'
}
// 配置文件,如果是vue-cli2.x 在vue-loader.conf.js里面修改
  avatar: ['default-src']
// vue-cli 3.x 在vue.config.js
// vue-cli 3.x 将transformToRequire属性换为了transformAssetUrls
module.exports = {
  pages,
  chainWebpack: config => {
    config
      .module
        .rule('vue')
        .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
      options.transformAssetUrls = {
        avatar: 'img-src',
      }
      return options;
      });
  }
}
// page 代码可以简化为
<template>
  <div>
    <avatar img-src="./assets/default-avatar.png"></avatar>
  </div>
</template>

// 在 webpack.base.config.js中的 resolve 配置项，在其 alias 中增加别名
resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  }

// 在根目录下创建vue.config.js
var path = require("path");
function resolve(dir) {
  console.log(__dirname);
  return path.join(__dirname, dir);
}
module.exports = {
  chainWebpack: (config) => {
    config.resolve.alias.set(key, value); // key,value自行定义，比如.set('@@', resolve('src/components'))
  },
};