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(oldVal,newVal){
  console.log(oldVal)
  console.log(newVal)
 },
 deep:true
 }
}

// 數(shù)組:不建議使用
props:[]

// 對象
props:{
 type:Number, //傳入值限定類型
 // type 值可為String,Number,Boolean,Array,Object,Date,Function,Symbol
 // type 還可以是一個(gè)自定義的構(gòu)造函數(shù)，并且通過 instanceof 來進(jìn)行檢查確認(rèn)
 required: true, //是否必傳
 default:200, //默認(rèn)值,對象或數(shù)組默認(rèn)值必須從一個(gè)工廠函數(shù)獲取如 default:()=>[]
 validator:(value) {
 // 這個(gè)值必須匹配下列字符串中的一個(gè)
 return ['success', 'warning', 'danger'].indexOf(value) !== -1
 }
}

// 父組件
<home @title="title">
// 子組件
this.$emit('title',[{title:'這是title'}])

// 父組件
<home title="這是標(biāo)題" width="80" height="80" imgUrl="imgUrl"/>

// 子組件
mounted() {
 console.log(this.$attrs) //{title: "這是標(biāo)題", width: "80", height: "80", imgUrl: "imgUrl"}
},

props: {
 width: {
 type: String,
 default: ''
 }
},
mounted() {
 console.log(this.$attrs) //{title: "這是標(biāo)題", height: "80", imgUrl: "imgUrl"}
},

// 父組件
<home @change="change"/>

// 子組件
mounted() {
 console.log(this.$listeners) //即可拿到 change 事件
}

// 父組件
<home title="這是標(biāo)題" width="80" height="80" imgUrl="imgUrl"/>

// 子組件
mounted() {
 console.log(this.$attrs) //{title: "這是標(biāo)題", width: "80", height: "80", imgUrl: "imgUrl"}
},

inheritAttrs默認(rèn)值為 true,也就是父組件上的屬性會顯示到根組件上
如果設(shè)置為 false 就會隱藏

//父組件:
provide: { //provide 是一個(gè)對象,提供一個(gè)屬性或方法
 foo: '這是 foo',
 fooMethod:()=>{
 console.log('父組件 fooMethod 被調(diào)用')
 }
},

// 子或者孫子組件
inject: ['foo','fooMethod'], //數(shù)組或者對象,注入到子組件
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,或者調(diào)用 methods 方法
}

//子組件
mounted(){
 console.log(this.$parent) //可以拿到 parent 的屬性和方法
}

// 父組件
<home ref="home"/>

mounted(){
 console.log(this.$refs.home) //即可拿到子組件的實(shí)例,就可以直接操作 data 和 methods
}

// 父組件
mounted(){
 console.log(this.$root) //獲取根實(shí)例,最后所有組件都是掛載到根實(shí)例上
 console.log(this.$root.$children[0]) //獲取根實(shí)例的一級子組件
 console.log(this.$root.$children[0].$children[0]) //獲取根實(shí)例的二級子組件
}

// 父組件
<home :title.sync="title" />
//編譯時(shí)會被擴(kuò)展為
<home :title="title" @update:title="val => title = val"/>

// 子組件
// 所以子組件可以通過$emit 觸發(fā) update 方法改變
mounted(){
 this.$emit("update:title", '這是新的title')
}

// 父組件
<todo-list> 
 <template v-slot:default>
  任意內(nèi)容
  <p>我是匿名插槽 </p>
 </template>
</todo-list> 

// 子組件
<slot>我是默認(rèn)值</slot>
//v-slot:default寫上感覺和具名寫法比較統(tǒng)一,容易理解,也可以不用寫

// 父組件
<todo-list> 
 <template v-slot:todo>
  任意內(nèi)容
  <p>我是匿名插槽 </p>
 </template>
</todo-list> 

//子組件
<slot name="todo">我是默認(rèn)值</slot>

// 父組件
<todo-list>
 <template v-slot:todo="slotProps" >
 {{slotProps.user.firstName}}
 </template> 
</todo-list> 
//slotProps 可以隨意命名
//slotProps 接取的是子組件標(biāo)簽slot上屬性數(shù)據(jù)的集合所有v-bind:user="user"

// 子組件
<slot name="todo" :user="user" :test="test">
 {{ user.lastName }}
 </slot> 
data() {
 return {
  user:{
  lastName:"Zhang",
  firstName:"yue"
  },
  test:[1,2,3,4]
 }
 },
// {{ user.lastName }}是默認(rèn)數(shù)據(jù) v-slot:todo 當(dāng)父頁面沒有(="slotProps")

// 在 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
}
// 頁面?zhèn)鲄?
this.$router.push({
 path: `/describe/${id}`,
})
// 頁面獲取
this.$route.params.id

