// APP.vue
<template>
  <div id="app">
    <h3 class="title">{{ msg }}</h3>
    <div class="amap-wrapper">
      <el-amap class="amap-box" :vid="'amap-vue'"></el-amap>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'vue-amap向你问好！'
    }
  }
}
</script>

<style>
.amap-wrapper {
  width: 500px;
  height: 500px;
}
</style>

<template>
  <div class="amap-wrapper">
    <el-amap :vid="'amapVue'" :center="center" :zoom="zoom"></el-amap>
  </div>
</template>

<script>
import { lazyAMapApiLoaderInstance } from "vue-amap";

export default {
  name: "Index",
  data() {
    return {
      map: null,
      zoom: 13,
      center: [116.404765, 39.918052]
    };
  },
  mounted() {
    lazyAMapApiLoaderInstance.load().then(() => {
      // eslint-disable-next-line no-undef
      this.map = new AMap.Map("amapVue", {
        center: this.center,
        zoom: this.zoom
      });
    });
  }
};
</script>

<style lang="scss" scoped>
.amap-wrapper {
  width: 100vw;
  height: 100vh;
}
</style>

// 父组件
<template>
	<!-- 完整写法 <Child :number="total" @update:number="total = $event"/> -->
	<Child :number.sync="total"></Child>
</template>
<script>
  import Child from 'components/Child.vue'
  export default {
    name: 'Parent',
    components: {
      Child
    }
    data() {
      return {
        total: 1000
      }
    }
  }
</script>

// 子组件
<template>
	{{number}}
	<button @click="change" >change</button>
</template>
<script>
  export default {
    name: 'Child',
    props: {
      number: {
        type: Number,
        default: 0
      }
    },
    methods:{
      change() {
        this.$emit('update:number',this.number + 1)
      }
    }
  }
</script>

<template>
  <div class="home">
    <h3>wangEditor with vue</h3>
    <div id="demo1"></div>
    <button type="button" class="btn" @click="getEditorData">获取当前内容</button>
    <h3>内容预览</h3>
    <textarea name="" id="" cols="170" rows="20" readonly v-model="editorData"></textarea>
  </div>
</template>

<script>
// 引入 wangEditor
import wangEditor from 'wangeditor'
export default {
  data() {
    return {
      editor: null,
      editorData: ''
    }
  },
  mounted() {
    const editor = new wangEditor(`#demo1`)
    // 配置 onchange 回调函数，将数据同步到 vue 中
    editor.config.onchange = (newHtml) => {
       this.editorData = newHtml
    }
    // 创建编辑器
    editor.create()
    this.editor = editor
  },
  methods: {
    getEditorData() {
      // 通过代码获取编辑器内容
      let data = this.editor.txt.html()
      alert(data)
    }
  },
  beforeDestroy() {
    // 调用销毁 API 对当前编辑器实例进行销毁
    this.editor.destroy()
    this.editor = null
  }
}
</script>

<style lang="scss">
  .home {
    width: 1200px;
    margin: auto;
    position: relative;
    .btn {
      position: absolute;
      right: 0;
      top: 0;
      padding: 5px 10px;
      cursor: pointer;
    }
    h3 {
      margin: 30px 0 15px;
    }
  }
</style>

<template>
	<myComponent @a="functionA" @b="functionB" @c="functionC"></myComponent>
</template>

<template>
	<myComponent @callback="callback"></myComponent>
</template>
<script>
  export default {
    methods: {
      callback(params) {
        if (params.funcName) {
        	this[params.funcName](params.data)
      	}
      }
    }
  }
</script>

<script>
  export default {
    methods: {
      myfunc(){
        this.$nextTick(()=>{
          // ....
        })
      }
    }
  }
</script>

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="message | capitalize"></div>

<template slot-scope="scoped">
	{{getType(scoped.row.type)}}
</template>
<script>
  export default{
    data() {
      return {}
    },
    methods: {
      getType(value){
        if(value===1){
          return "室内";
        }else{
          return "室外";
        }
      } 
    }
  }
</script>

<template slot-scope="scoped">
	{{scoped.row.type | getType}}
</template>
<script>
  export default{
    data() {
      return {}
    },
    filters: {
    	getType(value){
        if(value===1){
          return "室内";
        }else{
          return "室外";
        }
      } 
    }
  }
</script>

<template slot-scope="scoped">
	{{getType(scoped.row.type)}}
</template>
<script>
  let _this = this;
  export default{
    data() {
      _this = this
      return {
        num: 1
      }
    },
    filters: {
    	getType(value){
        if(value=== _this.num){ // 通过外部设置_this来使得过滤器内也能访问到this
          return "室内";
        }else{
          return "室外";
        }
      } 
    }
  }
</script>

// 父组件
<Child>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>
</Child>

// 子组件
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
</div>

// 父组件
<Child>
  <template v-slot:header="slotProps">
    {{ slotProps.myProps.firstName }}
  </template>
</Child>

// 子组件
<span>
  <slot name="header" :myProps="user"></slot>
</span>

<template>
<h1 class="price">{{priceToFixedByComputed}}</h1>
<h1 class="price">{{priceToFixedByMethods()}}</h1>
<h1 class="price">{{price | priceToFixedByFilters}}</h1>
</template>

<script>
  export default {
    name: "",
    data() {
      return {
        price: 27.999999999
      }
    },
    computed: {
      priceToFixedByComputed() {
        console.log('computed')
        return this.price.toFixed(2)
      }
    },
    methods: {
      priceToFixedByMethods() {
        console.log('methods')
        return this.price.toFixed(2)
      }
    },
    filters: {
      priceToFixedByFilters(val) {
        console.log('filters')
        return val.toFixed(2)
      }
    },
    watch: {
      price(val) {
        console.log('watch')
      }
    },
  };
</script>