操作题Vue 两个等号 和三个等号 的区别 用于比较两者是否相等忽略数据类型。 用于更严谨的比较值和值的数据类型都需要同时比较。 为什么vue中data必须是一个函数 https://blog.csdn.net/xyphf/article/details/88863059Vue中v-model与:value的区别 v-model不可以加其他值inputtypetextv-modelcurAmount:value可以加 单位inputtypetext:valuecurAmount元var,let,cont声明变量的区别 https://www.cnblogs.com/bonly-ge/p/9262723.html 在 ES6 之前JavaScript 只有两种作用域 全局变量 与 函数内的局部变量。 全局变量在函数外声明的变量作用域是全局的。全局变量在JS任何地方都可以访问。 ES2015(ES6) 新增加了两个重要的 JS关键字: let 和 const。 let 声明的变量只在 let 命令所在的代码块内有效。 const 声明一个只读的常量一旦声明常量的值就不能改变。 函数内使用 var 声明的变量只能在函数内容访问如果不使用 var 则是全局变量 使用 var 关键字声明的全局作用域变量属于 window 对象 var 关键字定义的变量可以在使用后声明也就是变量可以先使用再声明。 let 关键字定义的变量需要先声明再使用。声明的变量只在 let 命令所在的代码块内有效。 const 用于声明一个或多个常量声明时必须进行初始化且初始化后值不可再修改。vue中 require和import区别 https://www.cnblogs.com/caiguangbi-53/p/11757508.html let echarts require(echarts/lib/echarts) 这里require直接从 node_modules 中查找文件位置进行引入vue中 ref 和 $refs 的介绍与使用 https://blog.csdn.net/qq_38128179/article/details/88876060 在JavaScript中需要通过document.querySelector(#demo)来获取dom节点然后再获取这个节点的值。在Vue中我们不用获取dom节点元素绑定ref之后直接通过this.$refs即可调用这样可以减少获取dom节点的消耗。vue中 $router 和 $route 的区别 https://blog.csdn.net/benben513624/article/details/86657492 Vue router 中的 params和query的区别 除了params可以传递参数query也可以写法其实很相似 区别在于1、params需要用name来引入query需要path来引入 vue中 路由 query 和 props vue 路由参数变化页面不刷新数据不更新解决方法watch中监听to from对比 https://blog.csdn.net/qq_29483485/article/details/88383544 vue 文件、图片上传 https://www.cnblogs.com/rogerwu/p/9274193.html https://www.cnblogs.com/liu2lognew/p/14502157.html1 VUE相关知识1.1 Node.jsNode.js是一个Javascript运行环境(runtime)发布于2009年5月由Ryan Dahl开发实质是对Chrome V8引擎进行了封装。Node.js对一些特殊用例进行优化提供替代的API使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快性能非常好。 Node.js是一个基于Chrome JavaScript运行时建立的平台用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动非阻塞I/O模型而得以轻量和高效非常适合在分布式设备上运行数据密集型的实时应用。总结一下node,js提供了javascript在浏览器以外的一个执行环境满足一些特定的场景需求。1.2 npmnpm 是 nodejs 的包管理和分发工具。它可以让 javascript 开发者能够更加轻松的共享代码和共用代码片段并且通过 npm 管理你分享的代码也很方便快捷和简单。通过npm可以更方便的引用和分析基于nodejs开发的类库和插件。npm install 、npm install --save 和 npm install --save-dev的区别相同点三者都会本地安装包到项目的node_modules目录中区别在于对项目package.json的修改npm install不会修改package.json而后两者会将依赖添加进package.json2 VUE的基本介绍VUE 作者 尤雨溪VUE是MVVM框架它是渐进式JavaScript框架是轻量级的。核心是Dom的监听和数据的绑定Vue.js是一个构建数据驱动的界面的库其目标是实现响应的数据绑定和组合的试图组件。Vue.js拥抱数据驱动的视图概念这意味着我们能在普通的HTML模板中使用特殊的用法将DOM“绑定”到底层数据。一旦创建了绑定DOM将与数据保持同步。v-model 表单双向数据绑定异步执行 DOM 更新具体来说异步执行的运行机制如下。 1所有同步任务都在主线程上执行形成一个执行栈execution context stack。 2主线程之外还存在一个任务队列task queue。只要异步任务有了运行结果就在任务队列之中放置一个事件。 3当执行栈中的所有同步任务执行完毕系统就会读取任务队列看看里面有哪些事件。 那些对应的异步任务于是结束等待状态进入执行栈开始执行。 4主线程不断重复上面的第三步。 nextTick 只有同步环境执行完毕DOM渲染完毕之后才会处理异步callback vue nextTick深入理解vue性能优化、DOM更新时机、事件循环机制 https://www.cnblogs.com/hity-tt/p/6729118.html1.基础的JavaScript的试图驱动。重新绘制事件模型2.1 Vue.js 目录结构目录说明build…项目构建(webpack)打包相关配置文件…webpack.base.conf.js基本配置文件…webpack.dev.conf.js开发环境的配置文件…webpack.prod.conf.js生产环境的配置文件…webpack.test.conf.js测试环境的配置文件config…配置文件的目录也有三类环境的配置文件…index.js核心配置文件运行的主机、端口、代理配置跨域node_modules…npm 加载的项目依赖模块public…不会被webpack打包输入路径时必须使用绝对路径。src…要开发的目录项目的核心区域所有的开发文件的核心内容区域包括组件静态资源等。包含了几个目录及文件…assets静态资源文件夹如*.html或logo图片等。和public不同的是assets文件夹会被webpack打包。…componentsvue功能组件的存放位置内部存放的是公共组件。目录里面放的组件文件可以不用。…router配置所有的路由…viewsvue的根组件所有的vue组件都是从这个组件中扩展的App.vue通过编译后将内容编译到.html页面文件中。公共文件主要以各个独立页面为主。…App.vue项目入口文件我们也可以直接将组件写这里而不使用 components 目录。…main.js项目的核心文件vue 的入口文件。所有的Vuex代码都必须在main.js中进行注册。static…静态资源目录如图片、字体等。test…单元测试程序代码目录.gitignore…这些是一些配置文件包括语法配置git配置等。Github相关配置作用是git提交代码时可以指定忽略哪些文件。index.html…首页入口文件你可以添加一些 meta 信息或统计代码啥的。package.json…项目配置文件即项目的相关模块或配置信息package.lock.json…项目配置文件即项目的相关模块或配置信息。记录当前项目安装相关依赖版本号vue编译时会按照这个文件进行编译。README.md…项目的说明文档项目相关打包编译及指令说明markdown 格式………2.2 声明声明式渲染每个 Vue 应用都需要通过实例化 Vue 来实现。定义数据对象。data 用于定义属性methods 用于定义的函数可以通过 return 来返回函数值。注意点Vue 的 el 属性是一个 CSS 选择器Vue中所有对象中的清单内容都是固定的不可以自由设置。Promisepromise是什么1、主要用于异步计算2、可以将异步操作队列化按照期望的顺序执行返回符合预期的结果3、可以在对象之间传递和操作promise帮助我们处理队列axios我们通常使用axios库与后台交互获取数据它是基于promise的http库可运行在浏览器端和node.js中。他有很多优秀的特性例如拦截请求和响应、取消请求、转换json、客户端防御cSRF等。[需求及实现]统一捕获接口报错、弹窗提示、报错重定向、基础鉴权、表单序列化npm install axios; //安装axios #实现的功能 统一捕获接口报错 : 用的axios内置的拦截器 弹窗提示: 引入 Element UI的Message组件 报错重定向: 路由钩子 基础鉴权: 服务端过期时间戳和token,还有借助路由的钩子 表单序列化: 使用qs(npm模块) 链接https://juejin.cn/post/68449034929480827022.1.1 {{ }} 插值语法moustache{{ }} 用于输出对象属性和函数返回值。内部是data数据管理中心的属性渲染也可以是表达式。moustache不支持if else复杂判断//挂载点所有的Vue的方法和属性都必须在对应的挂载根标签内部使用驼峰命名vHeadv-headvMainv-main1.注册组件的时候使用了驼峰命名 如果在注册组件的时候使用了驼峰命名, 那么在使用时需要转换成短横线分隔命名。 2.传递数据时使用驼峰名称 如果父组件向子组件传递数据时使用了短横线分隔命名, 子组件接收时写驼峰式命名。 3.传递方法时双方都不能使用驼峰命名, 只能用短横线分隔命名。3. 指令 directoryvue指令 (directory) 的作用是通过带有v-的特殊属性实现对dom的响应式加载。按钮权限显藏。jsjsvue单机onclickv-on:click 或 click双击dblondblclickv-on:dblclick鼠标移上onmouthenter…鼠标离开onmouthleave…鼠标滑过onmouthmove…鼠标移除onmouthout…失去焦点onblur…聚焦onfocus…键盘事件onkeydown…………vue 指令中el 的 parentNode 为空的问题元素el的父元素parentNode变成了null if (el.parentNode !Vue.prototype.$_has(binding.value)) { el.parentNode.removeChild(el); } 我这边用的是bind的钩子函数。需要把钩子函数改成inserted就解决了。 vue指令 钩子函数 一个指令定义对象可以提供如下几个钩子函数 (均为可选) bind只调用一次指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 inserted被绑定元素插入父节点时调用 (仅保证父节点存在但不一定已被插入文档中)。 update所在组件的 VNode 更新时调用但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。 componentUpdated指令所在组件的 VNode 及其子 VNode 全部更新后调用。 unbind只调用一次指令与元素解绑时调用。3.1. v-if v-else-ifdividapppv-iffalse我是第一行DOM元素/ppv-iftrue我是第二行DOM元素/p/divdividapppv-ifa100a100/ppv-else-ifa100a100/p/div3.2. v-showv-show是通过控制元素的display属性对元素的显示和隐藏进行逻辑判断并没有实现元素的下树。主要区别是涉及到页面的加载性能。3.3. v-for遍历数组数组对象名称是可以自定义的下标参数是index遍历对象与数组不同的是遍历JSONbodydividapptableborder1trtd序号/tdtd门店id/tdtd角色/tdtd账号/tdtd门店名称/td/trtrv-for(member,index) in memberstd{{index}}/tdtd{{member.memberId}}/tdtd{{member.role}}/tdtd{{member.account}}/tdtd{{member.shopName}}/td/tr/table/div/bodyscript//声明式渲染varvuenewVue({el:#app,//挂载点data:{members:[{memberId:3389,role:6,account:15100010001,shopName:门店3389},{memberId:3386,role:6,account:15100010006,shopName:测试3386}]}})/script作业实现99乘法表3.4. 3.4 v-html、v-text{{}} 和 v-text 渲染文本区别{{}}是赋值v-text替换原来的文本信息v-html渲染模板3.5. 3.5 v-cloak 遮盖指令控制渲染结束关联v-cloak遮盖指令的作用是vue实例渲染后结束关联所以我们可以实现网络延迟时不显示编译器的文本{{a}}3.6. v-once 渲染一次数据更新不会引起试图的更新目的是为了优化页面的性能。可用在功能组件上3.7. v-pre跳过节点v-pre跳过大量没有指令的节点不去执行已标记过v-pre的节点跳过该元素编译的过程直接显示元素的文本可用在某个元素上3.8. v-on添加事件监听在vue中去除on然后添加v-on或符号如 button clickadd按我加1/button button v-on:clickminus按我减1/button button v-on:dblclickminus双击按我减1/button3.9. v-bindv-bind属性对大小写不敏感。如果写驼峰命名需要使用-隔开如helloWorld写为hello-world3.10. v-model 表单双向数据绑定实现表单元素的双向数据绑定。$set//向一个vo对象中增加markPoint 属性参数var markPoint {data: [{type: ‘max’, name: ‘最大值’}]}this.$set(vo, ‘markPoint’, markPoint)console.log(vo)opt.series.push(vo);3.11 数组set根据索引设置元素 this.arr.$set(index, val);push 插入数据使用this.$set向数组中插入数据向数组某个对象中插入属性。setData() { //向数组中插入数据 let a [{ name: a, age: 17, sex: 男}, { name: b, age: 18, sex: 女}]; this.$set(a,2,{name: c, age: 20, sex: 男}); console.log(list,a) //向数组中的对象插入属性 this.$set(a[2],salary,3500); console.log(afterList,a); }splice删除arr.splice(arr.indexOf(ele), length) 表示先获取元素的下标删除长度为length的元素arr.splice(1, 2) 删除数组索引为1开始的后面2个元素。concat 合并数组this.arr this.arr.concat(anotherArr);数组变动检测1、变异方法修改了原始数组vue为触发视图更新包装了以下变异方法 push() 方法可向数组的末尾添加一个或多个元素并返回新的长度。 pop() 方法用于删除并返回数组的最后一个元素。 shift() 方法用于把数组的第一个元素从其中删除并返回第一个元素的值。 unshift() 方法可向数组的开头添加一个或更多元素并返回新的长度。 splice() 方法向/从数组中添加/删除项目然后返回被删除的项目。 sort() 方法用于对数组的元素进行排序。 reverse() 方法用于颠倒数组中元素的顺序。 2、非变异方法不会修改原始数组而是返回一个新数组替换数组 filter() 方法创建一个新的数组新数组中的元素是通过检查指定数组中符合条件的所有元素。 concat() 方法用于连接两个或多个数组。 slice() 方法可从已有的数组中返回选定的元素。 3、注意以下操作不触发视图更新 this.arr[index] val; this.arr.length 2; 其他 split() 方法用于把一个字符串分割成字符串数组。事件VUE事件https://cn.vuejs.org/v2/guide/events.html4. 修饰符4.1. 选项卡###4.2.4.3. 发布框textArea4.4. 事件修饰符修饰符是vue功能的扩展是对vue事件或者系统操作等进行功能的补充4.4.1 .stop 处理事件穿透常用vue写法 click.stop阻止默认事件的发生JavaScript的event.stopPropergation()方法4.4.2 .self.self修饰符的作用是只有点击元素本身时才能够触发事件不接受冒泡上来的事件同时不阻止事件冒泡。4.4.3 .prevent4.4.4 capture捕获机制处理对事件捕获监听4.4.5 .once对捕获的事件只触发一次4.5 按键修饰符.space是vue封装的对keyCode别名与下面的代码表示相同JavaScript4.6 系统修饰符4.6.1 .ctrl4.6.2 .exact4.7 鼠标按键修饰符buttonclick.right’add’按我加1/buttonbuttonclick.right.prevent’add’按我加1/button鼠标右键点击时可以实现数值增加1但是也会出现右键默认弹窗。 可结合prevent修饰符实现右键的事件监听。.middlebutton click.right.middle’add’按我加1/ button4.8 表单修饰符.lazy修饰符是将Input输入框的数据绑定v-model从实时监听状态变为change状态.number修饰符将输入的含数字字符串转为纯数字类型过滤无效的字符串。.trim修饰符过滤前后空白divinput typetextv-model.lazyvalinput typetextv-model.numbervalinput typetextv-model.trimvalp{{val}}/p/div5 vue脚手架 vue-clivue-cli是vue的脚手架工具帮助我们快速生成了vue的起步项目内置一些必备的打包工具等让我们快速开发上手。地址https://cli-vuejs.org/zh/5.1 vue-cli 目录结构见2.15.2 npm run 编译过程在scripts这个对象中的key就是npm run的命令值。vue-cli默认提供了三个命令分别是编译/热部署打包lint检验文件代码合格性输入npm run dev第一步从node_modules/.bin/vue-cli-service文件目录vue-cli核心代码是lib/Service.js5.3 起步文件介绍一个vue的组件就是将试图和逻辑进行了一个整合。main.js所有的Vuex代码都必须在main.js中进行注册。render渲染当前App.vue组件。$amount(‘#app’) 挂载函数。App.vueApp.vue的 template 中引入了HelloWorld组件并打印HelloWorld信息。div 根标签不能去除。template元素的作用是搭建vue文件的结构。script元素的作用是对当前文件逻辑进行交互。style元素的作用是对当前文件的样式进行修饰。index.htmlnoscript 标签prototypeVue.prototype.$axios axios;给vue函数添加一个原型属性$axios指向Axios这样做的好处是在vue实例或组件中不用再去重复引用Axios直接用this.$axios就能执行axios 方法了5.4 vue组件所有的vue组件都是以.vue结尾的文件vue-cli中的App.vue文件就是整个vue的根组件。return每个组件返回的是一个对象。data是一个函数返回的是一个对象让每个数据隔离这个是JavaScript原理设计的export default必须要有一个暴漏。People的data返回的是一个对象每一个实例返回的都是独立对象互不冲突。5.5 props 父子组件传值vue提供了一个props的入口也是父子组件之间唯一的传值方式父组件通过v-bind自定义属性传入值子组件通过props接收对应的参数。5.5 $emit 子组件向父组件传值$emit()方法是vue封装的用于向父组件返回自定义事件。父组件通过在子组件设置对应的自定义事件后触发该事件。子组件不可直接修改父组件的值只能传递一个自定义方法父组件通过vue封装的$emit方法调用这个自定义事件实现修改父组件的值。子组件使用 $emit 触发父组件的自定义事件People.vue在Number子类点击子组件按钮调用add()函数add触发$emit返回的自定义方法“add”。 App.vue父级通过add接收返回事件sumNum()方法触发sumNum()方法中的业务。完成a动作 template div h3子组件向父组件传参/h3 h3a:{{a}}/h3 button clickadd按我加1/button /div /template script export default { props: { a: { type:Number, required: true } }, data() { return { //返回Object } }, methods:{ add(){ this.$emit(add)//自定义父组件名称 } } } /script style/styleApp.vueadd自定义事件是子组件通过emit传递的自定义事件修改父组件事件方法sumNum()然后修改自己的值。template div People addsumNum v-bind:aa /People /div /template script //引入People组件 import People from ./components/People.vue export default { components: { People }, data() { return { a: 10 } }, methods:{ sumNum(){ console.log(最终在这里执行a动作) this.a } } } /script style/style5.5 watchwatch显示2个参数一个是旧的一个是新的。作用是用来监听数据data中的数据及props、路由。handler()是监听函数如果需要初始化时进行监听将immediate设置为true.5.7 computed 计算属性5.7.1. computed与普通的methods的区别6$attrs、$listeners实例属性(1)$attrs包含了父作用域中不作为prop被识别且获取的attribute绑定参数class和style除外。一个组件没有声明任何prop时这里会包含所有父作用域的绑定class和style除外并且v-bind”$attrs”传入内部组件——在创建高级别的组件时非常有用。(2)$listeners包含了父作用域中的不含.native修饰器的v-on事件监听器。它可以通过v-on”$listeners”传入内部组件—在创建更高层次的组件时非常有用。$listeners获取的是祖先组件绑定到后代组件的所有事件监听如Parent传递add事件Child传递minus()事件方法则GrandSon能够通过$listeners获取到add()和minus()两个事件。即子组件可以接收到父组件的非.native修饰符的事件监听。//.native辅助原生的事件监听。 Child v-on:click.nativeadd/Child7 $refs 和 $el 实例属性7.1.1 $refs 控制子元素事件7.1.2 $el 通过refs修改样式Vue 的 el 属性是一个 CSS 选择器7.2 mounted()ref 和 $refs在JavaScript中需要通过document.querySelector(“#demo”)来获取dom节点然后再获取这个节点的值。在Vue中我们不用获取dom节点元素绑定ref之后直接通过this.$refs即可调用这样可以减少获取dom节点的消耗。ref的介绍ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用引用指向的就是 DOM 元素如果用在子组件上引用就指向该子组件实例通俗的讲ref特性就是为元素或子组件赋予一个ID引用,通过this.$refs.refName来访问元素或子组件的实例prefpHello/pchildrenrefchildren/childrenthis.$refs.p this.$refs.children$refs的介绍this.$refs是一个对象持有当前组件中注册过 ref 特性的所有 DOM 元素和子组件实例注意 $refs只有在组件渲染完成后才填充在初始渲染的时候不能访问它们并且它是非响应式的因此不能用它在模板中做数据绑定.注意当ref和v-for一起使用时获取到的引用将会是一个数组包含循环数组源https://blog.csdn.net/qq_38128179/article/details/888760608 mixins 混入混入 (mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时所有混入对象的选项将被混入该组件本身的选项。8.1 第一节可复用的功能用来分发vue组件中可复用的功能。一个混入对象可以包含任意组件选项。类似函数封装。在混入mixins文件增加create()会分别依次执行不会进行覆盖。slot 插槽很详细https://www.cnblogs.com/loveyt/p/9946450.html作用域插槽作用域插槽就是在槽上面绑定数据。作用域插槽绑定了一套数据父组件可以拿来用情况就是样式父组件说了算但内容可以显示子组件插槽绑定的。slotnameup:datadata/slotexport default { data: function(){ return { data: [zhangsan,lisi,wanwu,zhaoliu] } } }router-viewrouter-viewWebpack20.1 创建项目 vue init webpack myvue20.2 启动项目 npm run dev20.3 编译 npm run buildVUE Element UInpm i element-ui -S #在项目的根目录安装Element UI在package.json可以看到elementui已经引入成功了修改/src/main.js文件引入element-ui和样式import ElementUI from element-ui import element-ui/lib/theme-chalk/index.css; Vue.use(ElementUI);后台界面布局登录vueelementui搭建后台管理界面(1登录)https://www.cnblogs.com/wbjxxzx/p/9942648.html首页首页布局代码template !-- el-container外层容器。当子元素中包含 el-header 或 el-footer 时全部子元素会垂直上下排列否则会水平左右排列。 -- el-container el-header div classheader_logoimg :srcheader_logo_img altalm-iot /后台管理-布局/div /el-header el-container el-aside width200px el-menu :default-activeactiveIndex classel-menu-demo modelhorizontal selecthandleSelect !-- el-menu :default-activethis.$router.path modelhorizontal selecthandleSelect router -- el-menu-item index1个人中心/el-menu-item el-submenu index2 template slottitle classfr设备管理/template el-menu-item index2-1选项1/el-menu-item el-menu-item index2-2选项2/el-menu-item /el-submenu el-menu-item index/OrderList订单管理/el-menu-item /el-menu /el-aside !--Main中的内容-- el-mainMain router-view/router-view /el-main /el-container /el-container /template script import header_logo_img from /assets/logo.png; export default { name: Home, data() { return { header_logo_img, msg: Elelement Layout Home, }; }, }; /script !-- Add scoped attribute to limit CSS to this component only -- style scoped .el-container { position: absolute; width: 100%; top: 0px; left: 0; bottom: 0; } .el-aside { background-color: #d3dce6; color: #333; text-align: center; line-height: 200px; } .el-main { background-color: #e9eef3; color: #333; text-align: center; line-height: 160px; } .el-menu .fr { float: right; } /*边框底部*/ .el-header .el-menu { border-bottom: none; } .el-aside, .el-main { padding-top: 60px; /*填充上部*/ } .el-aside .el-menu { border-right: none; /*menu右边框*/ } .el-header { width: 100%; background-color: #b3c0d1; color: #333; text-align: left; line-height: 60px; padding: 0; z-index: 1000; } .header_logo { flex: 3; display: flex; justify-content: left; margin-left: 10px; } .header_logo img { width: 50px; height: 50px; } /styleMD5加密随机数签名时间戳token1.安装 npm install --save js-md5 -d 2.在mian.js中引入 import md5 from js-md5; 3.设置成全局属性方便每个页面使用 Vue.prototype.$md5 md5; 4.在需要的页面中调用 this.$md5(原始密码); 前端vue 用rsa加密传输 npm i jsencrypt -S https://www.cnblogs.com/wqnmlgbsz/p/13094289.htmlCodex相关nvm use 切换node版本把系统命令行使用的 Node 从 20.17.0 切换到 16.18.1。nvm use16.18.1影响范围会影响新打开的终端以及 Codex 执行的 node、npm 等项目命令。不影响 Codex 桌面应用本身、模型或内部运行环境。Codex 自带独立 Nodev24.19.0当前系统项目 Nodev16.18.1已经运行的进程不会因后续切换而改变版本。参考资料https://www.runoob.com/vue2/vue-tutorial.html$refs, $children, $parent获取父子组件的实例来实现父子组件之间的通信https://blog.csdn.net/yiyueqinghui/article/details/84203477 vue 基础知识
操作题Vue 两个等号 和三个等号 的区别 用于比较两者是否相等忽略数据类型。 用于更严谨的比较值和值的数据类型都需要同时比较。 为什么vue中data必须是一个函数 https://blog.csdn.net/xyphf/article/details/88863059Vue中v-model与:value的区别 v-model不可以加其他值inputtypetextv-modelcurAmount:value可以加 单位inputtypetext:valuecurAmount元var,let,cont声明变量的区别 https://www.cnblogs.com/bonly-ge/p/9262723.html 在 ES6 之前JavaScript 只有两种作用域 全局变量 与 函数内的局部变量。 全局变量在函数外声明的变量作用域是全局的。全局变量在JS任何地方都可以访问。 ES2015(ES6) 新增加了两个重要的 JS关键字: let 和 const。 let 声明的变量只在 let 命令所在的代码块内有效。 const 声明一个只读的常量一旦声明常量的值就不能改变。 函数内使用 var 声明的变量只能在函数内容访问如果不使用 var 则是全局变量 使用 var 关键字声明的全局作用域变量属于 window 对象 var 关键字定义的变量可以在使用后声明也就是变量可以先使用再声明。 let 关键字定义的变量需要先声明再使用。声明的变量只在 let 命令所在的代码块内有效。 const 用于声明一个或多个常量声明时必须进行初始化且初始化后值不可再修改。vue中 require和import区别 https://www.cnblogs.com/caiguangbi-53/p/11757508.html let echarts require(echarts/lib/echarts) 这里require直接从 node_modules 中查找文件位置进行引入vue中 ref 和 $refs 的介绍与使用 https://blog.csdn.net/qq_38128179/article/details/88876060 在JavaScript中需要通过document.querySelector(#demo)来获取dom节点然后再获取这个节点的值。在Vue中我们不用获取dom节点元素绑定ref之后直接通过this.$refs即可调用这样可以减少获取dom节点的消耗。vue中 $router 和 $route 的区别 https://blog.csdn.net/benben513624/article/details/86657492 Vue router 中的 params和query的区别 除了params可以传递参数query也可以写法其实很相似 区别在于1、params需要用name来引入query需要path来引入 vue中 路由 query 和 props vue 路由参数变化页面不刷新数据不更新解决方法watch中监听to from对比 https://blog.csdn.net/qq_29483485/article/details/88383544 vue 文件、图片上传 https://www.cnblogs.com/rogerwu/p/9274193.html https://www.cnblogs.com/liu2lognew/p/14502157.html1 VUE相关知识1.1 Node.jsNode.js是一个Javascript运行环境(runtime)发布于2009年5月由Ryan Dahl开发实质是对Chrome V8引擎进行了封装。Node.js对一些特殊用例进行优化提供替代的API使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快性能非常好。 Node.js是一个基于Chrome JavaScript运行时建立的平台用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动非阻塞I/O模型而得以轻量和高效非常适合在分布式设备上运行数据密集型的实时应用。总结一下node,js提供了javascript在浏览器以外的一个执行环境满足一些特定的场景需求。1.2 npmnpm 是 nodejs 的包管理和分发工具。它可以让 javascript 开发者能够更加轻松的共享代码和共用代码片段并且通过 npm 管理你分享的代码也很方便快捷和简单。通过npm可以更方便的引用和分析基于nodejs开发的类库和插件。npm install 、npm install --save 和 npm install --save-dev的区别相同点三者都会本地安装包到项目的node_modules目录中区别在于对项目package.json的修改npm install不会修改package.json而后两者会将依赖添加进package.json2 VUE的基本介绍VUE 作者 尤雨溪VUE是MVVM框架它是渐进式JavaScript框架是轻量级的。核心是Dom的监听和数据的绑定Vue.js是一个构建数据驱动的界面的库其目标是实现响应的数据绑定和组合的试图组件。Vue.js拥抱数据驱动的视图概念这意味着我们能在普通的HTML模板中使用特殊的用法将DOM“绑定”到底层数据。一旦创建了绑定DOM将与数据保持同步。v-model 表单双向数据绑定异步执行 DOM 更新具体来说异步执行的运行机制如下。 1所有同步任务都在主线程上执行形成一个执行栈execution context stack。 2主线程之外还存在一个任务队列task queue。只要异步任务有了运行结果就在任务队列之中放置一个事件。 3当执行栈中的所有同步任务执行完毕系统就会读取任务队列看看里面有哪些事件。 那些对应的异步任务于是结束等待状态进入执行栈开始执行。 4主线程不断重复上面的第三步。 nextTick 只有同步环境执行完毕DOM渲染完毕之后才会处理异步callback vue nextTick深入理解vue性能优化、DOM更新时机、事件循环机制 https://www.cnblogs.com/hity-tt/p/6729118.html1.基础的JavaScript的试图驱动。重新绘制事件模型2.1 Vue.js 目录结构目录说明build…项目构建(webpack)打包相关配置文件…webpack.base.conf.js基本配置文件…webpack.dev.conf.js开发环境的配置文件…webpack.prod.conf.js生产环境的配置文件…webpack.test.conf.js测试环境的配置文件config…配置文件的目录也有三类环境的配置文件…index.js核心配置文件运行的主机、端口、代理配置跨域node_modules…npm 加载的项目依赖模块public…不会被webpack打包输入路径时必须使用绝对路径。src…要开发的目录项目的核心区域所有的开发文件的核心内容区域包括组件静态资源等。包含了几个目录及文件…assets静态资源文件夹如*.html或logo图片等。和public不同的是assets文件夹会被webpack打包。…componentsvue功能组件的存放位置内部存放的是公共组件。目录里面放的组件文件可以不用。…router配置所有的路由…viewsvue的根组件所有的vue组件都是从这个组件中扩展的App.vue通过编译后将内容编译到.html页面文件中。公共文件主要以各个独立页面为主。…App.vue项目入口文件我们也可以直接将组件写这里而不使用 components 目录。…main.js项目的核心文件vue 的入口文件。所有的Vuex代码都必须在main.js中进行注册。static…静态资源目录如图片、字体等。test…单元测试程序代码目录.gitignore…这些是一些配置文件包括语法配置git配置等。Github相关配置作用是git提交代码时可以指定忽略哪些文件。index.html…首页入口文件你可以添加一些 meta 信息或统计代码啥的。package.json…项目配置文件即项目的相关模块或配置信息package.lock.json…项目配置文件即项目的相关模块或配置信息。记录当前项目安装相关依赖版本号vue编译时会按照这个文件进行编译。README.md…项目的说明文档项目相关打包编译及指令说明markdown 格式………2.2 声明声明式渲染每个 Vue 应用都需要通过实例化 Vue 来实现。定义数据对象。data 用于定义属性methods 用于定义的函数可以通过 return 来返回函数值。注意点Vue 的 el 属性是一个 CSS 选择器Vue中所有对象中的清单内容都是固定的不可以自由设置。Promisepromise是什么1、主要用于异步计算2、可以将异步操作队列化按照期望的顺序执行返回符合预期的结果3、可以在对象之间传递和操作promise帮助我们处理队列axios我们通常使用axios库与后台交互获取数据它是基于promise的http库可运行在浏览器端和node.js中。他有很多优秀的特性例如拦截请求和响应、取消请求、转换json、客户端防御cSRF等。[需求及实现]统一捕获接口报错、弹窗提示、报错重定向、基础鉴权、表单序列化npm install axios; //安装axios #实现的功能 统一捕获接口报错 : 用的axios内置的拦截器 弹窗提示: 引入 Element UI的Message组件 报错重定向: 路由钩子 基础鉴权: 服务端过期时间戳和token,还有借助路由的钩子 表单序列化: 使用qs(npm模块) 链接https://juejin.cn/post/68449034929480827022.1.1 {{ }} 插值语法moustache{{ }} 用于输出对象属性和函数返回值。内部是data数据管理中心的属性渲染也可以是表达式。moustache不支持if else复杂判断//挂载点所有的Vue的方法和属性都必须在对应的挂载根标签内部使用驼峰命名vHeadv-headvMainv-main1.注册组件的时候使用了驼峰命名 如果在注册组件的时候使用了驼峰命名, 那么在使用时需要转换成短横线分隔命名。 2.传递数据时使用驼峰名称 如果父组件向子组件传递数据时使用了短横线分隔命名, 子组件接收时写驼峰式命名。 3.传递方法时双方都不能使用驼峰命名, 只能用短横线分隔命名。3. 指令 directoryvue指令 (directory) 的作用是通过带有v-的特殊属性实现对dom的响应式加载。按钮权限显藏。jsjsvue单机onclickv-on:click 或 click双击dblondblclickv-on:dblclick鼠标移上onmouthenter…鼠标离开onmouthleave…鼠标滑过onmouthmove…鼠标移除onmouthout…失去焦点onblur…聚焦onfocus…键盘事件onkeydown…………vue 指令中el 的 parentNode 为空的问题元素el的父元素parentNode变成了null if (el.parentNode !Vue.prototype.$_has(binding.value)) { el.parentNode.removeChild(el); } 我这边用的是bind的钩子函数。需要把钩子函数改成inserted就解决了。 vue指令 钩子函数 一个指令定义对象可以提供如下几个钩子函数 (均为可选) bind只调用一次指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 inserted被绑定元素插入父节点时调用 (仅保证父节点存在但不一定已被插入文档中)。 update所在组件的 VNode 更新时调用但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。 componentUpdated指令所在组件的 VNode 及其子 VNode 全部更新后调用。 unbind只调用一次指令与元素解绑时调用。3.1. v-if v-else-ifdividapppv-iffalse我是第一行DOM元素/ppv-iftrue我是第二行DOM元素/p/divdividapppv-ifa100a100/ppv-else-ifa100a100/p/div3.2. v-showv-show是通过控制元素的display属性对元素的显示和隐藏进行逻辑判断并没有实现元素的下树。主要区别是涉及到页面的加载性能。3.3. v-for遍历数组数组对象名称是可以自定义的下标参数是index遍历对象与数组不同的是遍历JSONbodydividapptableborder1trtd序号/tdtd门店id/tdtd角色/tdtd账号/tdtd门店名称/td/trtrv-for(member,index) in memberstd{{index}}/tdtd{{member.memberId}}/tdtd{{member.role}}/tdtd{{member.account}}/tdtd{{member.shopName}}/td/tr/table/div/bodyscript//声明式渲染varvuenewVue({el:#app,//挂载点data:{members:[{memberId:3389,role:6,account:15100010001,shopName:门店3389},{memberId:3386,role:6,account:15100010006,shopName:测试3386}]}})/script作业实现99乘法表3.4. 3.4 v-html、v-text{{}} 和 v-text 渲染文本区别{{}}是赋值v-text替换原来的文本信息v-html渲染模板3.5. 3.5 v-cloak 遮盖指令控制渲染结束关联v-cloak遮盖指令的作用是vue实例渲染后结束关联所以我们可以实现网络延迟时不显示编译器的文本{{a}}3.6. v-once 渲染一次数据更新不会引起试图的更新目的是为了优化页面的性能。可用在功能组件上3.7. v-pre跳过节点v-pre跳过大量没有指令的节点不去执行已标记过v-pre的节点跳过该元素编译的过程直接显示元素的文本可用在某个元素上3.8. v-on添加事件监听在vue中去除on然后添加v-on或符号如 button clickadd按我加1/button button v-on:clickminus按我减1/button button v-on:dblclickminus双击按我减1/button3.9. v-bindv-bind属性对大小写不敏感。如果写驼峰命名需要使用-隔开如helloWorld写为hello-world3.10. v-model 表单双向数据绑定实现表单元素的双向数据绑定。$set//向一个vo对象中增加markPoint 属性参数var markPoint {data: [{type: ‘max’, name: ‘最大值’}]}this.$set(vo, ‘markPoint’, markPoint)console.log(vo)opt.series.push(vo);3.11 数组set根据索引设置元素 this.arr.$set(index, val);push 插入数据使用this.$set向数组中插入数据向数组某个对象中插入属性。setData() { //向数组中插入数据 let a [{ name: a, age: 17, sex: 男}, { name: b, age: 18, sex: 女}]; this.$set(a,2,{name: c, age: 20, sex: 男}); console.log(list,a) //向数组中的对象插入属性 this.$set(a[2],salary,3500); console.log(afterList,a); }splice删除arr.splice(arr.indexOf(ele), length) 表示先获取元素的下标删除长度为length的元素arr.splice(1, 2) 删除数组索引为1开始的后面2个元素。concat 合并数组this.arr this.arr.concat(anotherArr);数组变动检测1、变异方法修改了原始数组vue为触发视图更新包装了以下变异方法 push() 方法可向数组的末尾添加一个或多个元素并返回新的长度。 pop() 方法用于删除并返回数组的最后一个元素。 shift() 方法用于把数组的第一个元素从其中删除并返回第一个元素的值。 unshift() 方法可向数组的开头添加一个或更多元素并返回新的长度。 splice() 方法向/从数组中添加/删除项目然后返回被删除的项目。 sort() 方法用于对数组的元素进行排序。 reverse() 方法用于颠倒数组中元素的顺序。 2、非变异方法不会修改原始数组而是返回一个新数组替换数组 filter() 方法创建一个新的数组新数组中的元素是通过检查指定数组中符合条件的所有元素。 concat() 方法用于连接两个或多个数组。 slice() 方法可从已有的数组中返回选定的元素。 3、注意以下操作不触发视图更新 this.arr[index] val; this.arr.length 2; 其他 split() 方法用于把一个字符串分割成字符串数组。事件VUE事件https://cn.vuejs.org/v2/guide/events.html4. 修饰符4.1. 选项卡###4.2.4.3. 发布框textArea4.4. 事件修饰符修饰符是vue功能的扩展是对vue事件或者系统操作等进行功能的补充4.4.1 .stop 处理事件穿透常用vue写法 click.stop阻止默认事件的发生JavaScript的event.stopPropergation()方法4.4.2 .self.self修饰符的作用是只有点击元素本身时才能够触发事件不接受冒泡上来的事件同时不阻止事件冒泡。4.4.3 .prevent4.4.4 capture捕获机制处理对事件捕获监听4.4.5 .once对捕获的事件只触发一次4.5 按键修饰符.space是vue封装的对keyCode别名与下面的代码表示相同JavaScript4.6 系统修饰符4.6.1 .ctrl4.6.2 .exact4.7 鼠标按键修饰符buttonclick.right’add’按我加1/buttonbuttonclick.right.prevent’add’按我加1/button鼠标右键点击时可以实现数值增加1但是也会出现右键默认弹窗。 可结合prevent修饰符实现右键的事件监听。.middlebutton click.right.middle’add’按我加1/ button4.8 表单修饰符.lazy修饰符是将Input输入框的数据绑定v-model从实时监听状态变为change状态.number修饰符将输入的含数字字符串转为纯数字类型过滤无效的字符串。.trim修饰符过滤前后空白divinput typetextv-model.lazyvalinput typetextv-model.numbervalinput typetextv-model.trimvalp{{val}}/p/div5 vue脚手架 vue-clivue-cli是vue的脚手架工具帮助我们快速生成了vue的起步项目内置一些必备的打包工具等让我们快速开发上手。地址https://cli-vuejs.org/zh/5.1 vue-cli 目录结构见2.15.2 npm run 编译过程在scripts这个对象中的key就是npm run的命令值。vue-cli默认提供了三个命令分别是编译/热部署打包lint检验文件代码合格性输入npm run dev第一步从node_modules/.bin/vue-cli-service文件目录vue-cli核心代码是lib/Service.js5.3 起步文件介绍一个vue的组件就是将试图和逻辑进行了一个整合。main.js所有的Vuex代码都必须在main.js中进行注册。render渲染当前App.vue组件。$amount(‘#app’) 挂载函数。App.vueApp.vue的 template 中引入了HelloWorld组件并打印HelloWorld信息。div 根标签不能去除。template元素的作用是搭建vue文件的结构。script元素的作用是对当前文件逻辑进行交互。style元素的作用是对当前文件的样式进行修饰。index.htmlnoscript 标签prototypeVue.prototype.$axios axios;给vue函数添加一个原型属性$axios指向Axios这样做的好处是在vue实例或组件中不用再去重复引用Axios直接用this.$axios就能执行axios 方法了5.4 vue组件所有的vue组件都是以.vue结尾的文件vue-cli中的App.vue文件就是整个vue的根组件。return每个组件返回的是一个对象。data是一个函数返回的是一个对象让每个数据隔离这个是JavaScript原理设计的export default必须要有一个暴漏。People的data返回的是一个对象每一个实例返回的都是独立对象互不冲突。5.5 props 父子组件传值vue提供了一个props的入口也是父子组件之间唯一的传值方式父组件通过v-bind自定义属性传入值子组件通过props接收对应的参数。5.5 $emit 子组件向父组件传值$emit()方法是vue封装的用于向父组件返回自定义事件。父组件通过在子组件设置对应的自定义事件后触发该事件。子组件不可直接修改父组件的值只能传递一个自定义方法父组件通过vue封装的$emit方法调用这个自定义事件实现修改父组件的值。子组件使用 $emit 触发父组件的自定义事件People.vue在Number子类点击子组件按钮调用add()函数add触发$emit返回的自定义方法“add”。 App.vue父级通过add接收返回事件sumNum()方法触发sumNum()方法中的业务。完成a动作 template div h3子组件向父组件传参/h3 h3a:{{a}}/h3 button clickadd按我加1/button /div /template script export default { props: { a: { type:Number, required: true } }, data() { return { //返回Object } }, methods:{ add(){ this.$emit(add)//自定义父组件名称 } } } /script style/styleApp.vueadd自定义事件是子组件通过emit传递的自定义事件修改父组件事件方法sumNum()然后修改自己的值。template div People addsumNum v-bind:aa /People /div /template script //引入People组件 import People from ./components/People.vue export default { components: { People }, data() { return { a: 10 } }, methods:{ sumNum(){ console.log(最终在这里执行a动作) this.a } } } /script style/style5.5 watchwatch显示2个参数一个是旧的一个是新的。作用是用来监听数据data中的数据及props、路由。handler()是监听函数如果需要初始化时进行监听将immediate设置为true.5.7 computed 计算属性5.7.1. computed与普通的methods的区别6$attrs、$listeners实例属性(1)$attrs包含了父作用域中不作为prop被识别且获取的attribute绑定参数class和style除外。一个组件没有声明任何prop时这里会包含所有父作用域的绑定class和style除外并且v-bind”$attrs”传入内部组件——在创建高级别的组件时非常有用。(2)$listeners包含了父作用域中的不含.native修饰器的v-on事件监听器。它可以通过v-on”$listeners”传入内部组件—在创建更高层次的组件时非常有用。$listeners获取的是祖先组件绑定到后代组件的所有事件监听如Parent传递add事件Child传递minus()事件方法则GrandSon能够通过$listeners获取到add()和minus()两个事件。即子组件可以接收到父组件的非.native修饰符的事件监听。//.native辅助原生的事件监听。 Child v-on:click.nativeadd/Child7 $refs 和 $el 实例属性7.1.1 $refs 控制子元素事件7.1.2 $el 通过refs修改样式Vue 的 el 属性是一个 CSS 选择器7.2 mounted()ref 和 $refs在JavaScript中需要通过document.querySelector(“#demo”)来获取dom节点然后再获取这个节点的值。在Vue中我们不用获取dom节点元素绑定ref之后直接通过this.$refs即可调用这样可以减少获取dom节点的消耗。ref的介绍ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用引用指向的就是 DOM 元素如果用在子组件上引用就指向该子组件实例通俗的讲ref特性就是为元素或子组件赋予一个ID引用,通过this.$refs.refName来访问元素或子组件的实例prefpHello/pchildrenrefchildren/childrenthis.$refs.p this.$refs.children$refs的介绍this.$refs是一个对象持有当前组件中注册过 ref 特性的所有 DOM 元素和子组件实例注意 $refs只有在组件渲染完成后才填充在初始渲染的时候不能访问它们并且它是非响应式的因此不能用它在模板中做数据绑定.注意当ref和v-for一起使用时获取到的引用将会是一个数组包含循环数组源https://blog.csdn.net/qq_38128179/article/details/888760608 mixins 混入混入 (mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时所有混入对象的选项将被混入该组件本身的选项。8.1 第一节可复用的功能用来分发vue组件中可复用的功能。一个混入对象可以包含任意组件选项。类似函数封装。在混入mixins文件增加create()会分别依次执行不会进行覆盖。slot 插槽很详细https://www.cnblogs.com/loveyt/p/9946450.html作用域插槽作用域插槽就是在槽上面绑定数据。作用域插槽绑定了一套数据父组件可以拿来用情况就是样式父组件说了算但内容可以显示子组件插槽绑定的。slotnameup:datadata/slotexport default { data: function(){ return { data: [zhangsan,lisi,wanwu,zhaoliu] } } }router-viewrouter-viewWebpack20.1 创建项目 vue init webpack myvue20.2 启动项目 npm run dev20.3 编译 npm run buildVUE Element UInpm i element-ui -S #在项目的根目录安装Element UI在package.json可以看到elementui已经引入成功了修改/src/main.js文件引入element-ui和样式import ElementUI from element-ui import element-ui/lib/theme-chalk/index.css; Vue.use(ElementUI);后台界面布局登录vueelementui搭建后台管理界面(1登录)https://www.cnblogs.com/wbjxxzx/p/9942648.html首页首页布局代码template !-- el-container外层容器。当子元素中包含 el-header 或 el-footer 时全部子元素会垂直上下排列否则会水平左右排列。 -- el-container el-header div classheader_logoimg :srcheader_logo_img altalm-iot /后台管理-布局/div /el-header el-container el-aside width200px el-menu :default-activeactiveIndex classel-menu-demo modelhorizontal selecthandleSelect !-- el-menu :default-activethis.$router.path modelhorizontal selecthandleSelect router -- el-menu-item index1个人中心/el-menu-item el-submenu index2 template slottitle classfr设备管理/template el-menu-item index2-1选项1/el-menu-item el-menu-item index2-2选项2/el-menu-item /el-submenu el-menu-item index/OrderList订单管理/el-menu-item /el-menu /el-aside !--Main中的内容-- el-mainMain router-view/router-view /el-main /el-container /el-container /template script import header_logo_img from /assets/logo.png; export default { name: Home, data() { return { header_logo_img, msg: Elelement Layout Home, }; }, }; /script !-- Add scoped attribute to limit CSS to this component only -- style scoped .el-container { position: absolute; width: 100%; top: 0px; left: 0; bottom: 0; } .el-aside { background-color: #d3dce6; color: #333; text-align: center; line-height: 200px; } .el-main { background-color: #e9eef3; color: #333; text-align: center; line-height: 160px; } .el-menu .fr { float: right; } /*边框底部*/ .el-header .el-menu { border-bottom: none; } .el-aside, .el-main { padding-top: 60px; /*填充上部*/ } .el-aside .el-menu { border-right: none; /*menu右边框*/ } .el-header { width: 100%; background-color: #b3c0d1; color: #333; text-align: left; line-height: 60px; padding: 0; z-index: 1000; } .header_logo { flex: 3; display: flex; justify-content: left; margin-left: 10px; } .header_logo img { width: 50px; height: 50px; } /styleMD5加密随机数签名时间戳token1.安装 npm install --save js-md5 -d 2.在mian.js中引入 import md5 from js-md5; 3.设置成全局属性方便每个页面使用 Vue.prototype.$md5 md5; 4.在需要的页面中调用 this.$md5(原始密码); 前端vue 用rsa加密传输 npm i jsencrypt -S https://www.cnblogs.com/wqnmlgbsz/p/13094289.htmlCodex相关nvm use 切换node版本把系统命令行使用的 Node 从 20.17.0 切换到 16.18.1。nvm use16.18.1影响范围会影响新打开的终端以及 Codex 执行的 node、npm 等项目命令。不影响 Codex 桌面应用本身、模型或内部运行环境。Codex 自带独立 Nodev24.19.0当前系统项目 Nodev16.18.1已经运行的进程不会因后续切换而改变版本。参考资料https://www.runoob.com/vue2/vue-tutorial.html$refs, $children, $parent获取父子组件的实例来实现父子组件之间的通信https://blog.csdn.net/yiyueqinghui/article/details/84203477