day6

使用vue实例 render方法渲染组件

var login = {
    template: '<h1>hahaha</h1>'
}

// createElements 是一个方法, 调用它, 能够把指定的 组件模板, 渲染为html结构
render: function(createElements){
    // 这里return的结果, 会替换页面中el 指定的那个容器
    return createElements(login)
}

区分webpack中导入vue和普通网页使用script导入vue的区别

在普通网页中 如何使用vue

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

在webpack 中使用vue

1. 下载npm i vue -s
2. import / require 引入vue
3. 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文件都由三部分组成：

1. template 结构
2. script 行为
3. style 样式

webpack 中如何使用 vue 总结

1. 安装 vue 包: npm i vue -S

2. 由于在webpack 中, 推荐使用 .vue这个组件模板文件定义组件, 所以需要安装 能解析这种文件的loader `npm 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: h => h(Login)
   
    })
   

7. 在页面找那个创建一个 id 为app 的div 元素, 作为我们vm实例要控制的区域

export 和 export default 使用方式

export(按需输出)

export default(默认输出)

Module语法

在wabpack中使用 vue-router

vue-router官网

组件中 style 标签 lang属性 和 scoped 属性

普通的 style 标签绘只支持普通的 样式, 如果想要使用 scss 或 less , 需要为 style 元素, 设置lang 属性

只要, style标签是在组件中 定义的, 那么都推荐开启 scoped 属性, 表示只作用于当前组件

scoped 范围的
实现原理: 给标签添加自定义属性, 通过 css的属性选择器 选择

抽离路由模块

1. 为什么要抽离：因为 main.js 中，主要是来创建 VM 实例的；
2. 所以，可以把 创建路由对象的过程，封装到单独的模块中，这样，main.js 按需导入 这个 路由模块中的路由对象即可；