2021年9月22日
路由的props配置
摘要： route.js // 该文件专门用于创建整个应用的路由器 import VueRouter from 'vue-router' //引入组件 import About from '../pages/About' import Home from '../pages/Home' import New 阅读全文
posted @ 2021-09-22 19:52 幻影之舞 阅读(242) 评论(0) 推荐(0)
路由的传参-query和params
摘要： message组件： <div> <ul> <li v-for="m in messageList" :key="m.id"> <router-link :to="{ name:'xiangqing', params:{ id:m.id, title:m.title } }"> {{m.title} 阅读全文
posted @ 2021-09-22 19:27 幻影之舞 阅读(264) 评论(0) 推荐(0)
2021年9月21日
axios请求
摘要： 效果图 安装axios npm i axios search组件： <template> <div class="search"> <section class="jumbotron"> <h3 class="jumbotron-heading">Search Github Users</h3> < 阅读全文
posted @ 2021-09-21 18:05 幻影之舞 阅读(84) 评论(0) 推荐(0)
全局事件总线以及消息订阅
摘要： 安装全局事件总线： main.js: new Vue({ el:'#app', render: h => h(App), beforeCreate(){ Vue.prototype.$bus = this//安装全局事件总线 } }) 传值组件中 methods:{ sendName(){ this 阅读全文
posted @ 2021-09-21 17:54 幻影之舞 阅读(118) 评论(0) 推荐(0)
2021年8月30日
vue的插件
摘要： 插件引入（main.js里引用） import Plugin from './plugins.js'; Vue.use(Plugin); main.js import Vue from 'vue' import App from './App.vue' Vue.config.productionTi 阅读全文
posted @ 2021-08-30 23:21 幻影之舞 阅读(68) 评论(0) 推荐(0)
mixin混合
摘要： student.vue <template> <div class="student"> <h2>{{name}}</h2> <h2>{{age}}</h2> <button @click="showName">点我显示名字</button> </div> </template> <script>/ 阅读全文
posted @ 2021-08-30 22:47 幻影之舞 阅读(66) 评论(0) 推荐(0)
ref数据获取
摘要： <template> <div id="app"> <h2 v-text="appname" ref="title"></h2> <button ref = 'btn' @click="show">点我显示</button> </div> </template> <script> export de 阅读全文
posted @ 2021-08-30 22:23 幻影之舞 阅读(204) 评论(0) 推荐(0)
props使用
摘要： 1.简单声明接受 props:['name','age'] 2.接受的同时对数据进行限制 props:{ name:String, age:Number } 3.接受的同时对数据进行限制+默认值的指定+必要性的限制 props:{ name:{ type:String, required:true/ 阅读全文
posted @ 2021-08-30 21:57 幻影之舞 阅读(300) 评论(0) 推荐(0)
2021年8月17日
数据检测+数组或对象添加属性
摘要： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </hea 阅读全文
posted @ 2021-08-17 19:55 幻影之舞 阅读(80) 评论(0) 推荐(0)
列表过滤+排序
摘要： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </hea 阅读全文
posted @ 2021-08-17 19:52 幻影之舞 阅读(41) 评论(0) 推荐(0)