Vuejs（2.0）

一、使用 Vue 脚手架

1.1 初始化脚手架

1.1.1 说明

1.Vue脚手架是 Vue 官方提供的标准化开发工具（开发平台）。

2.最新版本是 4.x

3.文档    Vue CLI

1.1.2 具体步骤

1.全局安装： 全局安装   @vue/cli

        命令： npm install -g @vue/cli

2.切换到创建的项目的目录，然后使用命令创建项目：

        vue create xxx

3.启动项目

        npm run serve

备注：

        1.如果出现下载缓慢配置 npm 淘宝镜像： npm config set registry https://registry.npm.taobao.org

        2.Vue脚手架隐藏了所有的 webpack 相关的配置，若想查看具体的webpack配置，请执行： vue inspect > output.js

        文档： 配置参考 | Vue CLI

备注：

1.如出现下载缓慢请配置 npm 淘宝镜像：

        npm config set registry https://registry.npm.taobao.org

2.Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpack 配置，请执行：        vue inspect > output.js

1.1.3 模板项目的结构

脚手架文件结构： 

|—— node_module
|—— 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

vue.js 与 vue.runtime.xxx.js 的区别：

        （1）vue.js 是完整版的 Vue，包含：核心功能 + 模板解析器。

        （2）vue.runtime.xxx.js 是运行版的Vue，只包含：核心功能；没有模板解析器。

因为 vue.runtime.xxx.js 没有模板解析器，所以不能使用 template  配置项，需要使用 render 函数接收到的 createElement 函数去指定具体内容。

vue.config.js 配置文件

手架进行个性化定制：详情见： https://cli.vuejs.org/zh 

1.1.4  消除警告

1.关闭vue生产提示

        main.js  中        Vue.config.productionTip = false;

2.安装 vue 开发者工具

1.2 ref 属性

1.被用来给元素或子组件注册引用信息（id的替代者）。

2.应用在 html 标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）。

3.使用方式：

打标识：

<h1 ref="xxx">......</h1>  或  <School ref="xxx"></School>

获取：

this.$refs.xxx

1.3 配置项 props

1.3.1 功能

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

1.3.2 传递数据

<Demo name="xxx" />

1.3.3 接收数据

第一种方式（只接收）：

props: ['name']

第二种方式（限制类型）：