![](https://img-blog.csdnimg.cn/20190918135101160.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
Vue
叕叕666
这个作者很懒,什么都没留下…
展开
-
vue-router 路由传参
安装npm install vue-routermain.js修改import Vue from 'vue'import App from './App.vue'import VueRouter from "vue-router"// 变量名只能用routerimport router from "./router/index"Vue.config.productionTip = false;Vue.use(VueRouter);new Vue({ render: h =&原创 2022-02-15 13:53:14 · 303 阅读 · 0 评论 -
vue-router 多级路由的配置
安装npm install vue-routermain.js修改import Vue from 'vue'import App from './App.vue'import VueRouter from "vue-router"// 变量名只能用routerimport router from "./router/index"Vue.config.productionTip = false;Vue.use(VueRouter);new Vue({ render: h =&原创 2022-02-15 13:48:32 · 1059 阅读 · 0 评论 -
Vue 插槽的基本使用
默认插槽子组件<template> <div> <h1 style="color: blue">{{title}}</h1> <!-- 指定数据显示的位置 --> <slot>默认显示的内容</slot> </div></template><script> export default { n原创 2022-02-14 10:21:30 · 313 阅读 · 0 评论 -
Vue 事件总线的基本使用
定义事件总线import Vue from 'vue'import App from './App.vue'Vue.config.productionTip = false;new Vue({ render: h => h(App), beforeCreate() { //定义全局事件总线 Vue.prototype.$bus = this }}).$mount('#app');创建总线事件<template>原创 2022-02-11 09:27:25 · 239 阅读 · 0 评论 -
Vue 使用$listeners触发自定义事件实现子组件给父组件传递数据
定义事件<template> <div> <!-- aaaa 自定义事件名 --> <MyTest @aaaa="handleClick"></MyTest> </div></template><script> import MyTest from "@/components/MyTest/index" export default {原创 2022-02-11 09:24:59 · 538 阅读 · 0 评论 -
Vue 自定义事件实现子组件给父组件传递数据
定义自定义事件<template> <div id="app"> <!-- *自定义事件定义方式一 func是自定义事件名, getData为事件的回调 --> <PropsDemo @func="getData"></PropsDemo> <!-- *自定义事件定义方式二 --&g原创 2022-02-11 09:19:06 · 430 阅读 · 0 评论 -
Vue mixin(组件混入)的基本使用
自定义mixin:myMixin.jsconst myMixin = { data() { return { message: 'hello', foo: 'abc' } }, methods: { test () { console.log('test') } }}export default myMixin;test.vue原创 2022-02-10 10:55:50 · 267 阅读 · 0 评论 -
Vue 组件props(组件传参实现父子组件传递数据)的基本使用
子组件<template> <div> <ul> <li>姓名: {{name}}</li> <li>年龄: {{age}}</li> </ul> <button @click="func("data")">点击触发传入的function</button> </div&g原创 2022-02-10 10:52:26 · 309 阅读 · 0 评论 -
Vue 组件ref的基本使用
<template> <div> <!-- 定义ref --> <p ref="testRef">ref测试</p> <button @click="show">使用ref</button> </div></template><script> export default { name: "Ref原创 2022-02-10 09:59:12 · 926 阅读 · 0 评论 -
Vue 的生命周期
Vue2.x和Vue3.x的生命周期钩子略有不同Vue2.xVue3.x原创 2022-02-09 11:01:37 · 166 阅读 · 0 评论 -
Vue 侦听属性(watch)的基本使用
使用方式一<body><div id="app"> <!-- 侦听属性 --> <h1>{{resByWatch}}</h1></div><script> new Vue({ el: "#app", // 数据 data: { text: "数据", resByWatch: ''原创 2022-02-09 10:53:21 · 420 阅读 · 0 评论 -
Vue 计算属性(computed)的基本使用
使用方式一<div id="app"> <div> str1:{{leftStr}}, str2:{{rightStr}} </div> <p> <!-- 使用计算属性 --> str:{{str}} </p></div><script>var vm = new Vue({ el: "#app", data: { leftStr: "a",原创 2022-02-09 10:48:19 · 1090 阅读 · 0 评论 -
Vue 自定义指令
自定义指令方式一<body><div id="app"> <p>count: {{count}}, big-count: <span v-my-directive="count">{{count}}</span></p> <button @click="count++">点击 +1</button></div><script> new Vue({原创 2022-02-08 13:45:23 · 96 阅读 · 0 评论 -
vue 的指令(v-bind,v-mode,v-on,v-if,v-show,v-for,v-text,v-html,v-cloak,v-once,v-pre)的基本使用
v-bind,v-mode,v-on,v-if,v-show,v-for,v-text,v-html,v-cloak,v-once,v-pre原创 2022-02-08 13:42:07 · 202 阅读 · 0 评论 -
vue-router使用是报错. TypeError: Cannot read properties of undefined (reading ‘matched‘)
vue-router报错 TypeError: Cannot read properties of undefined (reading ‘matched‘)原创 2021-12-16 15:28:12 · 8558 阅读 · 0 评论 -
npm安装 vue/cli是报很多npm ERR gyp错误
试了很多方式都不可以,最后发现是源地址的问题原来使用的源地址是:https://registry.npm.taobao.org/改成官方源地址:npx nrm use npm或npm config set registry http://registry.npmjs.org/原创 2021-07-17 17:40:47 · 1062 阅读 · 0 评论