day6
使用vue实例 render方法渲染组件
var login = {
template: '<h1>hahaha</h1>'
}
// createElements 是一个方法, 调用它, 能够把指定的 组件模板, 渲染为html结构
render: function(createElements){
// 这里return的结果, 会替换页面中el 指定的那个容器
return createElements(login)
}
区分webpack中导入vue和普通网页使用script导入vue的区别
在普通网页中 如何使用vue
- 使用script标签, 导入vue.js
- 在index页面,创建一个id为app的 div容器
- 通过new Vue得到一个vm实例
在webpack 中使用vue
- 下载
npm i vue -s - import / require 引入vue
- new Vue一个vm实例
注意: 在webpack中, 使用import Vue from 'vue' 导入的Vue构造函数,功能不完整,只提供了 runtime-onle 的方式,并没有提供 像网页中那样的使用方式;
解决方案:
1.import Vue from '../node_modules/vue/dist/vue.js'
2.修改配置文件 webpack.config.js
resolve: {
alias: {
'vue$':'vue/dist/vue.js'
}
}
在vue中结合 render函数 渲染指定的组件的容器中
在webpack中, 如果想要通过vue, 吧一个组件放到页面中去展示, vm实例中的render 函数可以实现
简写:
import App from './App'
// vm中
render: h => h(App)
.vue 文件的结构说明
每个.vue文件都由三部分组成：
- template 结构
- script 行为
- style 样式
webpack 中如何使用 vue 总结
安装 vue 包:
npm i vue -S由于在webpack 中, 推荐使用 .vue这个组件模板文件定义组件, 所以需要安装 能解析这种文件的loader `npm 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: h => h(Login) }) 在页面找那个创建一个 id 为app 的div 元素, 作为我们vm实例要控制的区域
export 和 export default 使用方式
export(按需输出)
export default(默认输出)
在wabpack中使用 vue-router
组件中 style 标签 lang属性 和 scoped 属性
普通的 style 标签绘只支持普通的 样式, 如果想要使用 scss 或 less , 需要为 style 元素, 设置lang 属性
只要, style标签是在组件中 定义的, 那么都推荐开启 scoped 属性, 表示只作用于当前组件
scoped 范围的
实现原理: 给标签添加自定义属性, 通过 css的属性选择器 选择
抽离路由模块
- 为什么要抽离：因为 main.js 中，主要是来创建 VM 实例的；
- 所以，可以把 创建路由对象的过程，封装到单独的模块中，这样，main.js 按需导入 这个 路由模块中的路由对象即可；
