前言
思维的混乱是自学的第一障碍,即便是看着官网资料,google一下也是必不可少的,知识点太碎,不整理根本记不住.配合官网教程服用风味更佳!
一个使用render函数会更合适的案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!-- Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。
然而在一些场景中，你真的需要 JavaScript 的完全编程的能力，
这时你可以用 render 函数，它比 template 更接近编译器。
下面是不适合template的一个示例 -->
<h1>Hello world!</h1>
<div id="app">
<!-- 生成锚点标题 (anchored headings)组件 -->
<anchored-heading :level="1">Hello world!</anchored-heading>
</div>
<!-- 放在type=”text/x-template”中的内容将不会被浏览器解析，
不被执行，不被显示，它只是默默地举根隐身草站在那里。 -->
<!-- <script type="text/x-template" id="anchored-heading-template">
<h1 v-if="level === 1">
<slot></slot>
</h1>
<h2 v-else-if="level === 2">
<slot></slot>
</h2>
<h3 v-else-if="level === 3">
<slot></slot>
</h3>
<h4 v-else-if="level === 4">
<slot></slot>
</h4>
<h5 v-else-if="level === 5">
<slot></slot>
</h5>
<h6 v-else-if="level === 6">
<slot></slot>
</h6>
</script>
<script>
Vue.component('anchored-heading', {
template: '#anchored-heading-template',
props: {
//props的一些校验
level: {
type: Number,
required: true
}
}
})
let vm = new Vue({
el: '#app'
})
</script> -->
<!-- 使用模板字符串,替代上面的写法,上面的写法,我不熟悉 -->
<!-- <script>
let vm = new Vue({
el: '#app',
data: {
},
components: {
'anchored-heading': {
props: {
level: {
type: Number,
required: true
}
},
template: `
<h1 v-if="level === 1">
<slot></slot>
</h1>
<h2 v-else-if="level === 2">
<slot></slot>
</h2>
<h3 v-else-if="level === 3">
<slot></slot>
</h3>
<h4 v-else-if="level === 4">
<slot></slot>
</h4>
<h5 v-else-if="level === 5">
<slot></slot>
</h5>
<h6 v-else-if="level === 6">
<slot></slot>
</h6>
`
}
}
})
</script> -->
<script>
//render函数的方式创建组件
Vue.component('anchored-heading', {
render: function (createElement) {
return createElement(
'h' + this.level, // 标签名称(例:h1) this.level是props中的level
this.$slots.default // 子元素数组 (虚拟节点,参照API的vm.$slots的实例可以看出)
)
},
props: {
level: {
type: Number,
required: true
}
},
mounted() {
console.log(this.$slots.default);
console.log(this);
}
})
let vm = new Vue({
el: '#app',
data: {
},
})
</script>
</body>
</html>
复制代码render函数有3个参数:
第一个参数(必须) - {String | Object | Function}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script>
new Vue({
el: '#app',
// 第一种:String
// render: h => h('div','一个HTML标签字符')
//第二种:组件选项Object(参数对象可以在函数外部定义好再添加,会简洁一些)
// render: h => h({
// template: `<div>{{msg}}</div>`,
// data() {
// return {
// msg: '组件选项对象'
// }
// }
// })
// 第三种: Function
render: h => {
// let func = h => {template: `<div>一个返回HTML标签字符或组件选项对象的函数</div>`};
//第一种箭头函数简写不生效,是{}被错误识别的问题,let func = h => 'div'就没有问题
let func = h => {
return {template: `<div>一个返回HTML标签字符或组件选项对象的函数</div>`};
}
// let func = function() {
// return {template: `<div>一个返回HTML标签字符或组件选项对象的函数</div>`};
// };
return h(func());
}
})
</script>
</body>
</html>
复制代码第二个参数(可选) - {Object}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>render</title>
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
</head>
<body>
<div id="app">
<elem></elem>
</div>
<script>
Vue.component('elem', {
render: function(h) {
var self = this;
return h('div', {//一个包含模板相关属性的数据对象
'class': {
foo: false,
bar: true
},
style: {
color: 'red',
fontSize: '14px'
},
attrs: {
class: 'change',//当没有class配置项时,此处的class属性就会生效
qwe: 'qwe',//可以添加自定义属性
id: 'foo'
},
domProps: {
innerHTML: 'baz'
}
});
}
});
new Vue({
el: '#app'
});
</script>
</body>
</html>
复制代码第三个参数(可选) - {String | Array}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>render</title>
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
</head>
<body>
<div id="app">
<elem></elem>
</div>
<script>
Vue.component('elem', {
render: function(createElement) {
// return createElement('div', '文本');//使用字符串生成文本节点
return createElement('div', [//由createElement函数构建而成的数组
'文本节点',//节点包括文本节点,注释节点,与元素节点,文本节点可以直接在此处去写
createElement('h1', '主标'),//createElement函数返回VNode对象,元素节点
createElement('h2', '副标')
]);
}
});
new Vue({
el: '#app'
});
</script>
</body>
</html>
复制代码三个参数都有的一个示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- <my-component class="qwe" :someProp="我是父组件传来的值"></my-component> -->
<!-- 此处的my-component对虚拟节点而言没有起到任何作用 -->
</div>
<script>
// Vue.component('MyComponent', {
// template: `<div>{{someProp}}</div>`
// }) //这种挂载组件的方式,子虚拟节点是拿不到的
const MyComponent = {
template: `<div>{{myProp}}</div>`,
props: ['myProp']
}
let vm = new Vue({
el: '#app',
data: {
},
render: function (createElement) {
return createElement(
'div',
{
// 'class': 'qwe',
attrs: {
class: 'qwe',
}
},
[
'先写一些文字',// 文本节点
createElement('h1','一则头条'),//元素节点
createElement(
MyComponent,
{
// props: ['myProp']
// props: ['myProp'] //即便是写了my-component组件标签,有了自定义属性,一样拿不到这个值
// //我猜想是是该组件是虚拟节点的子虚拟节点导致的,已经套了好几层了
})
]
)
},
mounted() {
console.log(this);
},
})
</script>
</body>
</html>
复制代码两种组件写法对比(点击事件案例)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>render</title>
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
</head>
<body>
<div id="app">
<my-element></my-element>
</div>
<script>
//模板化的组件创建方式
Vue.component('MyElement',{
template: `
<button :class="classData" :id="idData" :style="styleData" @click="handelClick">按钮</button>
`,
data() {
return {
msg: '模板化测试数据',
styleData: {
fontSize: '16px',
color: 'red'
},
classData: {
btn1: true,
btn2: false
},
idData: 'only'
}
},
methods: {
handelClick() {
console.log(this.msg);
}
}
})
//render函数化的组件创建方式
// Vue.component('MyElement',{
// render: function (createdElement) {
// return createdElement('button',{
// 'class': {
// btn1: true,
// btn2: false
// },
// style: {
// fontSize: '16px',
// color: 'red'
// },
// attr: {
// id: 'only'
// },
// on: {
// click: this.handelClick
// }
// //不能直接在on中定义事件函数,此处的this指向window,拿不到data中的数据
// // on: {
// // click: function() {
// // console.log(this);
// // }
// // }
// },'按钮')
// },
// //箭头函数的简写一定要注意,此处会报错,我猜还是this指向的问题,如下图:
// // render: h => h('button',{
// // on: {
// // click: this.handelClick
// // }
// // },'按钮'),
// data() {
// return {
// msg: '测试数据'
// }
// },
// methods: {
// handelClick() {
// console.log(this.msg);
// }
// }
// })
new Vue({
el: '#app'
})
</script>
</body>
</html>
复制代码this.$slots用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>render</title>
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
</head>
<body>
<div id="app">
<my-component>
<h1 slot="header">我是头部,放在对应的具名插槽中</h1>
<p>我会被放在匿名插槽中</p>
<p>我会会被放在匿名插槽中</p>
<p slot="footer">我是尾部</p>
</my-component>
</div>
<script>
Vue.component('MyComponent',{
// 用h去替换createElement,目前在使用上未发现问题
render: function(h) {
let header = this.$slots.header;
let main = this.$slots.default;
let footer = this.$slots.footer;
return h('div',[//返回由VNode(虚拟节点)组成的数组
h('header',header),
h('main',main),
h('footer',footer)
])
}
})
new Vue({
el: '#app'
});
</script>
</body>
</html>
复制代码VNodes 必须唯一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>render</title>
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
</head>
<body>
<!-- VNode必须唯一 -->
<div id="app">
<my-component></my-component>
</div>
<script>
// let child = {
// render: function(h) {
// return h('p','我希望自己能多次出现')
// }
// }
// Vue.component('MyComponent',{
// render: function(h) {
// let childNode = h(child);
// return h('div',[
// childNode,childNode,childNode//VNodes必须唯一,这样写是无效的,不会生成3个的
// ])
// }
// })
Vue.component('MyComponent', {
render: function(h) {
return h('div',[
// apply() 的第一个参数是对象，第二个参数是数组，作为参数列表。
// 然后其实第二个参数只要是个类数组对象就可以了，比如 {length: 5}
// 就可以看作一个类数组对象，长度是 5，每个元素由于没赋值，所以都是undefined，比如 v[0] 是 undefined。
// 所以，Array.apply(null, { length: 5}) 相当于
// Array(undefined, undefined, undefined, undefined, undefined)
// 参考链接:https://segmentfault.com/q/1010000006793990
Array.apply(null, {
length: 10
// map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
// 参考链接:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map
}).map(function () {
return h('p','我希望自己能多次出现')
})
])
}
})
new Vue({
el: '#app'
})
</script>
</body>
</html>
复制代码使用props传递数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-component class="qwe" :show="show"></my-component>
<my-component class="qwe" :show="!show"></my-component>
</div>
<script>
Vue.component('MyComponent',{
render: function (createElement) {
if(this.show) {
return createElement('p','true');
} else {
return createElement('p','false');
}
},
props: {
show: {
type: Boolean,
default: false
}
}
})
let vm = new Vue({
el: '#app',
data: {
show: true
}
})
</script>
</body>
</html>
复制代码v-model指令(数据双向绑定)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>render</title>
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
</head>
<body>
<div id="app">
<el-input :name="myName" @input="handelChange"></el-input>
<div>{{'我的名字是'+ myName}}</div>
</div>
<script>
Vue.component('ElInput',{
render: function(h) {
let self = this;
return h('input',{
domProps: {
// DOM属性,还有例如:innerHTML
value: self.name
},
on: {
input: function (event) {
// console.log(event,this);
// console.log(self);//这个指向也是很难受,不懂啊
//此处的this如前所述,指向了window,这应该也是self去保存外层this的原因
self.$emit('input',event.target.value)
}
}
})
},
props: {
name: String
}
})
let vm = new Vue({
el: '#app',
data: {
myName: 'hc'
},
methods: {
handelChange(value) {
this.myName = value;
}
}
})
</script>
</body>
</html>
复制代码
2923
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
