vue
张玉景
仪式感就是使某一天与其他日子不同
使某一时刻与其他时刻不同
展开
-
vue之图标字体制作
用svg格式的图片来制作图标字体,来引用一些小的颜色单一的图片,好处是图片缩放不会失真。 工具:www.icomoon.io 操作步骤:将svg图标导入网站,并生成图标字体,然后导出,将里面的fonts文件和style.css文件拿到项目里即可。原创 2017-12-18 15:11:05 · 461 阅读 · 0 评论 -
prop- prop验证
我们可以为组件的prop 指定验证要求,例如你知道的这些类型。如果又一个需求没有被满足,则vue会在浏览器控制台中警告你,这在开发一个会被别人用到的组件时尤其有帮助。为了定制prop的验证方式,你可以为props中的值提供一个带有验证需求的对象,而不是一个字符串数组。例如:vue.component('my-component',{props:{//基础的类型检查(`n...翻译 2019-04-03 14:03:18 · 1128 阅读 · 0 评论 -
prop-之单向数据流
所有的prop都使得其父子prop之间形成了一个单向下行绑定:父级prop的更新会向下流到子组件中,但是反过来则不行。这样防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。额外的,每次父级组件发生更新时,子组件中所有的prop都将会刷新为最新的值。这意味这你不应该在一个子组件内部改变prop。如果你这样做了,vue会在浏览器的控制台发出警告。这里有两种常见...翻译 2019-04-03 09:53:04 · 385 阅读 · 0 评论 -
将原生事件绑定到组件2
v-on的.native修饰符:父:<base-input v-on:focus.native="onFocus"></base-input>子:<label>{{ label }}<inputv-bind="$attrs"v-bind:value="value"v-on:input="$emit('input', ...转载 2019-04-08 13:46:29 · 250 阅读 · 0 评论 -
事件名
不同于组件和prop,事件名不逊在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。如果触发一个camelCase名字的事件:this.$emit("myEvent")则监听这个名字的kebab-case版本是不会有任何效果的:这种写法没有效果~!<my-component v-on:my-event="doSomething"><...翻译 2019-04-08 11:17:08 · 518 阅读 · 0 评论 -
#使用事件抛出一个值
有时候用一个事件来抛出一个特定的值是非常有用的。例如我们可能想让<blog-post>组件决定它的文本要放大多少。有的时候用一个事件来抛出一个特定的值是非常有用的。例如我们可能想让<blog-post>组件决定它的文本要放大多少。这时可以使用$emit的第二个参数来提供这个值:<button v-on:click="$emit('enlarge-...转载 2019-04-02 09:30:32 · 313 阅读 · 0 评论 -
单个根元素
所以是时候重构一下这个<blog-post>组件了,让它变成接受一个单独的postprop:<blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post"></blog-post>Vue.component('blog-post', { pro...原创 2019-04-01 16:31:38 · 397 阅读 · 0 评论 -
通过 Prop 向子组件传递数据
prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个prop特性的时候,他就变成了那个组件实例的一个属性。为了给博文组件传递一个标题,我们可以用一个 props 选项将其包含在该组件可接受的prop列表中:注册:Vue.component('blog-post', { props: ['title'], template: '<h3>{{ title ...转载 2019-04-01 15:12:31 · 319 阅读 · 0 评论 -
表单输入绑定2
值绑定对于单选按钮,复选框和选择框的选项,v-model绑定的值通常是静态字符串(对于复选框也可以是布尔值):<!-- 当选中时,`picked` 为字符串 "a" --> <input type="radio" v-model="picked" value="a"> <!-- `toggle` 为 true 或 false --> <input ...翻译 2019-04-01 11:20:28 · 110 阅读 · 0 评论 -
表单输入绑定
基础用法v-model指令v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。v-model会忽略所有表单元素的value、checked、selected特性的初始...翻译 2019-03-29 15:31:23 · 129 阅读 · 0 评论 -
为什么在html中监听事件?
vue.js事件处理方法和表达式都严格绑定在当前视图的ViewModel 上。他不会导致任何维护上的困难。使用v-on 有几个好处:扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。因为你无须在 JavaScript 里手动绑定事件ViewModel 代码可以是非常纯粹的逻辑,和 DOM 完全解耦,更易于测试。当一个 ViewModel 被销毁时...翻译 2019-03-29 15:18:58 · 320 阅读 · 0 评论 -
自定义事件
事件名不同于组件和prop,事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。如果触发一个驼峰式(camelCase)的名字的事件:this.$emit('myEvent')则监听这个名字的kebab-case 版本是不会有任何效果的:<!-- 没有效果 --><my-component v-on:my-event=...转载 2019-04-03 14:18:16 · 249 阅读 · 0 评论