前端学习---VUE完成电商前端与后端管理系统项目总结与收获

电商网站前台

VUE中无语的出错

运行vue项目出现

Uncaught TypeError: (0 ,vue__WEBPACK_IMPORTED_MODULE_42__.defineComponent) is not a function

原因可能是vue-router版本过高，需要安装低版本的vue-router
 

npm install vue-router@3.2.0

一些小的点

全局组件(一般需要放在components文件夹下)

对象的解构

解构的语法注意点： 1、let {name} = obj; 相当于 let name = obj.name 2、大括号里面的变量名最好和obj的属性名一致，如果不一致，则是undefined 3、大括号里面的变量名顺序可以调换 4、可以部分解构也可以完全解构 5、解构可能出现变量名已经被定义的错误。解决：取出属性之后重新命名。let {name:name2} = obj;然后控制台输出name2的值就是对象中name属性的值

扩展运算符

扩展运算符（spread）也是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列，对数组进行解包。

自定义属性

1：设置自定义属性（html5中设置自定义属性用“data-”开头，多个字母用 “-” 连接）
　　1、元素.setAttribute('自定义属性名',自定义属性值）
　　2、<!-- Html5规定，给元素自定义数据属性时，属性名称以data-开头，但是真正的属性名不包括data--->　　
　　　　　<p id="p1" data-school-name = "qh">清华大学</p>
2：获取定义的自定义属性　　　
　　dataset是一个集合里面存放了所有以data开头的自定义属性
　　只能获取以data开头的自定义属性
<script>
//var value1=document.getElementById("p1").dataset["schoolName"];//或者下面

var value1=document.getElementById("p1").datasetschoolName;
console.log("value1:"+value1); </script>
　　 dataset 后边必须要用驼峰命名法 否则可能获取不到属性值
　　也可以用getAttribute 来获取自定义属性
　　
<script>
    var value2=document.getElementById("p1").getAttribute("data-school-name");
    alert("value2:"+value2)
</script>