vue

https://cn.vuejs.org/index.html

需要你做一下预习：https://cn.vuejs.org/v2/guide/index.html

数据驱动。如果我们要改变页面效果，不再需要直接操作dom元素，只需要改变数据就好。数据改变之后框架会自动的帮我们进行页面更新。

历史

js最初的出现就是为了解决一个页面中弹出一个提示，或者做一个简单的计算。当时的环境下，浏览器可用的内存很小，为了解决这些问题，js语言必须简单、没有太复杂的数据结构、占用内存小。

但是随着时间的发展，网页的功能越来越复杂，需要的交互越来越多，js需要做的事情就更多。随着时代的发展，浏览器的厂家也越来越多，每家浏览器对js语法的支持也不一样。ECMA这个组织，建立一个统一的标准，在不停的制定一些语言语法的规范。

语言在发展的过程中，会吸取或者借鉴一下同行的一些优势，来完善自身。

为了解决业务场景的复杂化，出现了很多框架或者开发模式：

jQuery是前期出现的一个神级的插件，它提供了一个标准的元素选择方案，让我们可以快速的做元素选择。选中之后做后序的各种操作。它统一了各个浏览器中js语法的差异，使用jQuery写代码就不需要考虑各个版本浏览器中语法的差别

MVC框架Backbone，是早期经典的前端开发框架(jQuery+underscore.js+backbone.js+require.js)；做SPA单页面应用程序开发

angular.js，是google的。分为两类：angular.js和angular

react.js，是facebook出的框架，目前是全球使用最广泛的。国内十家公司的react可能有十种写法

vue.js，是一个个人项目，目前是国内使用比较广泛的。国内十家公司的vue只能有一种写法

基础api

v-model
作用是实现页面中表单元素和data数据的双向绑定。是一个语法糖，相当于绑定了表单元素的input事件和value值。当输入框的值变化的时候data中的数据跟着变化。实现的原理是Object.defineProperty
可以添加修饰符：number(转换为数字)、trim(去空格)
v-bind
作用是绑定标签的属性，可以简写为:
绑定样式的时候可以为样式写成对象的形式：属性名表示样式名，属性值为bool值，如果值为true表示这个样式生效，否则这个样式效果无效
v-html
是绑定一个富文本内容，相当于设置innerHTML属性
v-text
相当于设置innerText属性
v-on
作用是事件绑定，可以简写为@符号。在vue中绑定事件的时候只写事件名字就好
处理键盘事件的时候可以加修饰符，具体的可用修饰符可以参考官网https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6
最常用的一个按键修饰符是enter
v-for
循环遍历，展示数据。是以后用到的最多的一个指令
可以对数组，数字，字符串，对象这些数据做循环
<ul>

<li v-for="(item, index) in list" :key="item.id">{{index}}-{{item}}</li>
</ul>
v-if
是直接删除或者插入标签
v-show
是控制标签的display属性
在实际使用的时候v-show的性能更高一些，建议使用
filter
过滤器，作用是对数据做过滤显示
watch
监听数据的变化，数据改变之后会触发一些列其他的操作
watch的应用场景：一个数据改变之后引起的一些列其他连锁反应
computed
当依赖的数据改变之后重新计算一个结果。计算属性具有缓存功能，当依赖数据没有改变的时候不会重新计算
计算属性和方法调用的区别：
方法调用需要加括号，计算属性不用
方法调用每一次页面更新的时候都会执行
计算属性只有在依赖的数据改变的时候才会执行
有两种写法：
...
computed: {
val1() {
return 'xxx'
},
val2: {
set(v) {

},
get() {
return ......
}
}
}
...
计算属性的应用场景：多个数据改变之后引起的一个计算结果
组件
组件是vue中很重要的一个东西，是vue项目的主要组成部分。组件可以理解为自定义标签

组件定义
组件定义的时候有常见的两种：局部组件和全局组件

局部组件
局部组件在使用的时候需要先进行注册，使用components属性进行注册
const hello = {
template: ``//....
}
全局组件
可以直接使用不需要注册
Vue.component('xx', {
template: ''
})

组件嵌套
组件中可以调用另一个组件。组件之间时可以相互嵌套的，在使用之前也是需要先注册
生命周期
生命周期里面包含很重要的一个东西叫生命周期钩子函数。就是在组件存在的周期中，在不同的时间点执行的函数

生命周期钩子函数
分为四个阶段

创建

beforeCreate
created【重要】
组件创建成功之后执行，主要用来在这个钩子函数中调接口取数据

挂载

beforeMount
mounted【重要】
挂载成功之后执行，在这个钩子函数中可以获取组件的dom元素
可以使用$el属性获取当前组件的dom元素

更新

beforeUpdate
updated

销毁

