使用Vue脚手架

关于不同版本的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：包版本控制文件

vue.config.js配置文件

1. 使用vue inspect > output.js 可以查看Vue脚手架的默认配置
2. 使用vue.config.js可以对脚手架进行个性化定制，详见https://cli.vuejs.org/zh

ref属性

1. 被用来给元素或子组件注册引用信息(id的替代者)
2. 应用在html标签上获取的是真实的DOM元素，应用在组件标签是获取的是该组件的实例对象(vc)

使用方式

打标识：

//html标签
<h1 ref="xxx">......</h1>

或

//组件
<School ref="xxx">......</School>

获取：

this.$refs.xxx

props配置项

功能

让组件接收外部传过来的数据

1. 传递数据：

<Demo name="xxx"/>

1. 接收数据：
   
   (1) 只接收数据

    props: ['name']
   

   (2) 限制类型

   props: {
       name: String
   }
   

   (3) 限制类型、限制必要性、指定默认值

   props: {
       name: {
           type: String,//类型
    	   default: 'cloud',//默认值
    	   required: true//必要性
       }
   }
   

2. props是只读的，Vue底层会监测你对props的修改，如果直接对props进行修改，就会发出警告。若业务需求确实需要修改，可以将props的数据复制到data中，再对data里的该数据进行修改即可

mixin(混入)

功能

可以把多个组件共用的配置提取成一个混入对象

使用方法

1. 定义混合，例如

export xxx = {
    data() {...},
	methods: {...},
	...
}

1. 使用混合，例如

//全局混入(在main.js里混入)
import xxx from '...'
Vue.mixin()

//局部混入(在组件里混入)
import mixin from '...'
//在vue的配置项里写
mixins: ['xxx']

1. 备注

• 若混入的组件里已有混入的配置（例如data、methods），则还是使用该组件的原来配置（不覆盖，只添加）
• 类似于mounted的钩子函数，若混入和混入的组件都有，则都执行

插件

功能

用于增强Vue

本质

包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据

定义插件

对象.install = function(Vue, options) {
	//1.添加全局过滤器
	Vue.filter(...)
	//2.添加全局指令
	Vue.directive(...)
	//3.配置全局混入
	Vue.mixin(...)
	//4.添加实例方法
	Vue.prototype.$myMethod = function() {...}
	Vue.prototype.$myProperty = xxx
	...
}

使用插件

Vue.use('插件名')

scoped样式

功能

让样式在局部生效，防止冲突

写法

<style scoped>
...
<style>