Vue学习笔记

EvenZhu
52 阅读1分钟

  • Vue项目构建工具vue-cli

  • 也可以使用更新的create-vue

  • Model绑定到View上是单向绑定，再实现View变化时自动更新Model的数据，就是双向绑定

  • 单页面应用SPA相对于MPA也有缺点，一是不利于搜索引擎的抓取，二是首次渲染速度相对较慢

  • v-show隐藏时是为该元素添加css-display:none，dom节点依然在，v-if显示隐藏则是将整个元素添加或者删除

  • v-if有更高的切换消耗，v-show有更高的初始渲染消耗

  • 使用$event可以将标签对象的event对象传入函数

<a href="www.xxx.xxx" @click="target($event, number)" />

  • 双向绑定只适用于表单元素或者有值输出的其他元素

  • Vue并没有给数组对象的元素配置监听监听方法，所以直接改变数组中的某一个元素，是无法响应的，但是使用手势的操作方法，如push、pop等既可以触发data和页面的响应变化

  • 如果需要进行兄弟组件或者不相关的组件进行数据传递，可以使用全局总线或者pubsub-js库，Vue中一般选择时间总线

  • this.$nextTick传输一个函数，可以让函数内部的代码在下一次Dom更新后再执行

  • 使用vue的modules将store进行模块划分时，必须给每一个module增加namespace:ture的属性，在使用mapState或者mapActions时，传入的第一个参数是module名称，使用commint时属性需要使用'namespace名称/mutation名称'的方式

  • 使用vue-router时，如果参数采用占位符加params方式，跳转时必须使用name，不能使用path

  • 在路由配置中配置props有以下三种方式：

    • props: {} - 对象形式，可以将props配置的数据通过props的形式传入路由组件，但只能传入固定值；
    • props: true - bool值形式，可以将路由的params以props的形式传入路由组件；
    • props(route)−函数形式，可以通过调用route) {} - 函数形式，可以通过调用route.query.xxx的方式获取参数，并最终返回一个对象，以props的形式传入路由组件。

  • 使用router-link时如果要执行replace可以在标签中写入replace属性

  • 在使用路由功能时，为了避免组件数据丢失，可以使用keep-alive标签包裹router-view组件，实现组件数据缓存，include可以指定组件名称

  • 路由组件多了两个新的生命周期钩子函数，分别是activated（激活的）、deactivated（失活的）

  • Vue3中使用watch监视一个reactive生成的对象时无法正常获取oldValue

  • Vue过滤器的使用

    • 你可以在一个组件的选项中定义本地的过滤器：
    filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}
    • 或者在创建 Vue 实例之前全局定义过滤器：
    Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})
    • 使用方法：
    <!-- 在插值表达式中 -->
{{ message | capitalize }}

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

  • Vue中的强制刷新

    • location.reload()
    • this.$router.go(0)
    • Provide配合inject

PS：如果有需要补充的内容，请在评论区留言

转载时请注明“来自掘金 - EvenZhu”
avatar
文章
阅读
粉丝