vue
zjnkkl
这个作者很懒,什么都没留下…
展开
-
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 · 245 阅读 · 0 评论 -
todo项目实现及总结
> 数组的方法filter,push,pop,slice,map,unshift,shift > push() :从**后面添加**元素,返回值为添加完后的数组的长度> unshift():从**前面添加**元素, 返回值是添加完后的数组的长度> shift() 从**前面删除**元素,只能删除一个 返回值是删除的元素> pop() 从**后面删除**元素,只能是一个,返回值是删除的元素> splice(i,n) **删除从i(索引值)开始之后的那个元素**。返回值是删除的元素slice(st原创 2021-10-14 15:00:51 · 581 阅读 · 0 评论 -
vue组件基础
自定义组件因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。组件还可以复用一个组件的 data 选项必须是一个函数因此每个实例可以维护一份被返回对象的独立的拷贝:如果 Vue 没有这条规则,点击一个按钮就可能会像如下代码一样影响到其它所有实例:<template><div id="components-demo">原创 2021-09-30 14:07:49 · 45 阅读 · 0 评论 -
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 · 335 阅读 · 0 评论 -
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 · 59 阅读 · 0 评论 -
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 · 64 阅读 · 0 评论 -
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 · 47 阅读 · 0 评论 -
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 · 215 阅读 · 0 评论 -
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 · 166 阅读 · 1 评论 -
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 · 163 阅读 · 0 评论 -
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 · 111 阅读 · 0 评论 -
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 · 418 阅读 · 0 评论 -
api理解
理解apiAPI = 应用程序编程接口(Application programming interface)api是与外部应用程序的接口,通过调用外部公开的api,可以让我们不用开发,直接使用外部应用的功能。api可以将你的请求返回给应用程序数据库和设备,然后api会给你返回你需要的数据,并建立连接。API接口就是完成和其他组件的交互的地方。...原创 2021-09-22 11:58:51 · 102 阅读 · 0 评论 -
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 · 1889 阅读 · 0 评论 -
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 · 85 阅读 · 0 评论 -
vue生命周期
vue的生命周期是什么过程:组件创建->数据初始化->挂载->更新->销毁方法: beforeCreate//(创建前),在数据初始化之前 created//(创建后)初始化事件,$el属性还没有显示出来,在模板渲染成html前调用 beforeMount//(挂载前)render函数首次被调用,编译模板,把data里面的数据和模板生成html。此时还没有挂载html到页面上。 mounted//(挂载后)在模板渲染成html后调用,通常是初始化页转载 2021-09-22 10:13:49 · 51 阅读 · 0 评论 -
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 · 158 阅读 · 0 评论 -
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 · 222 阅读 · 0 评论 -
登陆界面设计
先写一个登录界面<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 · 127 阅读 · 0 评论 -
收费退款管理系统(思路)
收费管理系统步骤: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 · 187 阅读 · 0 评论