1. 在页面中渲染最基本的组件
通过字面量的形式定义模板对象,在vm对象中注册模板组件,最后在页面中引用
<!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="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<login></login>
</div>
<script>
/*
通过字面量的形式创建模板对象
*/
var login = {
template:"<h1>login</h1>"
};
new Vue({
el:'#app', // 表示,当前我们new的这个Vue实例,要控制页面上的哪个区域
data:{ // data属性中,存放的是el中要用到的数据
},
// 注册login组件
components:{
login
}
});
</script>
</body>
</html>
2. 使用render渲染组件
render是一个函数,与methods平级,其参数为createElements,也是一个函数
用法:
render:function(createElements){
// createElements是一个方法,调用它,能把指定的组件模板渲染为HTML结构
var html = createElements(login);
return html; // 返回的结果会替换页面中el指定的那个容器
}
注意:
1. createElements的参数为一个组件对象
2. 经过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="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<!-- <login></login> -->
</div>
<script>
/*
通过字面量的形式创建模板对象
*/
var login = {
template:"<h1>login</h1>"
};
new Vue({
el:'#app',
data:{},
methods:{},
render:function(createElements){
var html = createElements(login);
return html;
}
});
</script>
</body>
</html>
3. render渲染组件与标签引入组件的区别
3.1 标签形式,相当于一个差值表达式,组件只会替换当前标签内容,但是render渲染的组件不会,它会清空容器的内容,在加入组件,相当于v-text。
3.2 一个render函数只能渲染一个组件,但是components组件可以放多个
例如:
1. components组件
<!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="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
3333333
<login></login>
</div>
<script>
/*
通过字面量的形式创建模板对象
*/
var login = {
template:"<h1>login</h1>"
};
new Vue({
el:'#app', // 表示,当前我们new的这个Vue实例,要控制页面上的哪个区域
data:{ // data属性中,存放的是el中要用到的数据
},
// 注册login组件
components:{
login
}
});
</script>
</body>
</html>
打开页面,运行效果如下:
2. 使用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="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
44444
<!-- <login></login> -->
</div>
<script>
/*
通过字面量的形式创建模板对象
*/
var login = {
template:"<h1>login</h1>"
};
new Vue({
el:'#app', // 表示,当前我们new的这个Vue实例,要控制页面上的哪个区域
data:{},
methods:{},
render:function(createElements){ // createElements是一个方法,调用它,能把指定的组件模板渲染为HTML结构
var html = createElements(login);
return html; // 返回的结果会替换页面中el指定的那个容器
}
});
</script>
</body>
</html>
页面效果:
页面没有显示444