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 实例要控制的区域;
可以写node_modules下vue文件的路径,也可以使用import Vue from 'vue' ,使用第import Vue from 'vue'方法需要在配置文件webpack.config.js里加一个reslove结点,和plugins和module平级,但每次修改都需要重启。如果没有配置的话会报如下的错误!
在vue中结合render函数渲染指定的组建到容器中
方法一:小例子,可以像平时一样直接在main.js里面写vue的代码,但这种方法只能在导入最全的vue.js路径下使用。不灵活import Vue from '../node_modules/vue/dist/vue.js'
方法二:新建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
4.在main.js里面调用
可以看到这个Root就是我们new Vue得到的实例,在实例身上挂载了一个login组件
export default方法和export的使用方法
可以直接在login.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文件演示
在main.js中调用
render方法渲染组件和在webpack中导入vue的更多相关文章
- webpack 中导入 vue 和普通网页使用 vue 的区别(四)
一:在普通网页中使用 vue 使用 script 标签,引入 vue 包 在 ndex 页面中,创建一个 id 为 App 的 div 容器 通过 new Vue 得到一个 vue 实例 二:在 we ...
- 实例的render方法渲染组件
1.普通渲染组件 在app容器中插入login组件 <login></login> 一个app可以多个这种组件 <script> var login = { te ...
- 010 vue使用render方法渲染组件
1.普通的组件渲染方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- 20 区分webpack中导入vue和普通网页使用script导入Vue的区别
回顾包的查找规则: 1.找项目根目录中有没有node_modules的文件夹 2.在node_modules中根据包名,找对应的vue文件夹 3.在vue文件夹中,找一个叫做package.json的 ...
- 19 使用Vue实例的render方法渲染组件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 在webpack中配置.vue组件页面的解析
1. 运行`cnpm i vue -S`将vue安装为运行依赖: 2. 运行`cnpm i vue-loader vue-template-compiler -D`将解析转换vue的包安装为开发依赖: ...
- 使用render函数渲染组件
使用render函数渲染组件:https://www.jianshu.com/p/27ec4467a66b
- 011 webpack中使用vue
一:在webpack中使用vue 1.安装vue的包 2.index.html <!DOCTYPE html> <html lang="en"> <h ...
- Vue学习之webpack中使用vue(十七)
一.包的查找规则: 1.在项目根目录中找有没有 node_modules 的文件夹: 2.在 node_modules 中根据包名,找对应的vue 文件夹: 3.在vue 文件夹中,找 一个叫做 pa ...
随机推荐
- 1、腾讯云搭建Hadoop3集群
1主机名和IP配置 1.1主机名 1.首先使用root用户名和root密码分别登录三台服务器 2.分别在三台虚拟机上执行命令: hostnamectl set-hostname node1 hostn ...
- k8s service的四种类型
ClusterIp 默认类型,每个Node分配一个集群内部的Ip,内部可以互相访问,外部无法访问集群内部. NodePort 基于ClusterIp,另外在每个Node上开放一个端口,可以从所有的位置 ...
- AcWing 7. 混合背包问题
#include<iostream> #include<algorithm> #include<cstring> using namespace std ; ; i ...
- LaTeX技巧003:实现一个章标题
代码如下: \documentclass[11pt]{book} \usepackage{graphicx} \usepackage{CJKfntef} \usepackage{color} \mak ...
- Struts2学习-struts.xml文件配置
学习框架过程中,一直对框架中的配置文件比较难理解,特搜集资料简要记录一下struts.xml文件遇到的问题. <?xml version="1.0" encoding=&qu ...
- java自动化测试-json返回值校验
参考: https://blog.csdn.net/xkhgnc_6666/article/details/50250283 实现举例:
- 实用技巧之while里面使用getchar或sleep函数
我们经常需要打印一些变量的取值来调试程序,使用while(1)是常用的手段. ) { char letter = getchar(); printf("test_point is %d \t ...
- 4-初识Django Admin
初识Django Admin Django Admin是Django为我们提供的网站后台管理应用,通常网站,个人博客,CMS等都会有个后台管理界面,这个界面只有管理员权限的用户才能进入管理网站内容.管 ...
- 3ds Max File Format (Part 2: The first inner structures; DllDirectory, ClassDirectory3)
Now that we understand the outer structure of the file, it's time to look closer to what's inside. T ...
- numpy基础知识练习
# 1.导入numpy模块 # 2.创建一个大小为10的空向量 # 3.创建一个大小为10的空向量,但是第五个值为1 # 4.创建一个10-49的ndarray数组 # 5.创建一个3x3的矩阵,其值 ...