您的位置: 首页  >  IT文章  >  vue遇到的问题总结归纳

vue遇到的问题总结归纳

分类: IT文章 • 2022-04-24 14:48:32
1 VueCLI手动创建vue项目

①文档参考地址

2 npm install [xx] 使用淘宝镜像下载超时

①报错：ERROR Failed to get response from http://registry.cnpmjs.org/vue-cli-version

②解决方法1：在我的电脑中，找到.vuerc 文件，一般是C:UsersUser.vuerc 文件打开.vuerc 文件，将"useTaobaoRegistry": 改为true后重启计算机，再重新运行npm install [xx]

③解决方法2：方法1不生效再尝试方法2，在我的电脑中，找到.npmrc文件，将里面的内容全部清空。只留1行代码：registry=https://registry.npm.taobao.org/，保存后在尝试重新下载

3 npm run serve 和 npm run dev 的区别

①打开package.json 文件，可以看到key-“dev”对应的value-"vue-cli-service serve"。npm run dev实际上就是跑的"vue-cli-service serve"这个命令。如果在文件中将把dev改成serve，对应的就需要执行npm run serve，才能执行"vue-cli-service serve"这个命令

vue遇到的问题总结归纳

4 elementui-form有值却仍然显示不通过

①仔细检查表单的model和prop属性是否绑定正确。新手经常会把form写成from。

②仔细检查表单的rules属性是否绑定正确，确定验证规则符合预期

5 在methods怎么跳转地址

①利用this.$router。参考文档地址

6 vue中的.then()方法

①.then()是Promise对象的方法，对应还有.catch()。想了解.then()建议先了解Promise对象。参考文档地址

②.then((data)=>{console.log(data)})里的data是指接口成功返回的数据。可以通过consou打印出来看下是什么内容。

7 ref（$refs）的用法

①ref 加在普通的元素上，用this.ref.name 获取到的是dom元素。

②ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。

③如何利用 v-for 和 ref 获取一组数组或者dom 节点，参考文档地址。

注意：

  • ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。

  • 如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组 ，此时要拿到单个的ref 只需要循环就可以了。

8 给对象新增属性不生效

①例如想给obj添加新的属性test，采用this.obj.test = "test"则不生效。因为实例obj已经创建了，创建之后添加新的属性到实例上，它不会触发视图更新。需要使用this.$set(要修改的对象，要新增的key，对应的value)，例如this.$set(this.obj,"test","test")才可以触发视图更新。相当于this.obj.test = "test"

 export default {
      data(){
            return {
                obj:{}
            }
      },
    }

②文档参考地址

9 js对象与字符串相互转换

①对象转成字符串（stringify）

const obj = {id: 0}
const objToStr = JSON.stringify(obj)

②字符串转成对象（parse）

const str = '{"id":0}'
const strToObj = JSON.parse(str)

③参考文档地址

10 ElementUI-form表格中使用switch开关
<el-table-column label="状态" min-width="70" align="center">
  <template slot-scope="scope">
    <el-switch
      v-model="scope.row.status"  //绑定了每一行数据的status。当status为"0"的时候开关打开，反之关闭
      active-value="0"        
      inactive-value="1"
      @change="handleChangeProductLineStatus(scope.row.status, scope.row.id)">
    </el-switch>
  </template>
</el-table-column>
11 ElementUI-form表格使用current-change这个方法报错

①报错：Error in v-on handler:"TypeError: Cannot read property 'name' of null"

②解决方法:去要加上row-key属性

③参考文档地址

12 子组件调用父组件的值、方法

①子组件调用父组件的值。

父组件html代码：

<Form               //Form是子组件,在父组件中以标签的形状加载
  ref="Form"
  :flag="flagTest"  //将在子组件定义的flag绑定在父组件定义的flagTest
></Form>

父组件js代码：

export default {
  data() {
    return {
      flagTest: true, //弹窗标志
    }
  }
    ...
}

子组件props声明代码：

