- 博客(35)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 vue父子组件通信
1.子给父通信this.$emit()this.$parent//获取父组件，然后直接调用父组件的方法2.父给子通信给子组件添加一个ref属性this.$refs//获取所有ref属性子组件<template> <div> <div>儿子健康:{{health}}</div> <button @click="emit1">打父组件</button> <but
2021-11-08 17:11:07
240
原创 todo项目components组件化
组件化import Items from '../components/items.vue'import Tabs from '../components/Tabs.vue'components:{ Items, Tabs },items组件父组件:todo=“todo”,子组件props传值父组件 <items v-for="(todo, index) in filteredTodos" :key="index" :todo
2021-10-14 15:30:32
111
原创 todo项目实现及总结
> 数组的方法filter,push,pop,slice,map,unshift，shift > push() :从**后面添加**元素，返回值为添加完后的数组的长度> unshift():从**前面添加**元素, 返回值是添加完后的数组的长度> shift() 从**前面删除**元素，只能删除一个 返回值是删除的元素> pop() 从**后面删除**元素，只能是一个，返回值是删除的元素> splice(i,n) **删除从i(索引值)开始之后的那个元素**。返回值是删除的元素slice(st
2021-10-14 15:00:51
576
原创 vue 兄弟组件传值
先在main.js里定义一个新的实例//定义$busVue.prototype.$bus=new Vue()在子组件里自定义方法，通过$bus.$emit向兄弟组件传值子组件<template><div> <h1>儿子组件</h1> <button @click="say">表达爱意</button></div></template><script>export def
2021-10-09 16:34:09
548
转载 父子组件传值
1.父组件向子组件传值在 Vue 中，可以使用 props 向子组件传递数据。父组件通过：绑定元素 <demo-grid :heroes="gridData" :columns="gridColumns" :filter-key="searchQuery" > </demo-grid>子组件<script>export default { props: { heroes: "",
2021-10-08 19:45:04
97
原创 vue组件基础
自定义组件因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。组件还可以复用一个组件的 data 选项必须是一个函数因此每个实例可以维护一份被返回对象的独立的拷贝：如果 Vue 没有这条规则，点击一个按钮就可能会像如下代码一样影响到其它所有实例：<template><div id="components-demo">
2021-09-30 14:07:49
44
原创 v-on 自定义事件方法
用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。event.stopPropagation()@click.stop这是阻止事件的冒泡方法，不让事件向document上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个链接，这个链接仍然会被打开<template><div> <a href="http://www.baidu.com" @click="prevent($event)"&.
2021-09-30 10:38:47
334
转载 vue生命周期
beforecreate此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。<template><div> <p>{{msg}}</p> <button @click="change">改变</button> </div></template><script>export default
2021-09-29 17:37:24
57
原创 vue render函数
rendervue中的template在vue内部会被编译成render函数<script>export default { render(createElement){//使用render函数创建h1标签 return createElement('h1',{},'hello vue') }}</script><style></style>使用render函数可以动态的创建标签<script>expo
2021-09-28 16:40:03
61
原创 vue computed与watch
computed<template><div>{{reversedMessage}}</div></template><script>export default { data(){ return{ message:'Hello Vue!' } }, computed:{ reversedMessage(){ return this.message.split('').r
2021-09-28 15:57:41
46
原创 vue props组件传值
定义组件的时候使用驼峰，使用的时候使用短横线prop 传值时候如果使用的是短横线，接受的时候要使用驼峰<template><div id="example"> <!--自定义组件MyComponent--> <my-component title="你好" :full-name="name"></my-component></div></template><script>import Vue
2021-09-28 15:17:24
210
原创 vue.extend实列（创建弹窗组件）
1.效果2.代码实现目录结构toast.js文件import Vue from 'vue';import Toast from '../components/Toast.vue'const ToastConstructor=Vue.extend(Toast);//vue.extend创建构造器console.log(ToastConstructor)new Vuefunction showToast(text,duration=4000){ //实例化构造器 const
2021-09-28 10:13:46
163
原创 v-on,v-show,v-if,v-bind
vue不需要获取dom元素，直接通过this.data就可以获取data的数据，主要在于数据的改变<template> <h2 @click="changeFood">{{food}}</h2> </template><script>export default { data(){ return{ food:"西红柿" } }, methods:{ changeFood(){
2021-09-27 10:30:54
162
原创 vue 计算属性和响应式对象
computed<template> <div id="app"> <p>姓名：{{ name }}</p> <p>年龄： <button type="button" @click="changeAge(-1)">-</button> {{ age }} <button type="button" @click="changeAge(1)">+</b
2021-09-24 14:31:48
516
原创 vue3 compositionapi初使用
setup函数和响应式对象setup函数1.使用composition api的入口2.在beforecreate之前使用3.在setup中没有this4.返回对象中的属性可在模板中使用ref 函数1.返回一个响应式引用2.name是一个响应式对象<template> <div id="app"> <p>{{ name }}</p> <p>{{ age }} <button type="but
2021-09-24 10:11:06
56
转载 Vue.observable
用法：让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器，用于简单的场景用于数据共享，当十几个组件同时共用一套数据时候，把数据独立抽离出来，方便维护也可以实现多个组件之间数据的共享和更新先建一个store.jsimport Vue from 'vue'export const state = Vue.observable({ screenCars: {},/.
2021-09-23 16:35:37
75
原创 vue mixin
混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。在src下新建一个文件夹mixin,在新建一个mixin.js//自定义mixinlet MIXIN = { data() { return { name: 'mixin' } }, created() { console.log(.
2021-09-23 15:47:38
58
原创 vue component使用
vue component使用<template><div id="example"> <!--自定义组件my-component--> <my-component></my-component></div></template><script>import Vue from 'vue'// 注册Vue.component('my-component', { template: '&
2021-09-23 14:30:07
108
原创 vue filter过滤器处理数据
全局使用过滤器在main.js里import Vue from 'vue'import App from './App'import router from './router'// import appApi from './api/api'// import "./directive/drag"// Vue.prototype.$appApi = appApi;Vue.config.productionTip = falseVue.filter('capitalize', funct
2021-09-23 11:43:17
238
原创 vue指令Vue.directive
1.bind,insertedbind:指令第一次绑定到元素时调用,在绑定时执行的初始化动作inserted: 被绑定元素插入父节点时调用<template><div id="app"> <input type="text" v-focus/></div></template><script>import Vue from 'vue'// 注册一个全局自定义指令 v-focusVue.directive('focu
2021-09-23 10:07:37
184
原创 promise使用
<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title></head><body><script>function ajax(URL) { return new Promise(function (resolve, reject) { var req = new XMLHtt
2021-09-22 15:35:39
73
1
原创 vue delete
删除data中对象的属性<template><div> <button class="btn" @click="dynamicClick()">动态赋值</button> </div></template> <script>import vue from 'vue'export default { data() { return { items:{
2021-09-22 14:54:37
106
转载 vue中的vue.set()的使用
Vue.set( target, key, value ) / this.$set( target, key, value )target：要更改的数据源(可以是对象或者数组)key：要更改的具体数据value ：重新赋的值<template><div> <!--key的主要作用就是提高渲染性能，避免数据混乱的情况出现 获取item数组里的message--> <p v-for="item in items" :key="item.id"&
2021-09-22 14:12:50
397
原创 api理解
理解apiAPI = 应用程序编程接口（Application programming interface）api是与外部应用程序的接口，通过调用外部公开的api，可以让我们不用开发，直接使用外部应用的功能。api可以将你的请求返回给应用程序数据库和设备，然后api会给你返回你需要的数据，并建立连接。API接口就是完成和其他组件的交互的地方。...
2021-09-22 11:58:51
101
转载 Vue之vm.$el是什么
在实例挂载之后，元素可以用 vm.$el 访问。$，以便与用户定义的属性区分开来<template> <button @click="myClick">点我啊</button></template><script>export default { data(){ return{ } }, methods:{ myClick(){ console.log(vm.$el)//打印id为ap
2021-09-22 10:54:54
1873
转载 vue.nextTick(更新)
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。Vue.nextTick(() => {}) / this.$nextTick(() => {// 更新完成})<template> <div> <span>{{msg}}</span> </div></template><script>export default {data()
2021-09-22 10:24:25
80
转载 vue生命周期
vue的生命周期是什么过程：组件创建->数据初始化->挂载->更新->销毁方法： beforeCreate//（创建前）,在数据初始化之前 created//（创建后）初始化事件，$el属性还没有显示出来，在模板渲染成html前调用 beforeMount//（挂载前）render函数首次被调用，编译模板，把data里面的数据和模板生成html。此时还没有挂载html到页面上。 mounted//（挂载后）在模板渲染成html后调用，通常是初始化页
2021-09-22 10:13:49
49
转载 html布局
网站常常以多列显示内容（就像杂志和报纸）。<!DOCTYPE html><html><head><style>#header { background-color:black; color:white; text-align:center; padding:5px;}#nav { line-height:30px;//设置行高 background-color:#eeeeee; heigh
2021-09-20 13:05:18
54
原创 vue.extend学习
官网上<template><div id="mount-point"></div></template><script>import Vue from 'vue'var Profile = Vue.extend({ template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',> template标签，更加规范和语义化。可以把列表项放入t
2021-09-18 14:47:49
153
原创 vue 用echarts做中国地图
1.npm 下载一个4.9.0版本的echarts，如果下的版本过高，没有地图的json数据2.在main.js里引入echartsimport Vue from 'vue'import App from './App'import router from './router'import ElementUI from 'element-ui'import echarts from 'echarts'import china from 'echarts/map/json/china.json'
2021-09-17 14:41:30
284
原创 store状态管理入门
vuex里的store状态理解“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。1.安装vuex2.在src下新建一个文件夹store里的index.js3.在main.js里引入storeimport Vue from 'vue'import App from './App'import router from './router'import store from './store'Vue.config.productionTip=false/*
2021-09-10 10:02:59
218
原创 理解position四大定位方式
理解position四大定位方式absolute:位置设置为 absolute 的元素，可定位于相对于第一个已定位（非静态的）的包含它的元素的指定坐标。此元素的位置可通过 “left”、“top”、“right” 以及 “bottom” 属性来规定。relative:位置被设置为 relative 的元素，可将其定位于相对于其正常位置的地方，因此 “left:20” 会将元素移至元素正常位置左边 20 个像素的位置。position：relativeposition:absolute<!
2021-09-09 11:52:43
475
原创 登陆界面设计
先写一个登录界面<template> <div class="outer-container"> <div class="form-container"> <div class="login-title"> 收费后台管理系统 </div> <el-form> <el-form-item label="用户名" prop="username"> <el-i
2021-09-09 11:02:52
122
原创 收费退款管理系统（思路）
收费管理系统步骤：1.新建角色（名称，菜单权限）2.新建用户（姓名，手机号，角色）3.新建学校（名称，城市，地址，联系人，手机号）4.新建年级（年级，选择学校，备注）5.新建项目（绑定学校）6.新建套餐7.购买记录8.退款记录技术：vue，element-ui，html，css，js具体：axios封装方法axiosPost,validate表单验证，promise,vue-router,懒加载，vue生命周期。...
2021-09-09 09:02:32
184
原创 补缺
1.登录拦截session2.上传接口upload`<?phpfunction json(code=0,code=0,code=0,message=’’,$data=[]){res=[′code′=>res=[ 'code'=>res=[′code′=>code,‘message’=>message,′data′=>message, 'data'=>message,′data′=>data];exit(json_
2020-11-28 16:33:33
48
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人