来一场Vue的学习之旅

2024年1月24日 162次阅读 来源: gaoshu883

Vue中的组件

  1. Vue.component用于注册全局组件
  2. 传递父组件的数据到子模版

上面这两句话很常见……嗯，下面就从vue组件开始一场vue的学习之旅吧。

组件的声明与注册

创建Vue组件很简单，只需要声明一个组件对象字面量，然后安装到vue实例上（局部安装或者全局安装）。
将组件声明为对象字面量的形式，必有属性是template，还要渲染数据data吧，或者还需要父组件传递数据的接口props，然后一个比较完备的组件就声明好了。

    // 组件声明（为对象）
    var myComponent = {
        template: '<div>this is a component</div>',
        data: function() {
            return {
                message: 'this is within the component'
            }
        },
        props: ['name']
    }
    // 简要分析一下：组件是对象，内部属性使用data定义，可接受父组件传过来的值，使用props声明。
    
    // 全局注册
    // 需要在Vue实例化之前进行
    // 声明完再安装
    Vue.component('hello', myComponent);
    // 局部注册
    new Vue({
        el: '#app',
        components: {
            'hello': myComponent
        }
    })

组件的prop可设置验证，即规定prop的类型，只有满足类型说明的才能正常接受数据。这个时候，props使用对象进行声明，而不再使用数组的形式。改写上面的例子：

var myComponent = {
   template: '<div>this is a component</div>',
    data: function() {
        return {
            message: 'this is within the component'
        }
    },
    props: {
        name: String
    }
}

感慨：我觉得我抓不住点，朦朦胧胧地，总感觉还差一点什么。子组件和父组件，应该就是子类和父类的区别。子类在创建的时候，需要传入一组参数实现specialization。

总结：

  • 创建子组件，相当于创建子类，需要传入参数对象（该参数对象就是组件声明，这里记作parameters）

  • 父组件向子组件可以直接传入字符串，或者通过属性传入，如下所示：

    • <hello name="luuuuu"></hello>   // 'luuuuu' 是字符串
<hello :name="toChild"></hello> // toChild 是变量

Vue单组件文件


import Second from './second.vue'

export default {
  data () {
    return {
      msg: "Second Component",
      toChild: "xiaoluu"
    };
  },
  components: {
    Second
  }
}
  • 每一个组件，export default出来的是组件的配置对象，也就是上面提到的parameters
  • webpack中使用vue-loader加载.vue组件文件

import 和 export 语法说明

vue组件中用到了es6的语法，包括import和export，模块的引入和输出需要它们声明。
模块是局部的，有作用域限制。通常，由模块向外暴露function, object 还有 primitive values等，继而被其他模块引入调用。
模块中，使用export暴露，使用import引入。
export default 表示只暴露出一个接口，可以是初始值，可以是函数，可以是类，可以是对象，等等等。vue components单组件模块中暴露的是一个对象（组件声明的参数对象，用来描述component的对象字面量）。

// export
// export有两种方式：定义后立即调用；先定义后调用（模块名称需要使用 { } 包裹）
export { myFunction }
export { myObject }
export default {}
export const myObject = {}
export function () {}

// import
import defaultModule from './base'
import {boo, foo} from './base'
import {boo as haa} from './base'

import, export和require, module.exports, exports的区别

相信，这两组语法很多人都遇到过，而且也会被其所困扰，功能是一样的，但是比较奇怪的是，有时候就是不能替换使用，为什么呀？
import 和 export 是es6模块语法，而 require 和 module.exports, exports 是Commonjs的模块规范。
如果想了解更多关于这两者的区别和使用方法，可以参考这篇文章：module.exports,exports,export和export default,import与require区别与联系。简要提点(绝大部分摘自上述博文)：

  • 在module.exports中，module指当前模块，其为对象，有属性exports，模块输出，都是挂载到module.exports上输出的；使用require加载模块，实际上是加载该模块的module.exports属性。
  • 其实exports变量是指向module.exports，加载模块实际是加载该模块的module.exports。
  • 于是我们可以直接在 exports 对象上添加方法，表示对外输出的接口，如同在module.exports上添加一样。注意，不能直接将exports变量指向一个值，因为这样等于切断了exports与module.exports的联系。(类似于function的prototype属性)

另外，你可能还会疑惑什么时候用import，什么时候用require，因为看起来功能都是一样的。应该是这样的：前端组件和模块中，使用import和export语法，其余情况（node开发）使用commonjs语法。（vue组件中使用import语法，但是webpack等其他配置中使用的是commonjs语法）

Vue脚手架配置文件说明

咔咔地就到了vue脚手架这里~ 对脚手架里面的配置文件还是需要了解一下的~
参考这里的配置说明博客：vue2.0脚手架的webpack 配置文件分析
以下内容是我的读后感：

  • 项目生产环境和开发环境的配置思路，和我之前做的项目有所不同。它并没有用到外部的set NODE_ENV = development 指令，还是将开发环境和生产环境的入口分开，开发环境引入开发环境的配置，生产环境则引入生产环境的配置。
  • 开发环境下，使用了一些中间件，本地启动一个服务器，通过热启动配置等，实现快速开发。
  • webpack被我们挂载到了express服务上。
  • webpack插件之html-webpack-plugin：html-webpack-plugin用法全解。这个插件会在webpack目标文件夹下产生一个html文件（根据你提供的模版，插入所有生成的内容，以及外部资源链接等）。这就有点像我每次gulp构建dist目录时，总要把index.html复制一份到dist文件夹下，保持dist和src目录的分离（注意，不是index.html的完全复制哦，如果需要完全复制，可以使用copy-webpack-plugin插件）。
  • webpack重要的三个概念是：打包（核心概念），资源加载器loader（将非js资源转换成js，便于打包），插件（一些好玩的附件）。
  • 生产环境下的webpack的配置，需要涉及到前端的静态资源自动化处理，比如js，css的压缩（webpack.optimize.UglifyJsPlugin， optimize-css-assets-webpack-plugin），静态资源版本控制（我猜的~~），服务器gzip压缩（compression-webpack-plugin）等。

Vue坑——刚才一不小心遇到的

  • webpack和vue components结合使用，图片的引入和路径问题。

    • 图片的地址是相对于服务器的根目录，所以要在开发的时候启动服务器，否则会报错
#HTML
    <img :src="'./' + imgUrls.demo01" alt="demo"> // 本地可正常打开
    <img :src="imgUrls.demo01" alt="demo"> // 配置服务器后正常打开
#JS
    import demo01 from './1.jpg'
    export default {
      data () {
        return {
          imgUrls:{
            demo01
          }
        };
      }
    }
  • 通过vue-cli初始化vue项目时，安装依赖包时出了问题，提示有权限问题，但是我明明使用了管理员权限。后来我改用git bash shell就没有再报错。windows下，cmd和git bash来回切换的节奏。
  • vue中使用自定义事件一定要小心啊，$on注册监听器后，组件销毁时需要使用$off移除事件监听器，不然就会产生意外bug。
    原文作者：gaoshu883
    原文地址: https://segmentfault.com/a/1190000011484292
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