Vue.js
关注
分享
扫一扫
文章平均质量分 69
Vue.js
仰望天空的小小蜗牛
这个作者很懒，什么都没留下…
展开
-
Vue实现动画效果transition（单、多个元素过渡）
Vue实现动画效果：单个元素过渡transition，多个元素过渡transition-group原创 2022-01-19 18:35:34 · 7613 阅读 · 1 评论 -
vue-router路由简单使用和示例（声明式导航和编程式导航）
vue-router简单使用和示例（声明式导航和编程式导航）原创 2022-01-18 22:27:16 · 668 阅读 · 0 评论 -
vue-router路由深入理解（路由跳转和路由传参）
vue-router路由深入理解：这篇文章主要讲路由跳转和路由传参，声明式导航和编程式导航的跳转和传参的区别原创 2022-01-12 22:45:02 · 1476 阅读 · 1 评论 -
Vue自定义指令directives（函数方式，对象方式）
Vue自定义指令directives（函数方式，对象方式）定义局部指令，定义全局指令，指令执行的时机原创 2022-01-05 21:33:03 · 5493 阅读 · 0 评论 -
Vue内置指令
Vue内置指令v-text指令v-html指令 v-cloak指令v-once指令v-pre指令原创 2021-12-19 18:25:28 · 153 阅读 · 0 评论 -
Vue常用指令总结
Vue指令总结包括v-bind,v-model,v-if,v-show等等原创 2021-12-19 18:04:52 · 123 阅读 · 0 评论 -
Vue使用过滤器Vue.filter，使用dayjs
Vue使用过滤器（局部过滤器和全局过滤器），使用dayjs原创 2021-12-19 17:33:03 · 713 阅读 · 0 评论 -
Vue收集form表单数据，关于v-model和value的关系
Vue收集form表单数据，关于v-model和value的关系原创 2021-12-12 16:47:52 · 1238 阅读 · 0 评论 -
Vue条件渲染v-if和v-show的区别
Vue条件渲染v-if和v-show的区别原创 2021-12-12 12:33:17 · 538 阅读 · 0 评论 -
Vue的计算属性computed
本文实例讲述了vue计算属性computed的使用方法，包括computed的简写和完整写法。原创 2021-12-11 11:57:27 · 313 阅读 · 0 评论 -
Vue使用watch深度监视
watch经常监视多级结构中所有属性的变化或者监视多级结构中某个属性的变化原创 2021-12-01 21:42:46 · 2277 阅读 · 0 评论 -
Vue按键修饰符，鼠标按钮修饰符，系统修饰键
在一些搜索框中，我们需要监听键盘的按下(onkeydown)或抬起(onkeyup)事件以进行一些操作。1.Vue中常用的按键别名：回车 => enter删除 => delete (捕获“删除”和“退格”键)退出 => esc空格 => space换行 => tab (特殊，必须配合keydown去使用)上 => up下 => down左 => left右 => right示例准备方法 showInfo(e){ /原创 2021-11-21 13:03:39 · 873 阅读 · 0 评论 -
Vue事件修饰符的理解
Vue中的事件修饰符：1.prevent：阻止默认事件（常用）；2.stop：阻止事件冒泡（常用）；3.once：事件只触发一次（常用）；4.capture：使用事件的捕获模式；5.self：只有event.target是当前操作的元素时才触发事件；6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；示例说明1.prevent：阻止默认事件阻止默认事件， 比如a标签阻止跳转，此时执行alert语句后没有跳转<a href="http://www.baidu.c原创 2021-11-20 21:51:37 · 6140 阅读 · 0 评论 -
Vue事件基本使用——传参和不传参的使用
Vue事件基本使用总结1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；2.事件的回调需要配置在methods对象中，最终会在vm上；3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；5.@click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参；示例<!DOCTYPE html><ht原创 2021-11-20 14:59:15 · 2104 阅读 · 0 评论 -
Vue配置el有2种写法
Vue配置el有2种写法写法一、new Vue时候配置el属性 new Vue({ el: '#root', data: { name: 'xiaoxiao' } })先创建Vue实例，随后再通过vm.$mount(’#root’)指定el的值你可以控制台打印vconst v = new Vue({ data: { name: 'xiaoxiao' } }) v.$mount('#root')示例代码<!DOCTYPE原创 2021-11-16 20:23:19 · 686 阅读 · 0 评论 -
Vue的data的两种写法
data有2种写法，对象式和函数式初学vue可以先用对象式练习，用到组件时，data必须使用函数式，否则会报错。对象式 new Vue({ el: '#demo', data: { name: 'xiaoming', address: '珠海' } })函数式new Vue({ el: '#root', data() { return { name: 'xiaoming' } }})...原创 2021-11-16 20:10:17 · 653 阅读 · 0 评论 -
Vue.js数据绑定的方法--单向和双向
Vue数据绑定Vue中有2种数据绑定的方式：1.单向绑定(v-bind)：数据只能从data流向页面。2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。注意点：1.双向绑定一般都应用在表单类元素上（如：input、select等）2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。1.单向数据绑定普通写法<input type="text" v-bind:value="name">原创 2021-11-16 19:59:20 · 4438 阅读 · 0 评论 -
Vue模板语法(插值语法，指令语法)
Vue模板语法有2大类：Vue官网链接1.插值语法：功能：用于解析标签体内容。写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。2.指令语法：功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。举例：v-bind:href=“xxx” 或 简写为 :href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性。备注：Vue中有很多的指令，且形式都是：v-???，此处我们只是拿v-bind举个例子。代码<!DO原创 2021-11-14 21:05:03 · 340 阅读 · 0 评论 -
一、Vue初识和简单应用
一、Vue简介1-1.官网英文官网: https://vuejs.org/中文官网: https://cn.vuejs.org/1-2.Vue发展历程1-3. 描述动态构建用户界面的渐进式 JavaScript 框架 ，作者是尤雨溪二、Vue 的特点1. 遵循 MVVM 模式2. 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发3. 它本身只关注 UI, 也可以引入其它第三方库开发项目4. 采用组件化模式，提高代码复用率、且让代码更好维护5. 声明式编码，让编码人员无原创 2021-11-14 20:47:30 · 621 阅读 · 0 评论