Vue学习第二阶段

最新推荐文章于 2023-02-18 23:53:53 发布

不加蔗糖

最新推荐文章于 2023-02-18 23:53:53 发布

阅读量127

点赞数

本文链接：https://blog.csdn.net/weixin_44828370/article/details/108990975

版权

什么程度?：可以开发对应的项目

一、组件化开发

1.1.父子组件的访问

children / refs
parent / root

1.2. slot 的使用

基本使用
具名插槽
编译的作用域
作用域插槽

二、前端模块化

2.1. 为什么使用模块化

简单写js代码的问题
闭包引起代码不可复用
自己实现简单的模块化
AMD / CMD / CommonjS

2.2. ES6 中模块化的使用

export
import

1. 模块中导出和使用 ----export 和 import

1. 模块中导出和使用 ----export 和 import

导出 export
***导出方式一： export{ flag ，sum}
***导出方式二：export var num1 = 1000; export var height = 1.65;
***导出函数：export function mul （numl , num2）{ return numl * num2}
***导出类： export class Person { run（）{ console.log(' 在跑 ') } }
***默认导出<只有一个>：export default address 在外部就可以自己命名

2. 在外部使用：导入 import ：

***import {flag，sum} form ” . / aaa . js “;
***import { mul} form " . / aaa. js";
***默认 import add form ”. / aaa .js“
***统一全部导入： import * as aaa from ‘ . / aaa . js ’

三、webpack

3.1.Webpack

---是一个现代的JavaScript 应用的静态模块打包工具

---webpack必须依赖node环境，而node里包含各种依赖包

---npm工具(node packages manager) 对node中各种包进行管理

---图形表示

3.2.模块与打包的区别

3.3.grunt / gulp的对比 <前端自动化管理工具>

***核心：Task <事物任务>

***适用范围： 1.工程模块依赖非常简单、甚至是没有使用模块化概念

2.只需要进行简单的合并、压缩。

3.如果项目使用了模块化管理，依赖非常强，就使用更强大的webpack。

3.4.安装webpack，首先要安装Node.js，Node.js 自带了软件包管理工具npm

3.4.1.node.js 的安装

3.4.1.1.先说怎么卸载node.js

----1.直接在360软件管家里卸载。或者在windows卸载窗口里卸载

----2.卸载干净很重要。在C盘里、Users、。。。不同电脑文件名不一样。这两个文件要删除干净

3.4.1.2.node.js 的安装

----根据菜鸟教程node.js 安装就可以了链接：https://www.runoob.com/nodejs/nodejs-tutorial.html

----安装效果-----如下：

3.4.2.webpack 的安装

1.查看自己node版本： node -v

2.全局安装Webpack： npm install webpack@3.6.0 -g

3.局部安装Webpack： cd 对应目录

npm install webpack@3.6.0 --save-dev

4.安装成功后，输入 webpack --version 可看到版本号既成功安装

3.5. webpack 的基本使用以及配置 webpack.config.js / package.json(scripts)

***通过 webpack 来生成打包文件在dist文件里 --- bundle.js文件在index.html文件直接引用 bundle.js 就可使用

3.6.loader 是webpack的核心概念 ---处理除 js 之外的代码之间的依赖如：css 、图片 .....

6.1 loader的使用过程： ---大部分loader 都可以在webpack官网找到的

*** 通过npm 安装需要使用的 loader
***在webpack.config.js 中的 modules 关键字下进行配置

特别注意：在使用loader的时候要注意版本兼容不然会出一些Error

3. 6.2 各类 loader

***style-loader 将模块的导出作为样式添加到 DOM 中

***css-loader 解析 CSS 文件后，使用 import 加载，并且返回CSS代码

***less-loader 加载和转译 LESS　文件

***sass-loader 加载和转译 SASS / SCSS 文件

***postcss-loader 使用PostCSS 加载和转译 CSS / SSS 文件

***stylus-loader 加载和转译 Stylus 文件

3.6.3 图片loader

文件大小：

小于limit 时：编译图片成 base 64 字符串形式

大于limit 时：需要使用file-loader模块进行加载

3.7. 配置 Vue 在webpack 里

*** npm 安装vue.js 模块化思想：

1.直接在Terminal 下安装: npm install vue@2.5.21 --save

2.在main 中引入
//5.使用Vue 进行开发
import Vue from 'vue'

const app = new Vue({
  el:'#app',
  data:{
    message:'你好!'
  }
})
 
3.挂载 Vue 在index.js 中

3.8. 在Vue开发中一般对HTML 文件不进行改变就 # app

***vue-loader

这个时候，就用template 如下： template部分会完全替代 HTML 中对应div 位置

