一、渲染组件
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">
<p>33333</p>
<login></login>
</div>
<script>
var login = {
template: '<h1>这是登录组件</h1>'
}
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
components: {
login
}
});
</script>
</body>
</html>
- 使用render
这里 return 的结果,会 替换页面中 el 指定的那个 容器
<!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">
<p>444444</p>
</div>
<script>
var login = {
template: '<h1>这是登录组件</h1>'
}
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
render: function (createElements) { // createElements 是一个 方法,调用它,能够把 指定的 组件模板,渲染为 html 结构
return createElements(login)
// 注意:这里 return 的结果,会 替换页面中 el 指定的那个 容器
}
});
</script>
</body>
</html>
注意
- 使用components相当于之前使用的插值表达式,不会清空原有的内容,而render(相当于v-text)会清空原有的内容。
- 一个app只能有一个render,而components可以放多个
2. 在vue中结合render函数渲染指定的组件到容器中
在runtime-only中渲染组件
在我之前有一一篇博客中解释了在什么情况下会出现runtime-only
https://blog.csdn.net/Welkin_qing/article/details/81945353
就是在main.js中直接引入vue,且没有在webpack.config.js中声明
- 这个时候我们需要建一个.vue 的组件(例:login.vue);这个是由三部分组成的
<template>
<div>
<h1>这是登录组件,使用 .vue 文件定义出来的 --- {{msg}}</h1>
</div>
</template>
<script>
</script>
<style>
</style>
- 在main.js中导入.vue组件
import login from './login.vue'
- 安装第三方包
默认,webpack 无法打包 .vue 文件,需要安装 相关的loader:
cnpm i vue-loader vue-template-compiler -D
在配置文件中,新增loader配置项
{ test:/\.vue$/, use: 'vue-loader' }
- 使用render渲染,且在页面中使用
<login></login>
var vm = new Vue({
el: '#app',
data: {
msg: '123'
},
//render: c => c(login) 或者使用下面的方法
render: function (createElements) {
// 在 webpack 中,如果想要通过 vue, 把一个组件放到页面中去展示,vm 实例中的 render 函数可以实现
return createElements(login)
})
总结梳理: webpack 中如何使用 vue :
- 安装vue的包: cnpm i vue -S
- 由于 在 webpack 中,推荐使用 .vue 这个组件模板文件定义组件,所以,需要安装 能解析这种文件的 loader cnpm i vue-loader vue-template-complier -D
- 在 main.js 中,导入 vue 模块 import Vue from ‘vue’
- 定义一个 .vue 结尾的组件,其中,组件有三部分组成: template script style
- 使用 import login from ‘./login.vue’ 导入这个组件
- 创建 vm 的实例 var vm = new Vue({ el: ‘#app’, render: c => c(login) })
- 在页面中创建一个 id 为 app 的 div 元素,作为我们 vm 实例要控制的区域;
二、在.vue中定义自己的方法
- Node 中向外暴露成员的形式:
在Node中 使用 var 名称 = require(‘模块标识符’)导入
使用 module.exports 和 exports 来暴露成员
module.exports = {}
- 在 ES6中,也通过 规范的形式,规定了 ES6 中如何 导入 和 导出 模块
- ES6中导入模块,使用 import 模块名称 from ‘模块标识符’ import ‘表示路径’
- 在 ES6 中,使用 export default 和 export 向外暴露成员:
1. 使用export default
var info = {
name: 'zs',
age: 20
}
export default info
export default {
address: '北京'
}
注意
- export default 向外暴露的成员,可以使用任意的变量(自定义变量)来接收
- 在一个模块中,export default 只允许向外暴露1次
- 在一个模块中,可以同时使用 export default 和 export 向外暴露成员
2. export
export var title = '小星星'
export var content = '哈哈哈'
注意
- 使用 export 向外暴露的成员,只能使用 { } 的形式来接收,这种形式,叫做 【按需导出】
- export 可以向外暴露多个成员, 同时,如果某些成员,我们在 import 的时候,不需要,则可以 不在 {} 中定义
- 使用 export 导出的成员,必须严格按照 导出时候的名称,来使用 {} 按需接收;
- 使用 export 导出的成员,如果 就想 换个 名称来接收,可以使用 as 来起别名;
接收
import m222, { title as title123, content } from './test.js'
console.log(m222)//接收export default
console.log(title123 + ' --- ' + content)