beforeDestroy
destroyed

更新阶段的钩子函数是在组件存在的周期中重复执行的，其他六个都是只执行一次。在更新阶段不能改变数据，数据改变会引起死循环。因为数据或者属性改变的话组件会触发更新阶段的钩子函数
嵌套组件的生命周期函数执行顺序
在嵌套组件中，当执行到父组件的挂载之前的时候，会执行所有子组件的创建到挂载完成的钩子函数。当子组件都挂载完成之后会执行父组件的挂载完成函数
keep-alive动态组件
activitedkeep-alive 专属，组件被激活时调用，deactivatedkeep-alive 专属，组件被销毁时调用，

传参
三种形式：
父传子(从外往内)
属性props
子传父(从内往外)
事件派发，在vue中使用$on添加一个事件，使用$emit派发一个事件
非相关组件(平行组件)
事件总线或者vuex
事件总线是一个开发思想或者一种开发模式。
在vue中，定义一个空白的vue实例，它什么都不干，就做一件事情，事件派发和监听

component动态组件
是vue中的一个内置标签，可以通过is属性控制当前显示的组件
slot插槽
可以理解为占位符，这个位置我们先占了，放什么以后再说
插槽分为一般插槽和具名(有名字的插槽，加了name属性)插槽
<div id="app">
<home>
<template #end>
<h2>你草率了，我才是最后一行</h2>
</template>
<h3>我是展示在slot中的内容</h3>
<h2>我也是</h2>
</home>
</div>
<script src="./libs/vue.js"></script>
<script>
// slot表示插槽，就是占位符，这个位置我们先占了，放什么以后再说
const home = {
template: `<div class="home">
<h1>我是首页</h1>
<slot></slot>
<p>我是一段文字介绍</p>
<p>这里应该是最后了</p>
<slot name="end"></slot>
</div>`,
};
new Vue({
el: '#app',
components: { home },
});
</script>
keepalive
keepalive就是保证这个组件一直在不销毁，只要组件创建了就不会被销毁

include
包含，为每一个组件设置一个name属性。在include的时候写上这个属性值，表示keep-alive的时候包含这个组件。include表示包含，多个用,隔开
exclude
exclude表示不包含，多个用,隔开

在设置了keep-alive的时候，页面切换的场景下会触发这两个钩子函数：activated和deactivated
单文件组件
我们在实际开发的时候vue中的组件都是被定义为一个一个单独的文件的，每一个文件都是.vue结尾的，每一个.vue文件就是一个单独的组件。每一个组件中包含有html、js、css他们都是独立针对这个组件的。
<template>
<div>
<h1>这是一个组件</h1>
</div>
</template>
<script>
export defaule {
....
}
</script>
<style scoped>
/* scoped表示只在当前组件内有效 */
</style>
因为浏览器是只认识html、css和js文件的，不认识.vue文件，所以我们需要借助插件对vue文件进行编译，生成js代码。这个需要配合webpack和使用一个vue-loader的加载器。这些知识作为了解，知道就行。
webpack是一个前端自动化模块打包工具

脚手架

https://cli.vuejs.org/zh/

npm install -g @vue/cli # 全局安装vue脚手架，希望你成功

刚才我初始化项目时选择的内容

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

翻译之后的中文版本

? Please pick a preset: Manually select features(选择使用手动方式创建项目)
? Check the features needed for your project: Choose Vue version, Babel, CSS Pre-processors, Linter(我现择了四项：1. 手动选择vue的版本【必选】，2.安装babel【必选】，3.css预处理，后面可以选择使用sass或者less等预处理语言，4.选择了代码规范性检测，写代码不符合规范时报错)
? Choose a version of Vue.js that you want to start the project with 2.x(选择vue2)
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)（选择使用sass）
? Pick a linter / formatter config: Basic（选择lint规范性检测的基础配置）
? Pick additional lint features: Lint on save（在保存的时候检测代码）
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files（把每一个插件的配置文件单独放置）
? Save this as a preset for future projects? No（以后都不使用这种配置）

npm的配置文件，路径在windows的c:/users/你的用户名/.npmrc

registry=https://registry.npm.taobao.org/
init.author.email=你的邮箱
init.author.name=你的名字
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

路由

vue中的路由插件，路由的作用是实现页面跳转。简单点理解就是再浏览器中访问指定的地址的时候展示的组件或者页面内容

https://router.vuejs.org/zh/

路由分两种模式：hash和history

区别：hash浏览器支持性好，不需要做额外的配置，可以直接使用；history模式再发布的时候需要做特殊的设置，在web服务器上做了配置之后才能使用；hash模式的路由，地址路径中有#进行分割，#后面的表示路径，history模式中没有#

安装

npm i vue-router # 安装路由插件

使用

