vue.JS踩坑与总结

Posted 2021-05-01 Web前端开发分享平台

vue中npm run dev运行项目不能自动打开浏览器

WARN：Your application is running here: http://localhost:8080

解惑

在你的项目中找到config/index.js文件，并打开，修改一下参数：

autoOpenBrowser: true,  //是否默认打开浏览器,默认是false，改为true即可

Vue组件如何命名

WARN：Do not use built-in or reserved html elements as component id:header

解惑

(1) 检查名称是否与 HTML 元素或者 Vue2.0 保留标签重名

组件，不能和html标签重复

例如引入组件时 import header from './components/header.vue'

header组件，与h5新标签重复，但是因为vue2.0的header区分大小写，所以可以用Header命名，是不是很愉快呢？^_^

vue2.0与vue1.0不同，相信现在已经没人用vue1.0，所以在这里就不总结vue1.0的了，vue2.0重名区分大小写，所以我们可以愉快地使用 Input、Select、Option 等而不用担心重名。这个功劳属于 Vue 2.0 引入的 Virtual DOM。

(2)检查组件名称是否以字母开头，后面跟字母、数值或下划线。

总结两点命名规则为：组件名以字母开头，后面跟字母、数值或下划线，并且不与 HTML 元素或 Vue 保留标签重名

自定义事件

在vue自定义事件使用$on与$emit，前者用于触发监听，后者用于触发，监听可以有两种方式

//使用v-on在html中监听

<my-component v-on:test="callbackFun"></my-component>

//直接用$on监听  

<script> 

vm.$on('text',function(){})

</script>

动态组件渲染

多个组件可以使用同一个挂载点，然后动态地在它们之间切换。使用保留的 <component> 元素，动态地绑定到它的 is 特性：

//动态组件由 vm 实例的属性值 `componentId` 控制

<component :is="componentId"></component>

//也能够渲染注册过的组件或 prop 传入的组件

<component :is="$options.components.child"></component>

keep-alive

如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数：

<keep-alive>

     <component :is="currentView">

         <!-- 非活动组件将被缓存！ -->  

    </component>

</keep-alive>