1.使用vue实例的render方法渲染组件
<div id="app">
<login></login>
</div>
var login = {
template:'<h1>这是登录组件</h1>'
}
var vm = new Vue({
el:'#app',
data:(),
methods:{},
render:function(createElement){
//createElement是一个方法，调用它，能够把指定的组件模板，渲染为html结构
return createElement(login)
//注意：这里return的结果，会替换页面中el指定的那个容器
}
components:{
login
}
})
2.区分webpack中导入vue和普通网页使用script导入vue的区别
如何在webpack构建的项目中，使用Vue进行开发
//注意：在webpack中，使用
import Vue from 'vue'导入的Vue构造函数，功能不完整，只提供了runtime-only的方式，并没有提供像网页中那样的使用方式
//回顾包的查找规则：
(1).找项目根目录中有没有node_modules的文件夹
(2).在node_modules中，根据包名，找对应的vue文件夹
(3).在vue文件夹中，找一个叫做package.json的包配置文件
(4).在package.json文件中，查找一个main属性【main属性指定了这个包在被加载时候，的入口文件】
//导入全的包
第一种:import Vue from '../node_modules/vue/dist/vue.js'
第二种:在webpack.config.js中
modules.exports={
...
resolve:{
alias:{
//这是修改vue被导入时候的包的路径
"vue$":"vue/dist/vue.js"
}
}
}
var vm = new Vue({
el:'#app',
data:{
msg:'123'
}
})
3.在vue中结合render函数渲染指定的组件到容器中去
<div id="app">
<login></login>
</div>
//创建一个login.vue文件
<template>
<div>
<h1>这是login组件</h1>
</div>
</template>
<script>
</script>
<style>
<style>
//(1).导入login组件
import login from './login.vue'
//默认webpack无法打包.vue文件，需要安装相关的loader；
//cnpm i vue-loader vue-template-compiler -D
//在配置文件中，新增loader配置项{ test:/\.vue$/,use:'vue-loader'}
var vm = new Vue({
el:'#app',
data:{
msg:'123'
}
//components:{
login
}
render:function(createElements){
//在webpack中如果想要通过vue，把一个组件放在页面中显示，vm实例中的render函数可以实现
return createElements(login)
}
})
4.webpack结合vue使用的总结
//总结梳理：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导入这个组件 例子：import login from './login.vue'
(6)创建vm的实例var vm = new Vue({ el:'#app',render:c=>c(login)})
(7).在页面中创建一个id为app的div元素，作为我们vm实例要控制的区域
5.export default 与export的使用方式
//创建一个login.vue文件
<template>
<div>
<h1>这是login组件</h1>
</div>
</template>
<script>
export default{
data(){
return{}
},
methods:{
show(){
console.log("调用了login.vue中的show方法")
}
}
}
</script>
<style>
<style>
网友评论