import Vue from 'vue'
import VueRouter from 'vue-router'
// 可以直接再组件中使用router-view和router-link等路由内置组件和对象($route和$router)
Vue.use(VueRouter)
const router = new VueRouter({
    routes: [] // 路由表，或者叫路由数据，就是我们网文指定地址时候展示的组件
})

router-view，路由对应的组件展示的位置。相当于一个容器，用来展示路由地址对应的组件
router-link，生成跳转链接
$route，就是路由数据对象
$router，就是路由对象，可以获取路由上的属性和方法，实现编程式跳转

路由传参

query，query传参是在url地址中传递参数，在url后面跟在?之后，页面刷新之后参数还在
params，页面刷新之后参数就没了。如果想让页面刷新之后参数还在，需要在路由设置的时候配置占位符

参数传递之后，在对应的页面使用$route属性可以直接获取参数

路由拦截和路由守卫

https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E7%BB%84%E4%BB%B6%E5%86%85%E7%9A%84%E5%AE%88%E5%8D%AB,抽空了看看

beforeEach

afterEach

路由嵌套

children

命名视图

在一个组件中放多个router-view,通过name属性进行命名指定

在定义路由的时候使用components属性指定展示的组件，可以通过设置属性名为router-view的name属性，属性值为对应的组件的方式实现

new Router({
    routes: [{
        path: '/demo',
        name: 'Demo',
        components: {
            default: ()=>import('.....'),
            first: ()=>import('...')
        }
    }]
})

路由守卫其他的

https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E7%BB%84%E4%BB%B6%E5%86%85%E7%9A%84%E5%AE%88%E5%8D%AB

beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
},

vue中的其他API

https://cn.vuejs.org/v2/api/#%E5%85%A8%E5%B1%80-API

$refs
获取所有设置了ref属性的标签
我们可以通过它获取子组件中的数据和方法
$el
可以获取组件的dom元素
$root
表示根组件
$nextTick
dom元素更新成功之后的回调函数
vue中的dom更新是异步的

ui组件库

vant
https://vant-contrib.gitee.io/vant/#/zh-CN/
npm i vant -S # 安装依赖项import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);
element-ui
npm i element-ui # 安装依赖
使用
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
el: '#app',
render: h => h(App)
});
https://github.com/PanJiaChen/vue-admin-template 管理后台模板
解决node-sass安装失败的问题
# 设置node-sass的下载路径
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/

vuex

https://vuex.vuejs.org/zh/

vuex是vue中的一个状态管理插件，通俗的讲就是一个全局的数据管理工具。作用是实现项目中数据的集中式管理。

vuex是遵循单向数据流机制的：就是数据是单向流动的，分为三部分(view,state,action)

view表示视图
state表示数据
action表示行为

在view视图中，通过dispatch派发一个action改变数据，数据改变之后view视图重新渲染

vuex中的核心模块

state
数据，所有的数据存储的地方
mutations
改变数据的地址，所有的数据改变都在这里进行。每一次数据的变化都会被vue-devtools记录下来
actions
行为，用来处理异步操作。在actions中，也能改变数据，但是不建议这样做。因为所有的数据改变都是需要可以追踪到，就是被记录下来。所以必须在mutations中改变数据
modules
模块拆分
getters
相当于计算属性

vuex中的数据流向：在组件中通过dispatch派发一个action，在action中获取数据，然后通过commit提交一个mutation改变数据，数据改变之后组件重新渲染

api

他们可以接收的参数为:

mapXxx('命名空间', [数组])
mapXxx('命名空间', {对象})
如果没有命名空间空间参数，表示获取根节点上的内容

mapState
作用是把state数据映射到组件的计算属性上
mapMutations
作用是把mutation数据映射到组件的methods上
mapActions
作用是吧action数据映射到组件的methods上

你有没有用过vuex？

两种回答方式：

用过，给他讲讲单向数据流和vuex中的数据流向
没有，我们项目中用不上。跨组件传参我们使用事件总线

vuex不是项目开发的时候必选的一个插件，但是在需要用的时候你要知道它的存在，它的作用就是显示数据在不同的组件之间进行共享的。

项目

手机app

管理后台

面试题和其他内容

https://lurongtao.gitee.io/felixbooks-interview2/

插件

animate.css
https://animate.style/
动画库
moment
日期格式化插件
http://momentjs.cn/
nprogress
进度条插件
swiper
轮播图
https://swiperjs.com/
https://www.swiper.com.cn/
wangEditor
富文本编辑器
https://www.wangeditor.com/
https://github.com/wangeditor-team/wangEditor
awesome-vue
vue的各种资源汇总
https://github.com/vuejs/awesome-vue
vue-clipboard2
复制到剪切板
echarts
数据可视化，图表插件
https://echarts.apache.org/zh/index.html
https://v-charts.js.org/#/ （echarts的vue封装）,v-charts目前不支持echarts5，需要重新安装4.x的echarts
datav
数据可视化的图表插件
http://datav.jiaminghi.com/

