VUE
文章平均质量分 62
北栀໊ღ
这个作者很懒,什么都没留下…
展开
-
TodoList待办列表
js代码:css代码: js代码:原创 2022-06-28 19:40:23 · 484 阅读 · 0 评论 -
Vue实例的生命周期
初始化页面依次调用了:调用了beforeCreate钩子函数调用了created钩子函数调用了beforeMount钩子函数调用了mounted钩子函数点击更新数据后:12345变成了,此时调用了:54321调用了beforeUpdate钩子函数调用了更新的钩子函数打开F12控制台 直接输入主动销毁Vue实例调用:app.$destroy()调用了beforeDestroy钩子函数调用了destroyed钩子函数...原创 2022-06-28 15:50:54 · 183 阅读 · 0 评论 -
vue中组件间通信的6种方式
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互进行直接的引用,所以组件间的相互通信是非常重要的。父组件通过 props 向子组件传递数据,子组件通过 $emit 和父组件通信。(1)父组件向子组件传值(props的用法)props的特点:1.props只能是父组件向子组件进行传值,props使得父子组件之间形成一个单向的下行绑定。子组件的数据会随着父组件的更新而响应式更新。2.props可以显示定义一个或一个以上的数据,对于接收的数据,可以是各种原创 2022-06-28 15:41:19 · 95 阅读 · 0 评论 -
组件化开发
组件是可复用的 Vue 实例,且带有一个名字:在这个例子中是 。我们可以在一个通过 创建的 Vue 根实例中,把这个组件作为自定义元素来使用: 。 1.1 创建组件构造器对象中是组件的DOM元素内容。 1.全局注册,通过 。Vue.component 2.局部注册,通过 。components:{cpnc:cpnc} 组件的注册方式有两种,一种是全局组件一种是局部组件。全局组件,可以在多个vue实例中使用,类似于全局变量。使用方式注册,直接使用调用。是全局组件的名字,是定义的组件对象。局部组原创 2022-06-28 14:22:52 · 182 阅读 · 0 评论 -
v-model的使用
指令,它能轻松实现表单输入和应用状态之间的双向绑定。 radio单选框的属性是互斥的,如果使用v-model,可以不使用就可以互斥。v-model绑定`sex`属性,初始值为“男”,选择女后`sex`属性变成“女”,因为此时是双向绑定。checkbox结合v-model实现单选框,定义变量初始化为,点击checkbox的值为。v-model结合select可以单选也可以多选。...原创 2022-06-28 14:10:17 · 182 阅读 · 0 评论 -
Vue中v-for循环遍历
1. v-for遍历数组<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title原创 2022-05-26 09:28:12 · 995 阅读 · 0 评论 -
Vue中简单版的购物车实例
需要实现的功能:点击"+"按钮,总价增加,点击"-"按钮总价减少,点击移除,移除当列。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> #app{ margin-left:500px; } table { border: 2px solid red; wid原创 2022-05-25 11:27:59 · 71 阅读 · 0 评论 -
Vue事件监听
1.v-on的基本使用<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <h2>{{count}}</h2> <button type="button" @click="a原创 2022-05-25 10:37:07 · 1593 阅读 · 0 评论 -
计算属性与侦听器
1.计算属性的基本使用使用语法拼接<h2>{{firstName+ "-" + lastName}}</h2> 使用方法方法<h2>{{getfullName()}}</h2> 使用计算属性<h2>{{fullName}}</h2><!DOCTYPE html><html> <head> <meta charset="utf-8"> <title><原创 2022-05-24 09:13:49 · 296 阅读 · 0 评论 -
Vue的几种基础指令学习
指令:Vue的指令是以v-开头的,作用于页面中的元素,所以需要将指令绑定与元素中,从而达到给绑定的元素添加行为的目的。 语法:<元素标签 v-指令 = “表达式”>1.v-bindv-bind:需要动态决定标签的属性的时候 可以使用到v-bind语法糖的写法::,吧v-bind替换为:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>.原创 2022-05-19 13:38:47 · 240 阅读 · 0 评论 -
动态绑定属性,v-bind的深入学习
1. v-bind的基本使用原创 2022-05-19 19:39:50 · 799 阅读 · 0 评论