随笔分类 -  Vue

上一页 1 2
路由的传参-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 幻影之舞 阅读(260) 评论(0) 推荐(0)
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 幻影之舞 阅读(69) 评论(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 幻影之舞 阅读(112) 评论(0) 推荐(0)
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 幻影之舞 阅读(57) 评论(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 幻影之舞 阅读(54) 评论(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 幻影之舞 阅读(203) 评论(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 幻影之舞 阅读(288) 评论(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:55 幻影之舞 阅读(76) 评论(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 幻影之舞 阅读(40) 评论(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:50 幻影之舞 阅读(43) 评论(0) 推荐(0)
key的作用
摘要：<!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:48 幻影之舞 阅读(527) 评论(0) 推荐(0)
computed和watch
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>watch实现</title> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script 阅读全文
posted @ 2021-08-17 19:47 幻影之舞 阅读(46) 评论(0) 推荐(0)
vue中绑定class
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <styl 阅读全文
posted @ 2021-08-17 19:45 幻影之舞 阅读(45) 评论(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:44 幻影之舞 阅读(265) 评论(0) 推荐(0)
事件修饰符
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <styl 阅读全文
posted @ 2021-08-17 19:39 幻影之舞 阅读(63) 评论(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:34 幻影之舞 阅读(209) 评论(0) 推荐(0)
vue的计算属性
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <!--计算 阅读全文
posted @ 2021-08-17 19:29 幻影之舞 阅读(59) 评论(0) 推荐(0)
数据代理
摘要：<script type="text/javascript"> let num = 16 let person = { name:"张三", //age:18, sex:'男' } Object.defineProperty(person,'age',{ /*value:16, enumerable 阅读全文
posted @ 2021-08-08 20:10 幻影之舞

上一页 1 2