项目前端(vue)记录

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

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组件,父组件写:

<mytrans @getSourceData = "getSource" ></mytrans>
//方法:
getSource(data){
	this.source = data;
},

子组件mytrans中这样写:

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

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

1.4 组件自带方法

比如菜单导航组件中,可以用@select方法
在这里插入图片描述

 <el-menu  @select="handleMenuSelect"  >
 // methods中
handleMenuSelect(index, indexPath) {
      this.breads = indexPath;
    }

第二个页面可用props取值

<script>
    export default{
        data(){
            return {   }
        },
       props:['Path']
    }
</script>

???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属性

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="活动名称" prop="name"> //!!!这里prop的值需要和v-model值一样!!!!
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="活动区域" prop="region">
    <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
</el-form>

规则:

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%;
}
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页