vue
昵称2-20个字符
这个作者很懒,什么都没留下…
展开
-
vue 购物车demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .container { } .container .cart { width: 300px; /*background-color: light原创 2020-06-20 17:37:09 · 138 阅读 · 0 评论 -
vue 兄弟组件间传数据 $on() $emit() $off() $once() 实例方法/事件
vm.$on( event, callback )vue API用法: 监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。vm.$on('test', function (msg) { console.log(msg)})vm.$emit('test', 'hi')// => "hi"vm.$once( event, callback ) vue API用法: 监听一个自定义事件,但是只触发一次。一旦触发之后,监听器就会被原创 2020-06-18 20:29:35 · 1913 阅读 · 0 评论 -
vue prop 向子组件传递数据
通过 Prop 向子组件传递数据Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候,它就变成了那个组件实例的一个 property。//一个 prop 被注册之后,你就可以像这样把数据作为一个自定义 attribute 传递进来:<blog-post title="My journey with Vue"></blog-post><blog-post title="Blogging with Vue"原创 2020-06-18 16:36:51 · 310 阅读 · 0 评论 -
vue 组件注册 组件命名
组件注册在注册一个组件的时候,我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了:Vue.component('my-component-name', { /* ... */ })该组件名就是 Vue.component 的第一个参数。组件名大小写使用 kebab-caseVue.component('my-component-name', { /* ... */ })当使用 kebab-case (短横线分隔命名) 定义一个组件时,你也必须在引用这个自定义元素时使用 kebab原创 2020-06-18 15:35:53 · 1530 阅读 · 0 评论 -
vue图书管理 demo
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .grid { margin: auto; width: 500px; text-align: center; } .grid table {原创 2020-06-17 17:46:17 · 505 阅读 · 0 评论 -
vue数组 变异方法 非变异方法
Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示一个数组的过滤或排序的副本。变异方法Vue 包含一组观察数组的变异方法,它们将会触发视图更新,包含以下方法: 变异方法:改变原数组,使视图更新push() 接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度pop() 从数组末尾移除最后一项,减少数组的length值,然后返回移除的项shift() 移除数组中的第一个项并返回该项,同时数组的长度减1unshift() 在数组前端添加任意个项并返回新数组长度.原创 2020-06-16 23:51:06 · 1074 阅读 · 0 评论 -
vue filter过滤器 时间过滤器
html结构:<body> <div id="app"> // 对date数据进行过过滤 调用时将时间形式传参给过滤器 <div>{{date | format('yyyy-MM-dd hh:mm:ss')}}</div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text原创 2020-06-16 21:16:39 · 961 阅读 · 0 评论 -
vue watch侦听器案例 验证内容
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <div> <span>用户名:</span> <span> /原创 2020-06-16 21:02:28 · 275 阅读 · 0 评论 -
vue 自定义指令
自定义指令vue教程除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。举个聚焦输入框的例子,如下:当页面加载时,该元素将获得焦点 (注意:autofocus 在移动版 Safari 上不工作)。事实上,只要你在打开这个页面后还没点击过任何内容,这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能:翻译 2020-06-16 20:11:07 · 209 阅读 · 0 评论 -
vue模板语法
1. 什么是指令?指令的本质就是自定义属性指令的格式:以v-开始(比如:v-cloak)2.v-cloak指令用法插值表达式存在的问题:“闪动”如何解决该问题:使用v-cloak指令解决该问题的原理:先隐藏,替换好值之后再显示最终的值3.数据绑定指令v-text 填充纯文本相比插值表达式更加简洁v-html 填充HTML片段存在安全问题本网站内部数据可以使用,来自第三方的数据不可用v-pre 填充原始信息显示原始信息,跳过编译过程(分析编译过程)4.数据响应式如原创 2020-06-15 20:39:29 · 276 阅读 · 0 评论 -
vue tap选项卡案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .tab ul { overflow: hidden; padding: 0; margin: 0; } .tab ul l原创 2020-06-15 19:49:41 · 602 阅读 · 0 评论 -
vue v-for遍历对象
v-for遍历对象时参数: 第一个为值,第二个为键名,第三个为索引代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> </head><body> <div id="app"> <!-- v 属性值 key 属性 i 索引值-->原创 2020-06-15 19:25:13 · 1707 阅读 · 0 评论