new Vue ({

     el: '#app',
     template: ' <div id = "app">{{message}}<div> ',
     data:{
       message: 'wangyu'
}
})

3.9. plugin ---插件如添加版权信息、还有很多插件等

四、Vue CLI ---脚手架

4.1什么是CLI

***命令行界面 <Commmand-Line Inrerface > 俗称脚手架

*** Vue CLI 官方发布

*** CLI的依赖 webpack 、node 、npm

***安装CLI3、

--> 使用CLI2 模块

4.2. CLI2 初始化项目的过程

vue init webpack

4.3. CLI2 生成的目录结构解析

4.4. Vue-Router

***runtimecompile 和 runtimeonly 的区别 ----在面试时、可能会提问 runtime-compiler 和runtime-only 的区别

1. runtime-compiler : template -> ast -> render -> UI

2. runtime-only : render -> vdom -> UI ----runtime-only 1.性能更高 2.代码量更少

在以后开发中，使用的是.vue文件开发、则选 runtime-only 。

如果使用 template 则选用Runtime-compiler

*** render 函数*** 之后再重新捋一捋

4.5. ***Vue-CLI 3 脚手架安装以及使用

Manually select features ---手动选择样式特性

4.6.箭头函数

4.6.1.基本使用

<script>
  //箭头函数：也是一种定义函数的方式
  //1.定义函数的方式：function
  const aaa = function () {

  }
  //2.对象字面量中定义函数
  const obj = {
    bbb(){

    }
  }
  //3.ES6中的箭头函数
  // const ccc = (参数列表) => {
  //
  // }
  const ccc = () => {

  }

------------------------------------------------------
//1.参数问题
  //1.1 放入两个参数
  const sum = (num1,num2) =>{
    return num2+num1;
  }
  //1.2 放入一个参数  <一个参数时 括号可以不写>
  const power = num => {
    return num * num ;
  }
  //2. 函数代码块有多行代码时 正常写
  //2.1函数中代码块中只有一行代码时
  const mul = (num1,num2) => num1 * num2
  console.log(mul(29,30));

4.6.2.什么情况使用箭头函数-----将一个函数作为参数传给另外一个函数时使用

如：一般情况
setTimeout(function (){

},100)
------------------------使用箭头函数写法
setTimeout(() => {

})

4.6.3.箭头函数中的this 是如何查找的？--------向外层作用域中，一层层查找this，直到有this的定义

五、 Vue-Router

---路由（routing）通过互联网把信息从源地址传输到目的地址

5.1 路由：

5.2

前端渲染：由浏览器渲染，服务器发送信息
后端渲染：在服务器里渲染完成后<处理URL和页面之间的映射关系> 发送给浏览器
前后端分离阶段： Ajax出现前后端分离的开发模式

5.3 SPA页面

SPA:单页复应用整个网页只有一个HTML页面：在前后端分离的基础上加了一层前端路由
前端的核心----就是请求url 而不刷新整个网页

5.4 URL 的 hash

URL的hash -----就是锚点（#），本质上是改变window.location属性
直接赋值location.hash 来改变href，但是页面不发生刷新

history模式：

pushState 方法 ----类似与入栈、出栈。有历史记录

pushState（{}，‘’，‘home’）

replaceState 模式：

替换：就是直接替换----没有历史记录

history.replaceState( {} , ' ' , ' / foo ')

go 模式：

history.go( -1 ) = history.back() 浏览器返回一步

history.go( 1 ) = history.forward() 浏览器前进一步

5.5 Vue-router 的使用

第一步：创建路由组件

第二步：配置路由映射：组件和路径映射关系

第三步：使用路由：通过<router-link> 和 <router-view>

<router-link>-----显示组件

***属性：to ----用于指定跳转的路径

***属性：tag ---tag可以指定<router-link>之后渲染成什么组件，比如上面的代码会被渲染成一个<li>元素。不是<a>

***属性：replace --不会留下history记录，所有指定replace的情况下，后退键返回不能返回到上一个页面中。

***属性：active-class：当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class。

<router-view>----用于确定组件显示的位置在网页上

更改默认路径：

redirect 重定向

5.6 传递参数的方式：

Params 的类型： ***配置路由格式： / router / ：id

***传递的方式：在path后面跟上对应的值

***传递后形成的路径： / router / 123 ， / router /abc

query的类型： ***配置路由格式： / router ，也就是普通配置 <数据较多时使用>

***传递的方式：对象中使用query 的 key 作为传递方式

***传递后形成的路径： / router ？ id = 123，/ router ？ id = abc

$router 和 $route

这里有很多的东东没有理解、看也不清楚。遇到了，再回过头总结总结

六、TabBar实现思路：