关于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 ...
随机推荐
- C#学习之泛型继承和静态成员
想要理解这里有必要先将泛型类学习充分.这里讲解的是泛型类继承类的类型和静态成员. 在前面C#学习之泛型中,创建的LinkList<T>类实现了IEnumerable<T>接口. ...
- 002.比较vector对象是否相等
1.使用vector模板 //编写一段程序,比较vector对象是否相等 //注:该例类似于一个[彩票游戏] #include <iostream> #include <ctime& ...
- LightOJ 1161 - Extreme GCD 容斥
题意:给你n个数[4,10000],问在其中任意选四个其GCD值为1的情况有几种. 思路:GCD为1的情况很简单 即各个数没有相同的质因数,所以求所有出现过的质因数次数再容斥一下-- 很可惜是错的,因 ...
- 2015/8/30 Python基础(4):序列操作符
序列是指成员有序排列,可以通过下标偏移量访问的类型.Python序列包括:字符串.列表和元组.序列的每个元素可以指定一个偏移量得到,多个元素是通过切片操作得到的.下标偏移量从0开始计数到总数-1结束. ...
- 【bzoj2038-小z的袜子】莫队算法
莫队例题. 莫队学习:https://www.cnblogs.com/Paul-Guderian/p/6933799.html 本题 分子是sigma(c(sum[a[i]],2)),分母是sigma ...
- JqGrid自定义(图片)列
$("#gridTable").jqGrid({ //...其它属性 colModel: [ //...其它列 { name: , align: "center" ...
- linux c 执行新程序
学习进程时,linu c上说新开的进程一般要执行另外一个程序,同时与父进程执行同一个程序没有意义 如下是如何执行一个新的程序 使用exec函数簇 exec函数簇包含如下函数
- c语言中的size_t
size_t unsigned int 类型,无符号,它的取值没有负数.用来表示 参数/数组元素个数,sizeof 返回值,或 str相关函数返回的 size 或 长度.sizeof 操作符的结果类型 ...
- java===java基础学习（8）---静态域与静态方法
静态域:如果将域定义为static,每个类中只有一个这样的域.而每一个对象对于所有的实例域却都有自己的一份拷贝.例如,加入需要给每一个雇员赋予唯一的标识码.这里给的Employee类添加一个实例域id ...
- 64_j2
jetty-websocket-server-9.4.3-3.v20170317.fc26.n..> 14-Apr-2017 12:03 62034 jetty-websocket-servle ...