在普通页面中使用render函数渲染组件
<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>
在使用webpack构建的Vue项目中使用模板对象?
在普通网页中如何使用vue:
- 使用 script 标签 ,引入 vue 的包
- 在 index 页面中,创建 一个 id 为 app div 容器
- 通过 new Vue 得到一个 vm 的实例
在webpack 中使用 Vue:
注意:在 webpack 中, 使用 import Vue from ‘vue’ 导入的 Vue 构造函数,功能不完整,只提供了 runtime-only 的方式,并没有提供 像网页中那样的使用方式;
第一种修改方式:
在webpack.config.js
中添加resolve
属性:
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
第二种修改方式:
把Main.js里的import Vue from 'vue’改为 import Vue from ‘…/node_modules/vue/dist/vue.js’
包的查找规则:
- 找 项目根目录中有没有 node_modules 的文件夹
- 在 node_modules 中 根据包名,找对应的 vue 文件夹
- 在 vue 文件夹中,找 一个叫做 package.json 的包配置文件
- 在 package.json 文件中,查找 一个 main 属性【main属性指定了这个包在被加载时候,的入口文件】
在webpack中配置.vue组件页面的解析
-
运行
cnpm i vue -S
将vue安装为运行依赖; -
运行
cnpm i vue-loader vue-template-compiler -D
将解析转换vue的包安装为开发依赖; -
运行
cnpm i style-loader css-loader -D
将解析转换CSS的包安装为开发依赖,因为.vue文件中会写CSS样式; -
在
webpack.config.js
中,添加如下module
规则:
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.vue$/, use: 'vue-loader' }
]
}
- 创建
App.vue
组件页面:
<template>
<!-- 注意:在 .vue 的组件中,template 中必须有且只有唯一的根元素进行包裹,一般都用 div 当作唯一的根元素 -->
<div>
<h1>这是APP组件 - {{msg}}</h1>
<h3>我是h3</h3>
</div>
</template>
<script>
// 注意:在 .vue 的组件中,通过 script 标签来定义组件的行为,需要使用 ES6 中提供的 export default 方式,导出一个vue实例对象
export default {
data() {//组件里面的data必须是function
return {
msg: 'OK'
}
}
}
</script>
<style scoped>
h1 {
color: red;
}
</style>
- 创建
main.js
入口文件:
// 导入 Vue 组件
import Vue from 'vue'
// 导入 App组件
import App from './components/App.vue'
// 创建一个 Vue 实例,使用 render 函数,渲染指定的组件
var vm = new Vue({
el: '#app',
//let 函数名 = (参数1,参数2) => {函数体}
//若函数体只有一句,默认return
//匿名函数。如果参数不是一个,就需要用括号()括起来: createElements参数简写成c
render: c => c(App)
});
ES6中语法使用总结
- 使用
export default
和export
导出模块中的成员; 对应ES5中的module.exports
和export
export default,一个模块只允许向外导出一次成员,可以使用任意的变量接收
import m222, { title as title123, content } from ‘./test.js’
使用 export 向外暴露的成员,只能使用 { } 的形式来接收,必须严格按照 导出时候的名称。
export 可以向外暴露多个成员, 同时,如果某些成员,我们在 import 的时候,不需要,则可以 不在 {} 中定义
使用 export 导出的成员,如果 就想 换个 名称来接收,可以使用 as 来起别名;
-
使用
import ** from **
和import '路径'
还有import {a, b} from '模块标识'
导入其他模块 -
使用箭头函数:
(a, b)=> { return a-b; }
-
在复制大项目的时候,先运行npm install 安装依赖包,尽量排除Nodemodules文件体积大,里面可能有一些内部操作不能用,包通过package.json安装
在vue组件页面中,集成vue-router路由模块
vscode中可以安装插件vetur和vue 2 snippets
- 导入路由模块:
import VueRouter from 'vue-router'
- 安装路由模块:
Vue.use(VueRouter);
- 导入需要展示的组件:
import login from './components/account/login.vue'
import register from './components/account/register.vue'
- 创建路由对象:
var router = new VueRouter({
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login', component: login },
{ path: '/register', component: register }
]
});
//路由嵌套:带有子路由
var router = new VueRouter({
routes: [
{
path: '/account',
component: account,
children: [
{ path: 'login', component: login },
{ path: 'register', component: register }
]
},
{ path: '/goodslist', component: goodslist }
]
})
- 将路由对象,挂载到 Vue 实例上:
var vm = new Vue({
el: '#app',
// render: c => { return c(App) }
render(c) {
return c(App);
},
//render 会把 el 指定的容器中,所有的内容都清空覆盖,所以 不要 把 路由的 router-view 和 router-link 直接写到 el 所控制的元素中
router // 将路由对象,挂载到 Vue 实例上
// 注意: App 这个组件,是通过 VM 实例的 render 函数渲染出来的, render 函数如果要渲染组件, 渲染出来的组件只能放到 el: '#app' 所指定的元素中;
// Account 和 GoodsList 组件, 是通过路由匹配监听到的,所以这两个组件只能展示到属于路由的 <router-view></router-view> 中去;
});
- 改造App.vue组件,在 template 中,添加
router-link
和router-view
:
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
组件中的css作用域问题
<style lang="scss" scoped> </style>
普通的 style 标签只支持普通的样式,如果想要启用 scss 或 less ,需要为 style 元素,设置 lang 属性
只要style标签,是在.vue组件中定义的,那么推荐都为 style 开启 scoped 属性,只对当前vue组件有效
抽离路由为单独的模块
注意路径
// 在main.js里导入 自定义路由模块
import router from ‘./router.js’
// router.js里注意把需要Import的都引入,在router.js里把路由对象导出去
export default router