export default {
  props: {
    flag: {	        //声明flag属性,子组件中的所有props中的数据，都是通过父组件传递给子组件的，是只读的。
      type: Boolean,
      default: false
    }
  ...
  created(){
    console.log(this.flag)
  }
}

②子组件调用父组件的方法。

父组件html代码：

<Form    //Form是子组件,在父组件中以标签的形状加载
  ref="Form"
  @close-dialog="closeDialog"	//closeDialog()函数在父组件中定义，使用v-on的方式传递给子组件。
  @get-list="getList"
></Form>

父组件js代码：

closeDialog() {
   console.log("我是父组件中的方法")
    },

子组件中调用父组件方法代码：

this.$emit("close-dialog"); //触发父组件函数closeDialog

③参考文档链接

13 父组件调用子组件的值、方法

①父组件调用子组件的值、方法

父组件html代码：

<Form 		//Form是子组件,ref绑定值后，可通过refs获取子组件数据
  ref="Form"
></Form>

父组件js代码：

this.$nextTick(() => {	//获取子组件数据和函数需要等子组件渲染完才能获取到，所以使用this.$nextTick()方法，不然会报错。
    this.$refs.Form.name = data.name;  //给子组件name变量赋值
    console.log(this.$refs.Form.name)  //打印子组件name变量
    this.$refs.Form.getHello()		   //触发子组件的函数
}

子组件js代码：

export default {
  data() {
    return {
      name: "我是子组件的name变量"
    };
  },
  methods: {
      getHello(){
          console.log("我是子组件的方法")
      }
  }
};

②参考文档路径

14 ElementUI-form重置表单的值

①使用elementui-form的resetField()方法，在表单绑定ref

html部分：

<el-form  ref="form">  //ref绑定form，通过this.$refs["form"]可以找到这个表单，从而使用表单的resetField()方法
  <el-form-item label="名字" prop="name">
    <el-input  v-model="form.name" ></el-input>   //输入框绑定this.form.name，重置表单后，会重置到最初定义的值null
  </el-form-item>
</el-form>

js部分:

export default {
  data() {
    return {
        form: {name: null}	//需要定义name，不定义的话，重置表单时因为找不到name，则不重置
        }
      },
  methods:{
    resetForm(){
    	this.$refs["form"].resetField()  //调用表单重置方法
    }
  }
 }

②参考文档地址

15 ElementUI-form表格怎么判断当前行的勾选状态

①可通过select属性判断

②参考文档地址

16 ElementUI-tree 组件 选中节点高亮的问题处理

①修改高亮时的背景颜色，只需要调整CSS就好了

style代码

.el-tree-node:focus > .el-tree-node__content {
background-color: rgb(158, 213, 250) !important;
}

②点击后显示高亮的效果，并且不切换的情况下高亮一直保持

style代码

css:
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
background-color: rgb(158, 213, 250) !important;
}

html代码

<el-tree
	...
    ref="tree"    //ref绑定“tree”，后续通过this.$refs.tree获取到tree的setCurrentKey()方法
    :highlight-current="true"
    node-key="id"
    @node-click="handleNodeClick" //点击节点时触发handleNodeClick()函数
>

js代码

handleNodeClick(data) {
  this.$refs.tree.setCurrentKey(data.id); //通过id设置某个节点的当前选中状态,搭配CSS保持节点常亮
}

③参考文档地址

17 js赋值改变后，原数据也发生改变

① 对象A=对象B，对象A实际上是等于对象B的指针地址，所以改变对象A相当于改变对象B。数组也同理，代码如下

var obj1 = {name:"111"}
var obj2 = obj1
console.log(obj2)  //111
obj2 = 222
consol.log(obj1)   //222

②不想改动到原对象的值，应该采用浅拷贝或者深拷贝的方式

var obj2 = JSON.parse(JSON.stringfy(obj1));

③文档参考地址

18 ElementUI-select组件获取label

①给组件添加'change'方法

 @change=changeValue

②根据Array 的 find方法找出对应的值即可。

changeValue(value) {
    console.log(value);
      let obj = {};
      obj = this.options.find((item)=>{
          return item.value === value;
      });
      console.log(obj.label);
}

③文档参考地址

19 vue计算属性computed简单用法

①js代码

export default {
  data() {
    return {a = 0,b = 0}
  },      
  computed: {
    a: function() {
      return (a = b*2);		//当b的值发生改变时，a也会对应改变
    }
 } 
}

②参考文档地址

20 npm安装指定版本的包

①参考文档地址

npm install package_name  			   //安装最新版本
npm install package_name@[指定版本号]	//安装指定版本
npm install package_name@next		   //安装未来版本
21 Windows下Nginx的启动、停止、重启等命令

①参考文档地址

>start nginx           //启动ngnix
>nginx.exe -s quit     //停止ngnix
>nginx.exe -s reload   //重新载入Nginx,当配置信息修改，需要重新载入这些配置时使用此命令。
22 nginx下部署vue项目概览

①参考文档地址

23 vue获取当前页面的url

①参考文档地址

window.location.href  //完整url
this.$route.path	  //路由路径
24 vuex储存数据

①vuex实际上就是store文件夹下的配置。每个项目不一样。例如我这个项目在modules下又按模块储存数据。其中user.js是我要存放数据的地方。所以现在index.js配置引入user.js。

vue遇到的问题总结归纳

②接着在uesr.js里配置我想储存的数据wxFlag。这里的state就相当于我们vue里的data，用于定义变量。这里的mutations就相当于我们vue里的方法。setWxFlag(state, wxFlag)，setWxFlag是函数名，state指的就是在user中定义的state，wxFlag是我们传入的值

vue遇到的问题总结归纳

③使用commit去触发setWxFlag函数，并改变wxFlag的值。

vue遇到的问题总结归纳

④获取wxFlag的值

vue遇到的问题总结归纳

⑤参考文档地址

相关推荐