vue render function
vue render function
https://vuejs.org/v2/guide/render-function.html
{
// Same API as `v-bind:class`, accepting either
// a string, object, or array of strings and objects.
class: {
foo: true,
bar: false
},
// Same API as `v-bind:style`, accepting either
// a string, object, or array of objects.
style: {
color: 'red',
fontSize: '14px'
},
// Normal HTML attributes
attrs: {
id: 'foo'
},
// Component props
props: {
myProp: 'bar'
},
// DOM properties
domProps: {
innerHTML: 'baz'
},
// Event handlers are nested under `on`, though
// modifiers such as in `v-on:keyup.enter` are not
// supported. You'll have to manually check the
// keyCode in the handler instead.
on: {
click: this.clickHandler
},
// For components only. Allows you to listen to
// native events, rather than events emitted from
// the component using `vm.$emit`.
nativeOn: {
click: this.nativeClickHandler
},
// Custom directives. Note that the `binding`'s
// `oldValue` cannot be set, as Vue keeps track
// of it for you.
directives: [
{
name: 'my-custom-directive',
value: '2',
expression: '1 + 1',
arg: 'foo',
modifiers: {
bar: true
}
}
],
// Scoped slots in the form of
// { name: props => VNode | Array<VNode> }
scopedSlots: {
default: props => createElement('span', props.text)
},
// The name of the slot, if this component is the
// child of another component
slot: 'name-of-slot',
// Other special top-level properties
key: 'myKey',
ref: 'myRef',
// If you are applying the same ref name to multiple
// elements in the render function. This will make `$refs.myRef` become an
// array
refInFor: true
}
attrs
https://css-tricks.com/what-does-the-h-stand-for-in-vues-render-method/
https://alligator.io/vuejs/introduction-render-functions/
macOS & bash shell
bash !== node
Windows
#!/usr/bin/env node
echo "^-v-^ app is running in development env!" && npm run start
MacOS
#!/usr/bin/env bash
echo "^-v-^ app is running in development env!" && npm run start
# chmod +x
$ chmod +x ./app.sh & sudo npm link & "app": "app.sh"
# npm link
$ npm link
vue render function的更多相关文章
- vue render function & dataset
vue render function & dataset https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In ...
- template or render function not defined vue 突然报错了,怎么解决
报错图例如下:template or render function not defined vue 突然报错了,怎么解决什么错误呢,就是加载不出来,网上看了一通,是vue版本不对,是vue-comp ...
- [Vue warn]: Error in render: "TypeError: Cannot read property '0' of undefined、vuejs路由使用的问题Error in render function
1.[Vue warn]: Error in render: "TypeError: Cannot read property '0' of undefined 注意,只要出现Error i ...
- "[Vue warn]: Failed to mount component: template or render function not defined"错误的解决
VUE中动态路由出错: vue.esm.js?a026: [Vue warn]: Failed to mount component: template or render function not ...
- vue h render function & render select with options bug
vue h render function & render select with options bug https://github.com/xgqfrms/vue/issues/41 ...
- [Vue @Component] Control Template Contents with Vue's Render Function
Declaring templates and elements inside of templates works great for most scenarios. Sometimes you n ...
- [Vue warn]: You may have an infinite update loop in a component render function
[Vue warn]: You may have an infinite update loop in a component render function 这个问题很奇怪,之前从来没有遇到过.如果 ...
- vue render里面的nativeOn
vue render里面的nativeOn的解释官方的解释是:// 仅对于组件,用于监听原生事件,而不是组件内部使用 `vm.$emit` 触发的事件. 官方的解释比较抽象 个人理解: 父组件要在子组 ...
- vue render函数 函数组件化
之前创建的锚点标题组件是比较简单,没有管理或者监听任何传递给他的状态,也没有生命周期方法,它只是一个接受参数的函数 在这个例子中,我们标记组件为functional,这意味它是无状态(没有data), ...
随机推荐
- php安装redis拓展
1. 查看是否安装redis库 查看是否安装redis库了.可以通过下面2种方式查看. phpinfo()是否能输出redis的加载信息 在命令行执行`php -m` 输出gd 2. 安装redis库 ...
- Why mobile web apps are slow
http://sealedabstract.com/rants/why-mobile-web-apps-are-slow/ I’ve had an unusual number of interest ...
- 20155207JAVA第十二周课堂练习
20155207JAVA第十二周课堂练习 教材代码检查--P98 修改教材P98 Score2.java, 让执行结果数组填充是自己的学号 Arrays和String单元测试 在IDEA中以TDD的方 ...
- 2017-2018-1 20155320 《信息安全系统设计基础》第四周学习总结(课堂实践补交+myhead与mytail加分项目)
2017-2018-1 20155320 <信息安全系统设计基础>第四周学习总结(课堂实践补交+myhead与mytail实现) 课堂实践内容 1 参考教材第十章内容 2 用Linux I ...
- 20145226 《Java程序设计》第4周学习总结
教材学习内容总结 学习目标 理解封装.继承.多态的关系 理解抽象类与接口的区别 掌握S.O.L.I.D原则 了解模式和设计模式 能正确覆盖方法 了解垃圾回收机制 掌握Object类 掌握enum 教材 ...
- MySQL入门篇(一)之MySQL部署
MySQL 二进制免编译安装 (1)下载二进制免编译版本mysql 5.6.35 [root@localhost tools]# wget http://mirrors.sohu.com/mysql/ ...
- Android开源的精美日历控件,热插拔设计的万能自定义UI
Android开源的精美日历控件,热插拔设计的万能自定义UI UI框架应该逻辑与界面实现分离,该日历控件使用了热插拔的设计 ,简单几步即可实现你需要的UI效果,热插拔的思想是你提供你的实现,我提供我的 ...
- 视觉SLAM中的深度估计问题
一.研究背景 视觉SLAM需要获取世界坐标系中点的深度. 世界坐标系到像素坐标系的转换为(深度即Z): 深度的获取一共分两种方式: a)主动式 RGB-D相机按照原理又分为结构光测距.ToF相机 To ...
- PHP反序列化漏洞代码审计—学习资料
1.什么是序列化 A.PHP网站的定义: 所有php里面的值都可以使用函数serialize()来返回一个包含字节流的字符串来表示.unserialize()函数能够重新把字符串变回php原来的值. ...
- python数据可视化——matplotlib 用户手册入门:使用指南
参考matplotlib官方指南: https://matplotlib.org/tutorials/introductory/usage.html#sphx-glr-tutorials-introd ...