Vue – 艾丽卡 Blog

2022年11月8日

发表 admin at 2022年11月8日

类别

Vue: export default中的name属性有哪些作用

− 目录 Vue export default的name属性作用 1.组件自身的递归调用 2.当我们使用vue.js官方提供的调试工具调试 3.最后一种应该是使用比较多的情况 Vue如何获取组件name属性 Vue export default的name属性作用在划分模块和创建单页面组件时，常常写到name。嵌套路由中，index.vue极为常见。那么在vue中，export default { name: ‘xxx’} 中的name到底有啥作用呢？还是先回到官方的文档：官方链接官方文档已经给我们描述了两种使用情况，可能在开发中，并不是常用，举例子说明一下。 1.组件自身的递归调用就是在当前组件中，调用组件自己 componentA.vue 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 3…

2022年11月8日

发表 admin at 2022年11月8日

类别

Vue: main.js template: '<App/>' 的意义

new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) components 是声明有哪些组件 template 是使用哪个组件官方文档 el: '#app' 是index.html 的<div id="app"></div> App.vue <div id="app">xxxxxxxx</div> 会替换index.html中的<div id="app"></div>，因为外层元素都是<div id="app"></div> 所以都是感觉只是替换了里面的如果把index.html中改为： <div id="app" class="aaa"></div>…

2022年11月6日

发表 admin at 2022年11月6日

类别

Vue: 在组件上使用 v-model

在组件上使用 v-model 自定义事件也可以用于创建支持 v-model 的自定义输入组件。记住： <input v-model="searchText"> 等价于： <input v-bind:value="searchText" v-on:input="searchText = $event.target.value" > 当用在组件上时，v-model 则会这样： <custom-input v-bind:value="searchText" v-on:input="searchText = $event" ></custom-input> 为了让它正常工作，这个组件内的 <input> 必须：将其 value attribute 绑定到一个名叫 value 的 prop 上在其 input 事件被触发时，将…

2022年11月5日

发表 admin at 2022年11月5日

类别

Vue: 数组语法

数组语法我们可以把一个数组传给 v-bind:class，以应用一个 class 列表： <div v-bind:class="[activeClass, errorClass]"></div> data: { activeClass: 'active', errorClass: 'text-danger' } 渲染为： <div class="active text-danger"></div> 如果你也想根据条件切换列表中的 class，可以用三元表达式： <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div> 这样写将始终添加 errorClass，但是只有在 isActive 是 truthy[1] 时才添加 act…

2022年11月4日

发表 admin at 2022年11月4日

类别

Vue: vue2 对象属性拦截原理 Object.defineProperty()

1. 对象属性拦截 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body>  <div id="app"> <p v-text="name"></p> <input type="text" v-model="name"> </div> &…

2022年11月2日

发表 admin at 2022年11月2日

类别

Vue: error:0308010C:digital envelope routines::unsupported

1. 相关报错： this[kHandle] = new _Hash(algorithm, xofLen); ^ Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:67:19) at Object.createHash (node:crypto:130:10) at module.exports (/vuepress-theme-vdoing/node_modules/webpack/lib/util/createHash.js:135:53) at NormalModule._initBuildHash (/vuepress-theme-vdoing/node_modules/webpack/lib/Norm…

2022年10月22日

发表 admin at 2022年10月22日

类别

Vue: vue.config.js 不生效

前言在创建Vue项目的时候，在根目录下创建了 vue.config.js 不生效。检查package.json启动项项目 package.json 中 scripts 配置项目是否为 vue-cli-service serve 用 vue-cli-service serve 启动就会用 vue.config.js；用 webpack-dev-server 启动就会用 wepback.config.js（默认）…

2022年10月22日

发表 admin at 2022年10月22日

类别

Vue: 初始化方式 vue create 和 vue init 的区别

1. vue create 是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与cue-cli2项目结构不同，配置方法不同，具体配置方法参考官方文档。使用方式：vue create 项目名称 2. vue init vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名。vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下，老项目的src目录覆盖3.x的src目录(如果修改了配置，可以查看文档，用cli3的方法进行配置) 2.1 webpack是官方推荐的标准模板名使用方式：vue init webpack 项目名称 2.2 electron-vue的模板使用方式：vue i…

2022年10月5日

发表 admin at 2022年10月5日

类别

Vue: Linux下安装 nvm Node.js vue-cli

1. nvm NVM 是 Node.js 的版本管理工具，可以在一个环境中同时安装多个 nodejs 版本（和配套的 npm 版本），并随时切换。在线安装 https://github.com/nvm-sh/nvm 1 Run the install script curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash 2 刷新配置 source ~/.bashrc 3 Verify Installation Do: command -v nvm which should output nvm if the installation w…

2022年8月12日

发表 admin at 2022年8月12日

类别

JavaScript: [Vue warn]: Failed to generate render function: SyntaxError: missing ) in parenthetical in

问题： [Vue warn]: Failed to generate render function: SyntaxError: missing ) in parenthetical in with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',{staticClass:"header_con"},[_c('div',{staticClass:"header"},...,attrs:{"type":"reset","name":"","value":"取消"},on:{"click":close_editor}})])]),_v(" "),_c('div',{staticClass:"mask"})])])} (found in <Root>) vue-2.5.16.js:597…