Vue

//script this.$refs.menuWrapper ``` ### 使用 `Vue.nextTick(functon)` 渲染完后执行 ```js created(){ this.$http.get(config.apiHost.goods).then((response)=>{ if (response.status === ERR_OK){ this.goods = response.body // 由于 goods 的渲染是异步方式,所以加入 nextTick 时,使其可精确计算DOM 高度 this.$nextTick(()=>{ //在 dom 渲染完成后计算 dom 的高度 this._initScroll() this._calculateHeight() }) } }) } ``` ### ` Vue.set` 向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新 ``` //引入 vue import Vue from "vue" addCart(){ if (!this.food.count){ //像 this.food 添加 count 元素 ,且赋值为一 Vue.set(this.food, 'count', 1) } else { this.food.count++ } } ``` ### 切换路由(选项卡) 保留数据 ``` ``` ### slot 插槽 > [参考文档](https://cn.vuejs.org/v2/guide/components-slots.html) 可以在组件中写入自定义的内容 ### 导出并引入自定义模块 在`src/store.js` ``` const STOREGE_KEY = 'todo-vuejs' export default{ fetch(){ alert(STOREGE_KEY); }, save(items){ alert(items); } } ``` 在`src/App.vue` ``` import store from './store'; //引入 export default { methods: { enterFun: function () { store.save(this.tiems); } } } ``` ### keep-alive 缓存 手机应用缓存实例 ``` ``` ### 根据router 针对性缓存 > [参考网址](https://www.jianshu.com/p/0b0222954483) ### v-cloak 防止界面闪烁 ``` //css [v-cloak] { display: none; } //html ``` ### vue3.加载图片 需要先通过 import 引入 ``` import banner1 from "@/assets/img/banner1.png"; export default { name: "index", data() { return { img: banner1 }; }, } ``` ### 加载背景图片 使用`~@` 符号 `background: url('~@/assets/img/首页/60万bj.png') center center no-repeat ` ### 覆盖框架的样式 vue引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过>>>，穿透scoped。 有些Sass 之类的预处理器无法正确解析 >>>。可以使用 /deep/ 操作符( >>> 的别名) ``` 外层 >>> 第三方组件 {       样式   } ``` ### 搭建在生产环境中 1. 搭建在 node 项目中 指定一个目录,如 `views`,在`app.js`中配置,可直接访问 ``` app.use(express.static(path.join(__dirname, 'views'))); ``` ### computed 计算属性 如果计算属性中的引用的data值变化,则属性也随之变化 ``` // this.type 变化 则 customers也变化 computed: { customers() { return this.customersAll.filter(item => { //按行业分 if (this.type === 0) { if (item.type === this.cardType) { return true; } } else { //按场景分 if (item.scene === this.cardType) { return true; } } }); } } ```