项目bookkeeping总结

qingyunfupo
72 阅读3分钟

目录说明

  1. public 放静态文件，如index.html
  2. assets 放图片，如SVG
  3. components 放组件
  4. router 放路由
  5. store 放全局数据。如index.ts
  6. views 放页面视图，如首页
  7. registerServisWorker.ts 放PWA相关文件
  8. shims-tsx.d.ts及shims-vue.d.ts 放TypeScript声明
  9. tests 单元测试
  10. tsconfi.js TS配置
  11. vue.config.js webpack配置
  12. main.ts 文件入口
  13. App.vue 主组件

webStorm常用知识

  1. 模板生成：setting/File and Code Template/vue……
  2. ts或js内的@表示src:如：import x from' @/……'
  3. css内~@表示src:如：@import "~@/……"需要注意的是，在css内使用需要在设置内设置一下：setting/webpack/webpack configuration file/项目名/@vue/cli-service/webpackconfig.js/ ok\

用到的知识点

vue-Router
  1. 确定url:如：#/money
  2. 配置4个路径：router/index.ts内配置path和components。其中路径是“从上到下”进行匹配的，path:'*'表示匹配所有
  3. 在主组件内引入，确定显示位置。链接到money页面，其中样式active-class="selected"可以被选中时高亮。
component
  1. vue组件的三种方式：
  • ① 用js对象： 
    export default {
data:f()/{}, props:[],mixins:[], components:{},  methoda:f(), created:f()……
}
  • ②用js类： 
    export default class XXX extends Vue{
XXX = 'hi'
}
  • ③用ts类： 
    export default class XXX extends Vue{
XXX:string = 'hi' 
}
  1. vue组件的写法

  • 全局注册：

    //全局注册的行为必须在根Vue实例创建之前发生
Vue.component('my-component-name', { /* <template>你好</template>... */ })
  或 
Vue.component('Nav', Nav)

  • 局部注册：

    <script lang=ts>
import Tags from '@/路径'
@Component({
  components: {Tags, FormItem……},
    })
 </script>
prop

  1. 外部属性，用来接收其他组件的属性，从而在自身组件上访问。

  2. js写法:

      new Vue({
 prop:[]/{}
 })

  3. ts写法：

    @Component
export default class XXX extends Vue{
@prop(String) readonly propA:string
}
slot
  1. 作为组件模板之中的内容分发插槽，用于向一个组件传递内容，元素自身将被替换。
  2. 属性：name 用于命名插槽
  3. 用法：只需要在需要接收内容的地方加入插槽。
computed

  1. js写法

    new Vue({
    computed:{
        fullName:f(){}
    }
})

  2. ts写法：

    get tagList(){ return……}

  3. 用于多个属性的变化影响一个属性，拥有缓存数据，且会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data声明过，或者父组件传递过来的props中的数据进行计算的，只有依赖的数据发生了变化才会重新计算。computed中的函数所依赖的数据没有发生变化，那么调用当前的函数的时候会从缓存中读取。computed不支持异步。

watch
  1. ts写法：
  @watch('question')
  onQuestionChanged(newQuestion,oldQuestion){}
  1. js写法： 
    watch:{
question:function(newQuestion,oldQuestion){}
}
  2. 用于一对多，是异步的，不支持缓存。当监听的数据发生变化时会立即触发一个回调函数。watch有两个属性：immediate和deep。
.sync
  1. .sync修饰符用于子组件和父组件双向绑定时。当子组件的prop需要发生变化，需要通知父组件进行更新，子组件不能更改父组件的属性值。
  2. .sync 
    <Title v-bind:title.sync='doc.title' />
等价于：
//子组件触发一个事件：
this.$emit('updata:title',newTitle)
//父组件监听该事件，并根据需要更新一个本地的数据property
<Title v-bind:title='doc.title' v-on:updata:title='doc.title=$event' />
表驱动编程
  dataSource:[
    {'1':'zhangsan'},
    {'2':'lisi'},
    {'3':'xiaoming'}
    ]  
    <div v-for="(item,index )in dataSource" :key="index" >{{item[key]}} </div>
avatar
文章
阅读
粉丝