2.12

学习前端工程化. 以前老是看到别人在用这个,知道它简洁好用,可就是一直不会用. 

之前我用的vue的声明式渲染,功能全写在了一个页面,几百行的代码,改个错还得来回翻,及其影响开发效率.

今日代码

<template>
  <div class="app">
   <div class="box" @click="fn"></div>
  </div>
</template>

<script>
//导出的是当前组件的配置项
//里面可以提供 data(特殊),methods,computed,watch,钩子方法等
export default {
  methods:{
    fn(){
      alert('box')
    }
  }
}
</script>

<style>
.app {
  width: 400px;
  height: 400px;
  background-color: pink;
}
.app .box{
  width: 100px;
  height: 100px;
  background-color: blue;
}

</style>

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

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