Vue - day6-阿里云开发者社区

开发者社区> 开发与运维> 正文

Vue - day6

简介: day6 使用vue实例 render方法渲染组件 var login = { template: 'hahaha' } // createElements 是一个方法, 调用它, 能够把指定的 组件模板, 渲染为html结构 render:...

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 按需导入 这个 路由模块中的路由对象即可;

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章