日常代码记录吖

皮皮皮皮克斯

已于 2023-04-06 18:28:26 修改

阅读量287

点赞数 1

文章标签： vue.js 前端 javascript

于 2020-11-25 15:31:30 首次发布

本文链接：https://blog.csdn.net/weixin_43996362/article/details/110132238

版权

日常代码记录～

QS方法（构造/结构地址栏参数）

使用方法

npm install qs
import qs from 'qs’

qs.stringify()是将对象 序列化成URL的形式，以&进行拼接
qs.stringify({ a: ['b', 'c', 'd'] });
// 'a[0]=b&a[1]=c&a[2]=d'

qs.parse()是将URL解析成对象的形式
qs.parse('a=b&c=d');
// {a:'b',c:'d'}

静态资源引用总结

最近用之前的老项目打包之后控制台它爆了一个奇奇怪怪的错误，如下：
Uncaught SyntaxError: Unexpected token ‘<’

一定有人遇到吧～其实本以为是token的问题其实是静态资源引入找不到路径的问题。
public 一般存放公共静态资源
src/assets 一般存放全局静态资源
pages/images 一般存放当前文件夹需要的静态资源

如何引入：
1.如果在/public目录下的静态图片，可以直接输入绝对路径，假设/public/yay.jpg,访问方式如下：
```
<img src="/yay.jpg"  />    // 注意：以上必须构建后在dist中才能看到。
```
2.在/src/assets 和 /src/pages/ 目录下的图片，不能通过输入绝对路径访问，必须先import导入或者require导入，才能访问。
比如 /src/assets/yay.jpg
```
import yayImg from '/src/assets/yay.jpg';
<img src={yayImg} />
<img src={require('/src/assets/yay.jpg')}>
```
为什么会这样呢？主要是因为构建时，/public目录下的文件会原样复制到/dist/目录下，而/src/assets/ 和 /src/pages/目录下的文件会被改名并复制到/dist/下。
git/安装包/vscode快捷键等
- git输入错误密码之后不弹出账号密码弹框解决办法
  设置 - 控制面板 - windows凭据 - 删除凭据
- clac（100% - 70px）设置高度宽度
- git 存储
  git stash list
  有的话先git stash clear
  git stash
  git checkout develop_edj
  git commit -m ‘说点什么’
  git pull
  git push
  git checkout develop
  git stash pop
  git更新本地分支命令
  git fetch origin
- vscode 快捷键
  快速整理代码格式 Alt+shift+f
  选中光标到行首/行尾 shift+Home/End
  下一个匹配的也被选中 Ctrl+D
  回退光标 Ctrl+U
  当前行向下移动一行 alt+down ↓
  当前行向下复制一行 alt+shift+down ↓
  向右拆分 CTRL +
  文件切换 CTRL + TAB
  停止npm CTRL + C
  清空控制台输出 CTRL + K
- 引入文件符号
  @ src根目录需配置
  ./ 当前目录，同级目录下
  …/ 上一级目录
  / 根目录
- 快速删除node_modules
  1.安装 npm install -g rimraf
  2.删除 rimraf node_modules (当前文件夹下)
- npm包相关
  
  截图看出有的依赖包带了^有的没带，这时候不懂的小明就会问了，这是为啥呀？没错我就是那个小明，然后我就去查了下，听我狡辩。

	^2.3.1 ^会匹配最新的大版本依赖包，2.3.1会匹配所有2.x.x的包，但不包括3.x.x
	~2.3.1 ~会匹配最近的小版本依赖包，2.3.1会匹配所有2.3.x的包，但不包括2.4.x
	2.3.1 固定版本，安装的时候不会更新其他版本

React+typescript
- Typescript类型断言
  1.尖括号形式：< string>value
  2.as形式：value as string
小程序相关
- wx:key=“idx” idx 为默认index
  当报wx:key错误的时候要么是wx:key没有定义要么是请求所得到的的数据为空或者null。
- scroll-view使用的坑
  scroll-view标签要加上css white-space：nowrap 【横向滑动的时候】
  后面的item 要加上css display：inline-block
- 小程序扫码分享传的参数

vue相关

计算属性computed
我们可以使用 methods 来替代 computed，效果上两个都是一样的，
但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。
而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
 
<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

var vm = new Vue({
  el: '#app',
  data: {
    name: 'Google',
    url: 'http://www.google.com'
  },
  computed: {
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '菜鸟教程 http://www.runoob.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);

vue post请求

this.$.autoAjax('post', ROUTES.POST.user.h5.sendcode, {
        name: this.forget_code,
        type: 'mobile'
      }, {
        ok: v => {
          this.toast = !this.toast;
          this.toastType = 'text';
          this.toastText = LANG['验证码已发送'] || '验证码已发送';
        },
        error: v => {
          let xhr = JSON.parse(v.responseText);
          this.toast = !this.toast;
          this.toastType = 'warn';
          this.toastText = LANG[xhr.message] || xhr.message;
        }
      }, {
        "Content-Type": "application/json"
      });

请求两个接口

  detail(row, refresh) {
    Promise.all([api.auditMemberGetout({ id: row.id, user_id: row.user_id }), api.detailMemberGetout({ id: row.id, m_base_id: 66 })]).then(
      ([res1, res2]: any[]) => {
        if (res1.code == 0 && res1.data && res2.code == 0 && res2.data) {
          this.detailConfig.detailTableData = res1.data
          this.detailConfig.editForm = res2.data
          this.detailVisible = true
        } else {
          this.$message.error(res1.msg + ' | ' + res2.msg)
        }
      }
    )
  }

vm.$nextTick()

Vue.component('example', {
  template: '<span>{{ message }}</span>',
  data: function () {
    return {
      message: '没有更新'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = '更新完成'
      console.log(this.$el.textContent) // => '没有更新'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => '更新完成'
      })
    }
  }
})

keep-alive
keep-alive带来的缓存问题
可以用activated（）此生命周期来解决路由传过来的值不更新不重新发请求
//清除 keep-alive 影响的缓存
activated(){
this.id = this.$route.query.id
this.requestList()
}
构造函数里面声明变量

  constructor(props) {
        super(props);        
        let query = window.location.search.indexOf('id=') > -1 ? window.location.search.split('&')[0].split('=')[1] : 0;
        this.state = {
            activeIndex:query
        };
    }

皮皮皮皮克斯

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
日常代码记录吖

【日常】git输入错误密码之后不弹出账号密码弹框解决办法设置 - 控制面板 - windows凭据 - 删除凭据2.clac（100% - 70px）设置高度宽度3.vscode 快捷键快速整理代码格式 Alt+shift+f选中光标到行首/行尾 shift+Home/End下一个匹配的也被选中 Ctrl+D回退光标 Ctrl+U当前行向下移动一行 alt+down ↓当前行向下复制一行 alt+shift+down ↓向右拆分 ctrl+文件切换 ctrl+tab
复制链接

扫一扫