render方法渲染组件和在webpack中导入vue

使用component注册的组件div容器里可以放多个,但是使用render的只能放一个

<div id="app">
<p>我可以放两个</p>
<login></login>
</div>
<script>
var login = {
template:'<h1>login的</h1>'
}
var vm = new Vue({
el:'#app',
data:{},
methods:{},
components:{
login
}
});
</script>

在页面中渲染基本的组件

<div id="app">
<p>我显示不出来的,只能显示login中的内容</p>
<p>我也显示不出来</p>
</div>
<script> var login = {
template:'<h1>login的</h1>'
}
var vm = new Vue({
el:'#app',
data:{},
methods:{},
render:function(createElements){
return createElements(login)
}
});
</script>

render渲染函数

在普通网页中使用vue:

1. 使用 script 标签 ,引入 vue 的包
2. 在 index 页面中,创建 一个 id 为 app div 容器
3. 通过 new Vue 得到一个 vm 的实例

webpack 中使用 vue :

1. 安装vue的包: cnpm i vue -S
2. 由于 在 webpack 中,推荐使用 .vue 这个组件模板文件定义组件,所以需要安装能解析这种文件的 loader cnpm i vue-loader vue-template-complier -D
3. 在 main.js 中,导入 vue 模块 import Vue from 'vue'
4. 定义一个 .vue 结尾的组件,其中,组件有三部分组成: template script style
5. 使用 import login from './login.vue'导入这个组件
6. 创建 vm 的实例 var vm = new Vue({ el: '#app', render: c => c(login) })
7. 在页面中创建一个 id 为 app 的 div 元素,作为我们 vm 实例要控制的区域;

render方法渲染组件和在webpack中导入vue

可以写node_modules下vue文件的路径,也可以使用import Vue from 'vue' ,使用第import Vue from 'vue'方法需要在配置文件webpack.config.js里加一个reslove结点,和plugins和module平级,但每次修改都需要重启。如果没有配置的话会报如下的错误!

render方法渲染组件和在webpack中导入vue

render方法渲染组件和在webpack中导入vue

render方法渲染组件和在webpack中导入vue

在vue中结合render函数渲染指定的组建到容器中

方法一:小例子,可以像平时一样直接在main.js里面写vue的代码,但这种方法只能在导入最全的vue.js路径下使用。不灵活import Vue from '../node_modules/vue/dist/vue.js'

render方法渲染组件和在webpack中导入vue     render方法渲染组件和在webpack中导入vue

方法二:新建XXX.vue文件,此文件中由<template></template>,<script></script>,<style></style>三部分组成。在main.js里面引用此文件,

1. 导入 login 组件    import login from './login.vue'

2. 默认webpack 无法打包 .vue 文件,需要安装 相关的loader:     cnpm i vue-loader vue-template-compiler -D

3. 在配置文件中,新增loader配置项 { test:/\.vue$/, use: 'vue-loader' },注意:这里还需要增加const VueLoaderPlugin = require('vue-loader/lib/plugin'),

  plugins: [
new VueLoaderPlugin()
]
详情:https://vue-loader.vuejs.org/guide/#manual-setup

render方法渲染组件和在webpack中导入vue

4.在main.js里面调用

render方法渲染组件和在webpack中导入vue

可以看到这个Root就是我们new Vue得到的实例,在实例身上挂载了一个login组件

render方法渲染组件和在webpack中导入vue

render:function(createElements){
    return createElements(login)        ------------------->     这一段可以简写成render : c => c(login)
  }

export default方法和export的使用方法

可以直接在login.vue里定义组件数据

render方法渲染组件和在webpack中导入vue

 Node 中向外暴露成员的形式:

module.exports = {}

// 在Node中 使用 var 名称 = require('模块标识符')
// module.exports 和 exports 来暴露成员

在 ES6中,也通过规范的形式,规定了 ES6 中如何导入和导出模块

ES6中导入模块,使用 import 模块名称 from '模块标识符' import '表示路径'

在 ES6 中,使用 export default 和 export 向外暴露成员:

// 注意: export default 向外暴露的成员,可以使用任意的变量来接收
// 注意: 在一个模块中,export default 只允许向外暴露1次
// 注意: 在一个模块中,可以同时使用 export default 和 export 向外暴露成员

// 注意: 使用 export 向外暴露的成员,只能使用 { } 的形式来接收,这种形式,叫做 【按需导出】
// 注意: export 可以向外暴露多个成员, 同时如果某些成员,我们在 import 的时候,不需要,则可以 不在 {} 中定义
// 注意: 使用 export 导出的成员,必须严格按照 导出时候的名称,来使用 {} 按需接收;
// 注意: 使用 export 导出的成员,如果 就想 换个 名称来接收,可以使用 as 来起别名;

现在新建一个test.js文件演示

render方法渲染组件和在webpack中导入vue

在main.js中调用

render方法渲染组件和在webpack中导入vue

上一篇:java.lang.String cannot be cast to scala.runtime.Nothing Scala中的Nothing类型


下一篇:011 webpack中使用vue