Vue的使用

两种不同的编译环境

完整版

相当于 运行时 + 编译器

编译器

 用来将模板字符串编译成为 JavaScript 渲染函数的代码
 可以理解为解析 Vue实例中的 template 模板内容，也就是说：只有 编译器 才能够解析 Vue实例 中的 template 配置项

运行时版本

基本上就是除去编译器的其它一切

注意点

使用运行版本的，是没有编译器的，所以就是不能够解析template中的数据，所以需要使用rander的方式来渲染

如何创建运行时 和完整版

运行版本
使用import Vue from ‘vue’导入的vue的时候
默认导入的是：运行时版本
如果导入完整版的vue，需要在webpack中添加一个配置项

应该使用哪种编译的方式

官网中推荐使用运行版本，因为体积较小
在脚手架中推荐使用：完整版
如果对 Vue 体积有要求，应该使用 运行时版本！！！

脚手架

脚手架的使用

• 1.全局安装
  npm i -g vue-cli
• 2.快速生成一个Vue项目：
  vue init webpack 项目名称
• 3.进入项目
  cd 项目名称
• 4.启动项目
  npm run dev

Vue项目脚手架搭建

创建项目的步骤

• 1.创建命令
  vue init webpack shop-admin
• 2.配置
  根据脚手架的引导创建选择配置项
• 3.切换目录
  cd shop-admin
• 4.启动项目
  npm run dev

手动配置路由

• 1.安装路由
  npm i vue-router
• 2.在 src 目录中，新建 router 文件夹，在文件中新建 index.js 路由的配置文件
• 3.在App.vue中，添加路由的出口
• 4 在 index.js 中，配置路由，并导出路由实例
• 5 在 main.js 中导入 路由配置，并且与 Vue实例 关联到一起

element-ui的使用

• 1.安装
  npm i element-ui
• 2.在入口文件中，导入element-ui的插件和它的样式，以及安装插件
• 3.直接在文档中找到对应的组件即可

Vue中的插槽

概述

可以在封装组件时使用组件标签中的子节点

使用的场景

封装组件，为了增加组件的复用性

默认插槽

没有name属性的插槽

默认插槽使用

可以通过 Vue 中的插槽来使用 组件子节点

• 1 在组件中需要动态变化的地方，添加 slot 组件（ 占位置 ）
• 2 将要传递内容作为 组件标签 的子节点
• 3 slot组件，就会被替换为 组件标签的子节点

默认插槽使用注意点

默认情况下，组件子节点是不会出现在页面中的。
slot组件默认只能使用一次！如果使用多次，就会报错！！！

具名插槽

给 slot 起一个名称，那么，在一个组件中，就可以使用多个 slot 了

具名插槽使用

• 1 在组件中，使用 slot 的时候，添加name属性
• 2 在给组件标签添加子节点的时候，指定 slot="插槽的name"
• 3 这样，对应的内容，就会展示在 对应的插槽中了

具名插槽使用问题

默认情况下，组件标签子节点中无法直接使用组件内部的数据！！！
因为 作用域（能否在组件中访问到某个数据） 问题，标签在哪个组件的模板中使用的，那么，它就只能访问到的当前组件的数据

作用域插槽

作用域插槽使用的步骤

• 1.首先在子组件的模板slot标签上添加属性，例如 :boy='cj' :girl:'wt'
• 2.在子组件中的data添加属性值的数据
• 3.在渲染页面设置 slot-scope="scope"
  slot-scope 固定写法，用于获取作用域设置的参数
  scope 只是传出的数据的集合(对象)
• 4.在页面中组件中可以通过 {{scope.boy}} / {{scope.gril}} 获取子组件中的数据