2019年最全最新Vue、Vuejs教程，从入门到精通【p64-p90】

2019年最全最新Vue、Vuejs教程，从入门到精通

一、父子组件的访问方式
1.父组件访问子组件：使用dolor符号children或dolor符号refs
-使用children的时候，获取的是一个子组件数组，可以通过循环的访问遍历每一个子组件，也可以通过下标的访问单独访问某一个子组件。但是一但子组件的顺序和数量发生变化，就不是那么好用了。refs可以直接访问到某一个子组件，此时使用refs，更方便一些。
-区别：children可以访问到所有的子组件，而，是一个数组类型。refs是一个对象类型，默认是一个空的对象，当给子组件设置了标识ref，那么它就可以访问到设置了标识的子组件。
2.子组件访问父组件$parent和dolor符root
-通过parent可以访问到父组件的值，但是一般情况下开发中不这么使用。在开发中，我们会把许多小功能抽成组件，一方面可以方便复用这些功能，另一方面可以降低子组件和父组件的耦合度。如果说我们通过parent去访问父组件的值，可能会出现某些父组件有，但某些父组件没有这个值的情况，这样会增加父子组件间的耦合度，造成一定的混乱。

二、插槽
1.为什么使用slot
-组件的插槽是为了让我们封装的组件更加具有拓展性
-使用者可以决定组件内部的一些内容到底展示什么
-有些组件在很多页面中都会使用到，但是每个页面中却有一部分不一样的地方，这个时候我们就要保留共性，并且将不同之处加以修改，插槽就是用来修改不同之处的。
2.插槽的基本使用
-在template标签中使用slot标签
-插槽中可以使用默认值
-如果有多个值，同时放入到组件进行替换时，一起作为替换元素
3.编译作用域
-父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译，所以变量是否显示的关键在于它本身的作用域中是否有这个变量。
4.具名插槽和作用域插槽
-可以在slot标签中设置name=“abc”,然后使用v-slot:abc对有name的slot进行匹配，再一一对应的进行组件设置。
-可以在slot标签中设置 ：aaa:“需要获取的变量名” ,再使用v-slot=“用来接收数据的变量名(bbb)”，使用bbb.aaa就可以在父组件中使用子组件作用域内的变量
-v-slot要在template标签中使用

三、模块化开发
1.前端代码复杂可能带来的问题
-如果在多人开发的时候，其他人也跟我们一样，赋值了一个相同名字的变量，并且设置的是全局变量，那么就会引起一些BUG.
2.模块化核心（导出和导入）
-CommonJS

3.ES6的模块化（export和import）
-ES6当中给引入的的外部script添加type=“module”
-每个js都是一个模块
导出的方式一：export{flag,sum}；
导出的方式二: export let num1=100;
导出的方式三：export function sum(a,b){return a+b}
导出的方式四 export Class Person{
}
导出default ： const foods=“烧麦”
export default foods；
导入的方式一：import{flag,sum}from ‘./aaa,js’
导入全部属性：import * as aaa ‘./aaa.js’，aaa是一个对象，相当于所有导出的变量都在aaa这个对象的属性里
导入default ： import 自命名 from ‘./aaa.js’

四、webpack简介
1.webpack的概念
-如果工程模块依赖非常简单，甚至没有用到模块化的概念，只需要进行简单的合并、压缩，就是用grunt/gulp即可。但是如果整个项目使用了模块化管理，而且相互依赖非常强，我们就可以使用更加强大的webpack。
2.webpack与grunt/gulp的区别
-grunt/gulp更加强调的是前端流程的自动化，模块化不是它的核心
-webpack更加强调模块化开发管理，而文件压缩合并、预处理等功能，是他附带的功能
3.webpack和node和npm的关系