// 路由定義
{
 path: '/describe',
 name: 'Describe',
 omponent: Describe
}
// 頁面?zhèn)鲄?
this.$router.push({
 name: 'Describe',
 params: {
 id: id
 }
})
// 頁面獲取
this.$route.params.id

// 路由定義
{
 path: '/describe',
 name: 'Describe',
 component: Describe
}
// 頁面?zhèn)鲄?
this.$router.push({
 path: '/describe',
 query: {
  id: id
 `}
)
// 頁面獲取
this.$route.query.id

// 文件路徑 - /store/store.js
import Vue from 'vue'

export const store = Vue.observable({ count: 0 })
export const mutations = {
 setCount (count) {
 store.count = count
 }
}

//使用
<template>
 <div>
  <label for="bookNum">數(shù) 量</label>
   <button @click="setCount(count+1)">+</button>
   <span>{{count}}</span>
   <button @click="setCount(count-1)">-</button>
 </div>
</template>

<script>
import { store, mutations } from '../store/store' // Vue2.6新增API Observable

export default {
 name: 'Add',
 computed: {
 count () {
  return store.count
 }
 },
 methods: {
 setCount: mutations.setCount
 }
}
</script>

// 根據(jù) props 生成標(biāo)簽
// 初級
<template>
 <div>
 <div v-if="level === 1"> <slot></slot> </div>
 <p v-else-if="level === 2"> <slot></slot> </p>
 <h1 v-else-if="level === 3"> <slot></slot> </h1>
 <h2 v-else-if="level === 4"> <slot></slot> </h2>
 <strong v-else-if="level === 5"> <slot></slot> </stong>
 <textarea v-else-if="level === 6"> <slot></slot> </textarea>
 </div>
</template>

// 優(yōu)化版,利用 render 函數(shù)減小了代碼重復(fù)率
<template>
 <div>
 <child :level="level">Hello world!</child>
 </div>
</template>

<script type='text/javascript'>
 import Vue from 'vue'
 Vue.component('child', {
 render(h) {
  const tag = ['div', 'p', 'strong', 'h1', 'h2', 'textarea'][this.level]
  return h(tag, this.$slots.default)
 },
 props: {
  level: { type: Number, required: true } 
 }
 }) 
 export default {
 name: 'hehe',
 data() { return { level: 3 } }
 }
</script>

// 工廠函數(shù)執(zhí)行 resolve 回調(diào)
Vue.component('async-webpack-example', function (resolve) {
 // 這個(gè)特殊的 `require` 語法將會告訴 webpack
 // 自動(dòng)將你的構(gòu)建代碼切割成多個(gè)包, 這些包
 // 會通過 Ajax 請求加載
 require(['./my-async-component'], resolve)
})

// 工廠函數(shù)返回 Promise
Vue.component(
 'async-webpack-example',
 // 這個(gè) `import` 函數(shù)會返回一個(gè) `Promise` 對象。
 () => import('./my-async-component')
)

// 工廠函數(shù)返回一個(gè)配置化組件對象
const AsyncComponent = () => ({
 // 需要加載的組件 (應(yīng)該是一個(gè) `Promise` 對象)
 component: import('./MyComponent.vue'),
 // 異步組件加載時(shí)使用的組件
 loading: LoadingComponent,
 // 加載失敗時(shí)使用的組件
 error: ErrorComponent,
 // 展示加載時(shí)組件的延時(shí)時(shí)間。默認(rèn)值是 200 (毫秒)
 delay: 200,
 // 如果提供了超時(shí)時(shí)間且組件加載也超時(shí)了，
 // 則使用加載失敗時(shí)使用的組件。默認(rèn)值是：`Infinity`
 timeout: 3000
})

webpack< 2.4 時(shí)
{
 path:'/',
 name:'home',
 components:resolve=>require(['@/components/home'],resolve)
}

webpack> 2.4 時(shí)
{
 path:'/',
 name:'home',
 components:()=>import('@/components/home')
}

<component v-bind:is="currentTabComponent"></component>

<keep-alive>
 <component v-bind:is="currentTabComponent"></component>
</keep-alive>

<transition>
<keep-alive>
 <component v-bind:is="currentTabComponent"></component>
</keep-alive>
</transition>

// 遞歸組件: 組件在它的模板內(nèi)可以遞歸的調(diào)用自己，只要給組件設(shè)置name組件就可以了。
// 設(shè)置那么House在組件模板內(nèi)就可以遞歸使用了,不過需要注意的是，
// 必須給一個(gè)條件來限制數(shù)量，否則會拋出錯(cuò)誤: max stack size exceeded
// 組件遞歸用來開發(fā)一些具體有未知層級關(guān)系的獨(dú)立組件。比如：
// 聯(lián)級選擇器和樹形控件 

<template>
 <div v-for="(item,index) in treeArr">
  子組件，當(dāng)前層級值： {{index}} <br/>
  <!-- 遞歸調(diào)用自身, 后臺判斷是否不存在改值 -->
  <tree :item="item.arr" v-if="item.flag"></tree>
 </div>
</template>
<script>
export default {
 // 必須定義name，組件內(nèi)部才能遞歸調(diào)用
 name: 'tree',
 data(){
 return {}
 },
 // 接收外部傳入的值
 props: {
  item: {
  type:Array,
  default: ()=>[]
 }
 }
}
</script>

<template functional>
 <div v-for="(item,index) in props.arr">{{item}}</div>
</template>

export default{
 components:{home}
}

Vue.component('home',home)

// 創(chuàng)建構(gòu)造器
var Profile = Vue.extend({
 template: '<p>{{extendData}}</br>實(shí)例傳入的數(shù)據(jù)為:{{propsExtend}}</p>',//template對應(yīng)的標(biāo)簽最外層必須只有一個(gè)標(biāo)簽
 data: function () {
 return {
  extendData: '這是extend擴(kuò)展的數(shù)據(jù)',
 }
 },
 props:['propsExtend']
})

// 創(chuàng)建的構(gòu)造器可以掛載到元素上,也可以通過 components 或 Vue.component()注冊使用
// 掛載到一個(gè)元素上?？梢酝ㄟ^propsData傳參.
new Profile({propsData:{propsExtend:'我是實(shí)例傳入的數(shù)據(jù)'}}).$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. 添加全局資源,第二個(gè)參數(shù)傳一個(gè)值默認(rèn)是update對應(yīng)的值
 Vue.directive('click', {
  bind(el, binding, vnode, oldVnode) {
  //做綁定的準(zhǔn)備工作,添加時(shí)間監(jiān)聽
  console.log('指令my-directive的bind執(zhí)行啦');
  },
  inserted: function(el){
  //獲取綁定的元素
  console.log('指令my-directive的inserted執(zhí)行啦');
  },
  update: function(){
  //根據(jù)獲得的新值執(zhí)行對應(yīng)的更新
  //對于初始值也會調(diào)用一次
  console.log('指令my-directive的update執(zhí)行啦');
  },
  componentUpdated: function(){
  console.log('指令my-directive的componentUpdated執(zhí)行啦');
  },
  unbind: function(){
  //做清理操作
  //比如移除bind時(shí)綁定的事件監(jiān)聽器
  console.log('指令my-directive的unbind執(zhí)行啦');
  }
 })

 // 3. 注入組件
 Vue.mixin({
  created: function () {
  console.log('注入組件的created被調(diào)用啦');
  console.log('options的值為',options)
  }
 })

 // 4. 添加實(shí)例方法
 Vue.prototype.$myMethod = function (methodOptions) {
  console.log('實(shí)例方法myMethod被調(diào)用啦');
 }
 }

 //調(diào)用MyPlugin
 Vue.use(MyPlugin,{someOption: true })

 //3.掛載
 new Vue({
 el: '#app'
 });

mounted(){ //因?yàn)?mounted 階段 dom 并未渲染完畢,所以需要$nextTick
 this.$nextTick(() => {
 this.$refs.inputs.focus() //通過 $refs 獲取dom 并綁定 focus 方法
 })
}

// 全局定義
Vue.directive("change-color",function(el,binding,vnode){
 el.style["color"]= binding.value;
})

// 使用
<template>
<div v-change-color>{{message}}
</div>
</template>
<script>
 export default{
 data(){
  return{
  color:'green'
  }
 }
 }
</script>

// 使用
// 在雙花括號中
{{ message | capitalize }}

// 在 `v-bind` 中
<div v-bind:id="rawId | formatId"></div>

// 全局注冊
Vue.filter('stampToYYMMDD', (value) =>{
 // 處理邏輯
})

// 局部注冊
filters: {
 stampToYYMMDD: (value)=> {
 // 處理邏輯
 }
}

// 多個(gè)過濾器全局注冊
// /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
}

// 利用 set
this.$set(arr,index,item)

// 利用數(shù)組 push(),splice()

// 將鍵碼為 113 定義為 f2
Vue.config.keyCodes.f2 = 113;
<input type="text" @keyup.f2="add"/>

Vue.config.performance = true

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

Vue.config.warnHandler = function (msg, vm, trace) {
 // `trace` 是組件的繼承關(guān)系追蹤
}

<span v-pre>{{ this will not be compiled }}</span> 顯示的是{{ this will not be compiled }}
<span v-pre>{{msg}}</span>  即使data里面定義了msg這里仍然是顯示的{{msg}}

// template 中
<div class="#app" v-cloak>
 <p>{{value.name}}</p>
</div>

// css 中
[v-cloak] {
 display: none;
}

<span v-once> 這時(shí)只需要加載一次的標(biāo)簽</span>

<transition>
 <keep-alive v-if="aliveFlag"> //因?yàn)橛行╉撁?如試試數(shù)據(jù)統(tǒng)計(jì),要實(shí)時(shí)刷新,所以就不需要緩存
 <router-view/> //路由標(biāo)簽
 </keep-alive>
 <router-view v-else/>
</transition>

router.beforeEach((to, from, next) => {
 console.log('全局前置守衛(wèi)：beforeEach -- next需要調(diào)用') //一般登錄攔截用這個(gè),也叫導(dǎo)航鉤子守衛(wèi)
 if (path === '/login') {
 next()
 return
 }
 if (token) {
 next();
 } 
})

beforeRouteEnter (to, from, next) {
 // 這里還無法訪問到組件實(shí)例，this === undefined
 next( vm => {
 // 通過 `vm` 訪問組件實(shí)例
 })
}

this.$router.push():跳轉(zhuǎn)到不同的url，但這個(gè)方法回向history棧添加一個(gè)記錄，點(diǎn)擊后退會返回到上一個(gè)頁面
this.$router.replace():不會有記錄
this.$router.go(n):n可為正數(shù)可為負(fù)數(shù)。正數(shù)返回上一個(gè)頁面,類似 window.history.go(n)

this.$route.params.id:獲取通過 params 或/:id傳參的參數(shù)
this.$route.query.id:獲取通過 query 傳參的參數(shù)

<router-view :key="$route.fullpath"></router-view>

new Vue({
 data: {
  // vue不會對list里的object做getter、setter綁定
  list: Object.freeze([
   { value: 1 },
   { value: 2 }
  ])
 },
 mounted () {
  // 界面不會有響應(yīng),因?yàn)閱蝹€(gè)屬性被凍結(jié)
  this.list[0].value = 100;

  // 下面兩種做法，界面都會響應(yīng)
  this.list = [
   { value: 100 },
   { value: 200 }
  ];
  this.list = Object.freeze([
   { value: 100 },
   { value: 200 }
  ]);
 }
})

// main.js
Vue.prototype.$log = window.console.log;

// 組件內(nèi)部
<div>{{log(info)}}</div>

{
 vue: {
 preserveWhitespace: false
 }
}

// page 代碼
<template>
 <div>
 <avatar :img-src="imgSrc"></avatar>
 </div>
</template>
<script>
 export default {
 created () {
  this.imgSrc = require('./assets/default-avatar.png')
 }
 }
</script>

// vue-cli 2.x在vue-loader.conf.js 默認(rèn)配置是
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: {
 transformToRequire: {
  avatar: ['default-src']
 }
 }
}

// page 代碼可以簡化為
<template>
 <div>
 <avatar img-src="./assets/default-avatar.png"></avatar>
 </div>
</template>

// vue-cli 2.x在vue-loader.conf.js 默認(rèn)配置是
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: {
 transformToRequire: {
  avatar: ['default-src']
 }
 }
}

// page 代碼可以簡化為
<template>
 <div>
 <avatar img-src="./assets/default-avatar.png"></avatar>
 </div>
</template>

// 在根目錄下創(chuàng)建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'))
 }
}

// page 代碼
<img :src="imgUrl" @error="handleError" alt="">
<script>
export default{
 data(){
  return{
   imgUrl:''
  }
 },
 methods:{
  handleError(e){
   e.target.src=reqiure('圖片路徑') //當(dāng)然如果項(xiàng)目配置了transformToRequire,參考上面 27.2
  }
 }
}
</script>

// 原始代碼
<template>
 <div class="demo">
  <span class="content">
   Vue.js scoped
  </span>
 </div>
</template>

<style lang="less" scoped>
 .demo{
  font-size: 16px;
  .content{
   color: red;
  }
 }
</style>

// 瀏覽器渲染效果
<div data-v-fed36922>
 Vue.js scoped
</div>
<style type="text/css">
.demo[data-v-039c5b43] {
 font-size: 14px;
}
.demo .content[data-v-039c5b43] { //.demo 上并沒有加 data 屬性
 color: red;
}
</style>

// 上面樣式加一個(gè) /deep/
<style lang="less" scoped>
.demo{
font-size: 14px;
}
.demo /deep/ .content{
color: blue;
}
</style>

// 瀏覽器編譯后
<style type="text/css">
.demo[data-v-039c5b43] {
font-size: 14px;
}
.demo[data-v-039c5b43] .content {
color: blue;
}
</style>