vue单文件组件开发

1.1 单文件组件

1.1.1 模块方式引入Vue

• 在之前学习阶段中，都是在HTML页面上通过script标签来引入Vue文件的。
• 但我们已经知道了Vue.js本身实际上就是一个Vue对象。因此我们可以通过模块化方式导入Vue
• 模块化方式引入Vue的预备知识：
  1. 学习ES6的模块化 （导入和导出的规范），参考：ES6 => 模块化
  2. 要有Node运行环境，懂得如何下载第三方包。 参考： Node => 第三方模块
  3. 运行代码时，要使用webpack打包工具（解析模块化规范）。
     • 只有通过该打包工具，我们才能够在开发阶段用ES6模块规范导入第三方模块。参考：webpack

1. 安装第三方模块vue：npm i vue
2. 在webpack.config.js中，指定要使用的vue版本

• • module.exports = {
       resolve: {
           alias: {
               'vue$': 'vue/dist/vue.esm.js'
          }
      }
    }

1. 在入口JS文件中导入vue模块，然后编写Vue相关代码
   •  

1.1.2 模拟单文件组件

1. 我们可以在一个JS文件中，导出一个组件对象。这样一个JS文件就是一个组件对象

 

1. 在入口JS文件中，导入组件对象，将其注册并且使用

 

• 但是这样定义组件所带来的弊端也是显而易见
  • 组件对象在template中定义HTML模板区域，缺乏语法高亮，并且缺少HTML代码提示
  • HTML模板区域和组件数据，写在同一个对象上，没有实现真正意义上的数据和页面分离
  • 组件对象不支持编写CSS 样式。意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
• 文件扩展名为 .vue (单文件组件) 为以上所有问题提供了解决方法。
  • 但是该文件无法直接被浏览器所识别，意味着必须要用到webpack打包工具将其解析加载

1.1.3 .vue文件的介绍

• 每一个.vue文件都可以看做一个组件或组件对象

 

• .vue文件特点：①完整语法高亮 ②ES6模块 ③组件作用域的 CSS ④模板区域和数据实现分离
• 注意：webpack无法解析加载.vue文件，需要使用loader插件对vue文件进行解析加载
  • 参考：webpack => 使用loader => vue文件处理
• 如果不想在vscode中手动编写vue文件的初始化代码，那么可以添加一个代码片段
  • 参考：vscode基本使用 => 配置Vue文件代码片段

• 建议所有的.vue文件的命名方式：都是以首字母大写
• 在Vue单文件组件中，如果给style标签添加scoped属性，则表明当前组件编写的CSS样式具有组件作用域，CSS样式只对当前组件生效，与其他组件不冲突