vue配置优化

vue.config.js,所有的相关配置信息都在vue-cli的官网上:https://cli.vuejs.org/zh/config/#vue-config-js

https://webpack.docschina.org/ webpack官网，作为了解

module.exports = {
  publicPath: "./", // 表示打包之后资源文件的加载路径
  // 再做性能优化的时候，需要做到
  /**
   * 1. 路由文件的懒加载,使用 ()=> import('xxx')的方式引入,可以把路由组件单独打包成js文件，在需要使用的时候再引入
   * 2. 使用cdn的方式引入第三方资源库
   *
   * **/
  // configureWebpack，对webpack工具做额外的设置
  configureWebpack: {
    externals: {
      // 属性名是js源代码中引入的时候使用的包名，属性值是引入js文件后再浏览器中可以直接使用的名字
      vue: "Vue",
      vuex: "Vuex",
      "vue-router": "VueRouter",
      axios: "axios",
      "element-ui": "ELEMENT",
    },
  },
  // 脚手架内置了一个node的开发服务器，可以直接让我们通过网络路径访问代码
  devServer: {
    // port: 998, // 改变开发服务器的端口号
    proxy: {
      // 访问以/api开头的地址时做一个代理转发
      // 代理只有再开发的时候有用，打包之后就没用了
      "/api": {
        target: "https://papi.jiemian.com/page/api", // 目标服务器
        ws: true, // 开启ws
        changeOrigin: true, // 改变origin
        pathRewrite: { "^/api": "" }, // 路径重写，把/api替换成空白
      },
    },
  },
};

nuxt

是一个基于vue语法的服务器端渲染(SSR)框架。使用vue语法编写多页面应用程序，就是每一次路由跳转打开的都是一个新的html文件。它解决了SPA单页面应用程序的一个通病（最怕刷新）。

https://www.nuxtjs.cn/

yarn

yarn是facebook出的一款包管理工具，和npm一样的功能

https://yarnpkg.com/

安装使用

npm i yarn -g # 全局安装yarn
yarn add xx # 安装模块，相当于 npm i xx
yarn remove xx # 删除模块，相当于 npm uninstall xx

nuxt上线

.nuxt打包文件、nuxt.config.js配置文件、package.json依赖配置文件、static静态文件放在服务器

vue2笔记（vue2.0教程）

vue

历史

基础api

脚手架

路由

安装

使用

路由传参

路由拦截和路由守卫

路由嵌套

命名视图

路由守卫其他的

vue中的其他API

ui组件库

vuex

vuex中的核心模块

api

项目

面试题和其他内容

插件

vue配置优化

nuxt

yarn

nuxt上线

相关推荐

取消回复欢迎你发表评论:

Google 黑客常用搜索语句一览原力计划

npx简介（npxvip是哪国的）

在 Android 模拟器上运行 ARM 应用（android模拟器原理）

GB28181,B接口协议之SIPRTSPRTPRTMP协议从入门到精通

手机实时提取SIM卡打电话的信令和声音-辅助外设与商用通话方案

安装使用Hoppscotch构建API请求访问与测试

轻松转换!AppleNumbers到Excel的快捷教程

Python自动化办公——后台截图（python 自动截图）

电脑端腾讯文档如何导出excel

网络流媒体经典开源软件宝典webRTC, FFMpeg, SIP_流媒体开发教程

vue2笔记（vue2.0教程）

vue

历史

基础api

脚手架

路由

安装

使用

路由传参

路由拦截和路由守卫

路由嵌套

命名视图

路由守卫其他的

vue中的其他API

ui组件库

vuex

vuex中的核心模块

api

项目

面试题和其他内容

插件

vue配置优化

nuxt

yarn

nuxt上线

相关推荐

取消回复欢迎 你 发表评论:

Google 黑客常用搜索语句一览 原力计划

npx简介（npxvip是哪国的）

在 Android 模拟器上运行 ARM 应用（android模拟器原理）

GB28181,B接口协议之SIPRTSPRTPRTMP协议从入门到精通

手机实时提取SIM卡打电话的信令和声音-辅助外设与商用通话方案

安装使用Hoppscotch构建API请求访问与测试

轻松转换!AppleNumbers到Excel的快捷教程

Python自动化办公——后台截图（python 自动截图）

电脑端腾讯文档如何导出excel

网络流媒体经典开源软件宝典webRTC, FFMpeg, SIP_流媒体开发教程

取消回复欢迎你发表评论:

Google 黑客常用搜索语句一览原力计划