4.webpack的一些命令
-一开始在node环境下安装的webpack是一个全局webpack，为了更好的去开发项目，我们还需要创建一个本地webpack，可以使用 npm install webpack@版本 --save-dev （开发依赖）或 --save（运行依赖）
-我们需要在项目中配置一个webpack.config.js文件作为配置文件，在node环境中使用npm init进行初始化，在生成的package.json文件中的“scripts”对象里去添加一些东西，方便我们直接使用npm run XXX 运行项目

五.loader
1.loader
-之前我们主要是用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的依赖。但是在开发中，我们不仅仅有基本的js代码处理，我们也需要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css。对于webpack本身的能力来说，这些转换是不支持的。
-此时我们就需要给webpack扩展对应的loader
2.loader使用过程
-步骤一：通过npm安装需要使用的loader
-步骤二：在webpack.config.js中的modules关键字下进行配置
3.加载css、less等loader
webpack中文网站
4.配置图片

5.babel的使用
-在webpack中，我们希望将ES6语法转换成ES5，那么就需要使用babel
-而在webpack中，我们直接使用babel对应的loader就可以了
安装语法：npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

六、使用webpack配置Vue
1.vue的npm安装和引入
-语法 : npm install vue -save （这里是因为vue既要在开发时依赖，又要在运行时依赖）
-使用import Vue from ‘vue’ 这里是因为node_modules中导出了一个default的vue。

2.vue在构建最终发布版本时，构建了两类版本
-runtime-only-> 代码中，不可以有任何的template
-runtime-compiler->代码中，可以有template，因为有compiler可以用于编译template

-解决办法：

3.创建vue文件夹
-可以把vue相关的代码抽离出来，每一个vue文件都是一个组件，最后会形成一个树结构。

4.省略后缀的方法（extensions）
-resolve:{
// alias：别名
extensions:[’.js’,’.css’,’.vue’],
alias:{
‘vue$’:‘vue/dist/vue.esm.js’,
}
}
七、plugin
1.plugin是什么？
-plugin是插件的意思，通常是用于对某个现有的架构进行扩展。
-webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等。
2.loader和plugin的区别
-loader通常是用于转换某些类型的模块，它是一个转换器
-plugin是插件，它是对webpack本身的扩展，是一个扩展器
3.plugin的使用过程：
-步骤一：通过npm安装需要使用的plugins
-步骤二：在webpack.config.js中的plugins中配置插件
4.添加版权的plugin（webpack自带的BannerPlugin插件）
-在webpack.config.js中先导入一下webpack
const webpack =require(‘webpack’）;

5.HtmlWebpackPlugin插件
-我们知道，在真实发布项目时，发布的是dist文件夹的内容，但是dist文件夹中如果没有index.html文件，那么打包的js等文件也就没有意义了。所以，我们需要将index.html文件打包到dist文件夹中，这个时候就可以用HtmlWebpackPlugin插件
-HtmlWebpackPlugi插件可以自动生成一个index.html模板（可以通过template：来指定一个模板），还可以将打包的js文件，自动通过script标签插入到body中

6.uglifyjs-webpack-plugin插件
-在项目发布之间，我们必然需要对js等文件进行压缩处理，这里，我们就要对打包的js文件进行压缩
-可以使用第三方插件uglifyjs-webpack-plugin，并指定版本号1.1.1和CLI2保持一致

7.搭建本地服务器
-可以使用npm install --save-dev [email protected]版本（这里是因为webpakc使用的是3.6.0版本，需要与webpack版本保持一致即可）
-devserver也是作为webpack中的一个选项，选项本身可以设置一些属性：contentBase：为哪一个文件夹提供本地服务，默认是根文件夹， port：端口号 ，inline：页面实时刷新 ， historyApiFallback：在SPA页面中，依赖HTML5的history模式
-可以使用node_modules.bin\webpack-dev-server(注意终端要用反斜杠进入绝对路径)或在package.json文件里面配置一下"dev":“webpack-dev-server” ,这两种方式可以进入搭建的本地服务器

8.对webpack可以进行配置分离