项目前端(vue)记录

在项目中用到的,边学边记

这是一些小问题

          • 1.在不同的页面之间传实体
            • 1.1路由带参数
            • 1.2全局 localstorage
            • 1.3 $emit
            • 1.4 组件自带方法
          • 2.数值转换
            • 2.1 vue 字符串转数组
            • 2.2 数组转字符串
          • 样式
            • 改变from框中input的长度
            • from 框增加提前判断规则
            • div 居中

1.在不同的页面之间传实体
1.1路由带参数

不需要带参数到下一页时,用路由地址跳转到main页

this.$router.push({  path: "main" });

想带参数:

this.$router.push({
        name: "main",
        params: {
          userInfo: userInfo,
          id: id
        }
      });
1.2全局 localstorage

我理解为全局变量,key-value形式存取,项目中用于存token值和用户权限值

localStorage.setItem("token", "unload");

localStorage.getItem("token")
1.3 $emit

父子组件之间传值,因业务需要定义自己的组件时,容易遇到父子组件传值问题

比如父组件调用了子组件mytrans组件,父组件写:


//方法:
getSource(data){
	this.source = data;
},

子组件mytrans中这样写:

this.$emit("getSourceData", "123");

父子组件通过getSourceData这个名字传递,子组件的“123”就传到父组件页了。

1.4 组件自带方法

比如菜单导航组件中,可以用@select方法
项目前端(vue)记录_第1张图片

 
 // methods中
handleMenuSelect(index, indexPath) {
      this.breads = indexPath;
    }

第二个页面可用props取值


???solt: 还用到了solt属性,现在为止还没看懂,后补…

2.数值转换
2.1 vue 字符串转数组
str.split(';'); //以分号拆分字符串
2.2 数组转字符串
arr.join(';'); // 数组拼成字符串,分号分隔。默认逗号分隔。
样式
改变from框中input的长度
.el-input__inner {
  width: 200px !important;
}

css 能力不足,遇到调样式的总得查一查。通过这个问题学到 !important 这个语法。
这个语法在Ie7.0和firefox可以识别,但是Ie6.0不能成功应用,这就可以写出不同的浏览器不同显示的代码了,很有意思。
还有循环中的颜色设置,都是一样的找不到原来的配置是哪时,加上!important 增加优先级。

from 框增加提前判断规则

element from组件
增加:rules属性


   //!!!这里prop的值需要和v-model值一样!!!!
    
  
  
    
      
      
    
  

规则:

rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ]
          }

遇到的问题,必选项第一次弹出后,一直存在,输入正确的值也不消失,原因是我写的prop名字和绑定的v-model名字不一致。

div 居中

页面底部分页控件居中

.el-pagination {
  padding-left: 20%;
}

你可能感兴趣的:(前端)