关于render函数的总结
一般情况下封装一个导航组件的写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app" v-cloak>
<button @click='exchange_nevigation'>点击切换</button>
<v-anchor :title="title" :level='level'>{{title}}</v-anchor>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/x-template" id='template1'>
<div>
<h1 v-if="level===1" :title='title'>
<a :href="'#'+title">
<slot></slot>
</a>
</h1>
<h2 v-if='level===2'>
<a :href="'#'+title">
<slot></slot>
</a>
</h2>
<h3 v-if='level===3'>
<a :href="'#'+title">
<slot></slot>
</a>
</h3>
<h4 v-if='level===4'>
<a :href="'#'+title">
<slot></slot>
</a>
</h4>
</div>
</script>
<script>
Vue.component('v-anchor',{
template:"#template1",
props: {
level:{
type:Number,
required:true
},
title:{
type:String,
default:""
}
}
})
new Vue({
el:"#app",
data:{
title:'一级导航',
msg:"一级导航",
level:1
},
methods:{
exchange_nevigation:function(){
var arr=['一','二','三','四'];
if(this.level===4){this.level=1;
this.title=arr[0]+'级导航'}else{
this.title=arr[this.level]+'级导航';
this.level+=1
}
}
}
})
</script>
</body>
</html>
使用render函数的写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app" v-cloak>
<button @click='exchange_nevigation'>点击切换</button>
<v-anchor :title="title" :level='level'>{{title}}</v-anchor>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script> <script>
Vue.component('v-anchor',{
render: function (createElement) {
return createElement(
'h'+this.level,
[
createElement(
'a',{
domProps:{
href:'#'+this.title
}
},
this.$slots.default
)
]
)
},
props: {
level:{
type:Number,
required:true
},
title:{
type:String,
default:""
}
}
})
new Vue({
el:"#app",
data:{
title:'一级导航',
msg:"一级导航",
level:1
},
methods:{
exchange_nevigation:function(){
var arr=['一','二','三','四'];
if(this.level===4){this.level=1;
this.title=arr[0]+'级导航'}else{
this.title=arr[this.level]+'级导航';
this.level+=1
}
}
}
})
</script>
</body>
</html>
同上，实现了同样的效果
关于render函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app" v-cloak>
<v-anchor></v-anchor>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script> <script>
Vue.component('v-anchor',{
render: function (createElement) {
return createElement(
//第一个参数是标签，必须填写，形式{String|Object|Function}
'div',
//第二个参数是对应属性的数据对象可以选填
{style:{
height:"100px",
width:"100px",
border:"1px solid black",
background:'yellow'
}},
//子节点,可选填
[createElement('h1',{
domProps:{
innerHTML:'测试'
},
style:{
color:'red'
}
})]
)
}
})
new Vue({
el:"#app",
data:{
}
})
</script>
</body>
</html>
1.render函数的内容必须return出来
2.它包括三个参数
2-1.第一个参数是标签，可以是函数或者字符串或者对象的形式产生
2-2.第二个参数是该标签的数据对象，也可以使用template
3.第三个参数使它的子节点，可以选填，写法和父节点一样
关于render的第二个参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.a1{
color:red
}
</style>
<body>
<div id="app" v-cloak>
<v-anchor></v-anchor>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script> <script>
Vue.component('v-anchor',{
render: function (createElement) {
return createElement(
//第一个参数是标签，必须填写，形式{String|Object|Function}
'h1',
//第二个参数是对应属性的数据对象可以选填
{
//和v-bind:class一样
'class':{
a1:true
},
//和v-bind:style一样
style:{
fontSize:'100px',
textShadow:'2px 2px 2px black',
textAlign:'center'
},
//正常的HTML特性
attrs:{
id:"my_h1",
title:"我是render生成"
},
//自定义事件监听
on:{
click:this.popup
},
//自定义指令
directives:[ ]
//作用域slot },
//子节点,可选填
[createElement('p',{
//DOM属性
domProps:{
innerHTML:'测试'
},
style:{
color:'red'
}
})]
)
},
methods:{
popup:function(){
alert('测试')
}
}
});
new Vue({
el:"#app",
data:{
}
})
</script>
</body>
</html>
关于render函数的总结的更多相关文章
- QTableView另类打印解决方案（复用render函数去解决print问题）
Qt QTableView另类打印解决方案 上回书说道Qt的model/view,我就做了个demo用于显示数据库中的内容.没想到tableview的打印竟然成了问题.我困惑了,难道Qt不应该 ...
- Vue2.x中的Render函数
Render函数是Vue2.x版本新增的一个函数:使用虚拟dom来渲染节点提升性能,因为它是基于JavaScript计算.通过使用createElement(h)来创建dom节点.createElem ...
- Vue.js之render函数基础
刚才翻了一下博客,才发现,距离自己写的第一篇Vue的博客vue.js之绑定class和style(2016-10-30)已经过去一年零两天.这一年里,自己从船厂的普通技术员,成为了一个微型不靠谱创业公 ...
- 大白话Vue源码系列(03)：生成render函数
阅读目录 优化 AST 生成 render 函数 小结 本来以为 Vue 的编译器模块比较好欺负,结果发现并没有那么简单.每一种语法指令都要考虑到,处理起来相当复杂.上篇已经生成了 AST,本篇依然对 ...
- 大白话Vue源码系列(04)：生成render函数
阅读目录 优化 AST 生成 render 函数 小结 本来以为 Vue 的编译器模块比较好欺负,结果发现并没有那么简单.每一种语法指令都要考虑到,处理起来相当复杂.上篇已经生成了 AST,本篇依然对 ...
- vue2.0之render函数
虽然vue推荐用template来创建你的html,但是在某些时候你也会用到render函数. 虚拟DOM Vue 通过建立一个虚拟 DOM 对真实 DOM 发生的变化保持追踪.请近距离看一下这行代码 ...
- Vue中的render函数随笔
使用vue-cli创建项目后,再main.js里面有这样一段代码: new Vue({ render:h => h(App) }).$mount('#app') render函数是渲染一个视图, ...
- render函数
vue2.0之render函数 虽然vue推荐用template来创建你的html,但是在某些时候你也会用到render函数. 虚拟DOM Vue 通过建立一个虚拟 DOM 对真实 DOM 发生的 ...
- Vuejs2.0学习（Render函数,createElement，vm.$slots）
直接来到进阶部分, Render函数 直接来到Render,本来也想跳过,发现后面的路由貌似跟它还有点关联.先来看看Render 1.1 官网一开始就看的挺懵的,不知道讲的是啥,动手试了一下,一开头讲 ...
- 【转】【Html】Vuejs2.0学习之二（Render函数,createElement，vm.$slots，函数化组件，模板编译，JSX）
1.Render函数 所以直接来到Render,本来也想跳过,发现后面的路由貌似跟它还有点关联.先来看看Render 1.1 官网一开始就看的挺懵的,不知道讲的是啥,动手试了一下,一开头讲的是Rend ...
随机推荐
- php 获取周几
date("l"); //date就可以获取英文的星期比如Sunday date("w"); //这个可以获取数字星期比如123,注意0是星期日 获取中文星期几 ...
- android Handler post sendMessage
Handler 为Android操作系统中的线程通信工具,包为android.os.Handler. 与Handler绑定的有两个队列,一个为消息队列,另一个为线程队列.Handler可以通过这两个队 ...
- Spring 学习笔记之整合Hibernate
Spring和Hibernate处于不同的层次,Spring关心的是业务逻辑之间的组合关系,Spring提供了对他们的强大的管理能力, 而Hibernate完成了OR的映射,使开发人员不用再去关心SQ ...
- Jenkins Pulgin 安装
1. 利用管理插件找到需要安装的插件. 2. 如果安装失败,查看缺少啥. 3. 手动去下载http://updates.jenkins-ci.org/download/plugins/ 4. 安装此插 ...
- 基本控件文档-UISlider属性---iOS-Apple苹果官方文档翻译
本系列所有开发文档翻译链接地址:iOS7开发-Apple苹果iPhone开发Xcode官方文档翻译PDF下载地址 //转载请注明出处--本文永久链接:http://www.cnblogs.com/C ...
- A Simple Math Problem（矩阵快速幂）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1757 思路:矩阵快速幂模板题,不过因为刚刚入门矩阵快速幂,所以经常把数组f存反,导致本地错误一晚,差点 ...
- TensorFlow 模型保存和导入、加载
在TensorFlow中,保存模型与加载模型所用到的是tf.train.Saver()这个类.我们一般的想法就是,保存模型之后,在另外的文件中重新将模型导入,我可以利用模型中的operation和va ...
- Sketch VS Photoshop
参考:http://mp.weixin.qq.com/s?__biz=MjM5NTQ5MjIyMA==&mid=217309554&idx=4&sn=4d6a5239ca813 ...
- web_一些常用的线上脚本地址记录（个人使用）
1.jquery <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script> 2. ...
- 74cms 注入exp
遇到就瞎写了一个: #!/usr/bin/env python #encoding:utf-8 #by i3ekr import requests,optparse,re parse = optpar ...