Vue组件的单文件组件 | 备赛摸鱼学习

本部分是Vue_组件_非单文件组件

---

前情回顾~

组件基础内容

解释：实现应用中局部功能代码和资源的集合

需求：尽可能拆分的细致以做到代码的高复用率

• 非单文件组件：
  一个文件中包含N个组件
• 单文件组件：
  一个文件中包含一个组件（开发项目中经常用）

单文件组件相关知识

*.vue文件并不会直接被浏览器解析识别（浏览器并不认识）
就好比*.less文件并也不会被浏览器识别，想个办法加工成浏览器识别的*.css文件就好了

使用方法

一般情况下组件使用的三步走：

1. 创建组件
2. 注册组件
3. 使用组件

基础代码

为了迎合三件套于是乎便有了下面的基础标签

<template>
    <!--组件结构-->
</template>
<script>
    //组件交互相关的代码(数据、方法等等)
    export const school = Vue.extend({})//1.分别暴露
    export{//2.统一暴露
        school
    }
    export default school//3.默认暴露

    //3 默认暴露 另一种写法
     export Vue.extend({})//可以不写Vue.extend 直接暴露花括号的也可以，但是要记得给name 属性
    
</script>
<style>
    /**组件的样式**/
</style>

一般情况下会单独创建一个main.js用于初始化vue，main.js可以被称呼为入口文件

main.js -控制-> App.vue -控制->其他组件.vue

main.js文件内容

import moduleName from 'module';
new Vue({
  el:"#root",
  components:{App}
})

注意main.js的引用位置之前是否已经产生了el挂载的地方，同时vue.js是否已经引用
浏览器不能直接支持es6的模块化语法所以要使用vue的脚手架

---

注意！Vue文件中不要随便写标签！
毕竟这里是es6模块化，要将模块暴露出来（三种方法任选其一，但一般是默认暴露，使用起来简单）
到最后一定要有一个App.vue来进行总管全局
在App.vue中使用import 组件名 from '组件文件位置'在脚手架中文件后缀.vue存在也可以不存在也可以
Ps 在*.vue文件中不要出现new Vue()的语句

Vue脚手架

简介：Vue脚手架是Vue官方提供的标准化开发工具(开发平台)
CLI（command line interface）（脚手架）
创建vue项目时后面还带有两个工具：

• babel，是用来将ES6转换为ES5的工具
• eslint,是用来做语法检查的

关于不同版本的Vue

1. vue.js与vue.runtime.xxx.js的区别：
   1. vue.js是完整版的Vue，包含：核心功能 + 模板解析器。
   2. vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
2. 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template这个配置项，需要使用render函数接收到的createElement函数去指定具体内容。

模板项目的结构

├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件 

脚手架的两个常用命令

1. serve 在本地运行一个简单的服务器进行代码表示
2. build 对代码进行编译生成三件套的文件

run serve之后的执行顺序

1. main.js 入口文件

/*该文件是整个项目的入口文件 */
/*引入vue */
import Vue from 'vue'
/*引入app.vue */
import App from './App.vue'
/*关闭提示vue的生产提示 */
Vue.config.productionTip = false
/*创建vm对象 */
new Vue({
  /*将app组件放入容器中 */
  render: h => h(App),
}).$mount('#app')

2. App.vue App组件
   在App引用到的文件夹：
   assets:静态文件资源文件夹
   components:所有组件存放的文件夹

3. 去public中的index.html找到id为app的div

ref属性

1. 作用：用于给节点打标识
2. 读取方式：this.$refs.xxxxxx

ref被用来给元素或子组件注册引用信息
可以用来获取Dom对象，也可以用来获取组件的实例对象

props属性

1. 作用：用于父组件给子组件传递数据
2. 读取方式一: 只指定名称 props: [‘name’, ‘age’, ‘setName’]
3. 读取方式二: 指定名称和类型 props: {name: String, age: Number, setNmae: Function }
4. 读取方式三: 指定名称/类型/必要性/默认值 props: {name: {type: String, required: true, default:xxx}, }

< 父节点 name="张三"/>

在页面中当做变量值直接用就好
不要在props中随意声明变量，而且传进来的变量无法修改
props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告,若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

mixin 混入

应该可以理解为jar包突然混入的java
功能:可以把多个组件共用的配置提取成一个混入对象使用方式:
第一步定义混合，例如:

const mixin = {
    data() {....},
    methods: {....}
    ....
}

第二步使用混入，例如:
(1)·全局混入:Vue.mixin(xxx)
(2).局部混入: mixins:[‘xxx’] (是vue的一个属性，必须使用数组)
备注：

1. 组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”，在发生冲突时以组件优先
2. 同名生命周期钩子将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用

Vue插件

作用：增强Vue
本质：是一个对象
注意：不要再main.js里面定义插件
如何使用:Vue.ues()
关于传参:install第一个参数是Vue之后是定义的参数

export default {
  install(Vue,x,y,z){
    console.log(x,y,z)
    //全局过滤器
    Vue.filter('mySlice', function(value){return value.slice(0,4)})

    //定义全局指令
    Vue.directive('fbind',{
      //指令与元素成功绑定时（一上来）
      bind(element,binding){element.value = binding.value},
      //指令所在元素被插入页面时
      inserted(element,binding){element.focus()},
      //指令所在的模板被重新解析时
      update(element,binding){element.value = binding.value}
    })

    //定义混入
    Vue.mixin({
      data() {return {x:100,y:200}},
    })

    //给Vue原型上添加一个方法（vm和vc就都能用了）
    Vue.prototype.hello = ()=>{alert('你好啊')}
  }
}
···


# 碎碎念
Q：为什么会有那么多版本的vue.js文件 关键代码`render: h => h(App),`  
A：为了应对不同时期需要的功能，最简单例子打包后的vue项目并不需要template解析，所以就少了对应的解析功能，之后又产生了精简版的vue  
Q:我对官方的配置不爽怎么办？比如`凭什么入口文件是main.js`
A:命令行写`output.js`自己想办法去改，但是改了没有用。因此，应该去官网看看