Vue.js

基础

初始化

插值指令

Mustache

v-once

v-htmll

v-text

v-pre

v-cloak

v-bind绑定属性

缩写-> : v-bind绑定class v-bind绑定style

computed计算属性

计算属性的setter和getter

计算属性的缓存

mixin

默认属性值

    props: {
        show: {
            type: Boolean,
            default: false
        },
        user: {
            type: Object,
            default: () => {
                return {
                    name: 'xx',
                    tel: 'xxx',
                    qr: 'xxx',

                }
            },
            required: false
        }
    },

事件监听指令 v-on

添加事件监控 v-on修饰符 .stop .prevent .keyCode | keyAlias} once navtive v-on添加一个事件监听器

vue

<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转消息</button>

message: 'Hello Vue.js!'

methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }

条件渲染指令 v-if

v-if

v-else

v-else-if

v-show

循环遍历指令 v-for

Vue中key属性数组响应式方法 pusho popo shifto unshift splice sort reverse Vue.set修改响应式数据 v-if 和 v-for v-model v-model的修饰符 .lazy .number .trim

值绑定

动态的给value赋值 v-model 实现表单输入和应用状态之间的双向绑定

vue

<p>{{ message }}</p>
<input v-model="message">

message: 'Hello Vue!'

自定义指令

Vue.directive 注册全局指令侦听器 watch 数据变化时执行异步或开销较大的操作注意: watch 中的属性一定是data 中已经存在的数据过滤器 Vue.filter() 常见的文本格式化/处理 mixin 混入当多个组件中生命周期函数中有共同的代码,可以使用混入对象

生命周期 beforeCreate created beforeMount mouted beforeUpdate update beforeDestroy destroyed

VueRouter

Vue-Router是什么可实现路由跳转，组件切换 Vue-Router使用方法 //在index.js引入 import VueRouter from 'vue-router' Vue.use(VueRouter) Vue-Router基础安装vue-router：npm install vue-router 路由组件详解路由配置其他补充路由的默认路径路径的History模式 router-link的其他属性配置路由的属性编程式导航动态路由匹配动态路由匹配路由懒加载解释将路由对应的组件打包成一个个的JS代码块只有这个路由被访问到的时候, 才加载对应的组件使用 const Home = () => import('../components/Home.vue') 路由嵌套嵌套路由实现方法

创建组件
在路由映射规则中, 配置嵌套路由: children: [ { } ,{ } ]
在需要嵌套该组件的页面中, 使用 router-link 和 router-view

获取参数

query获取 $route.query 传递参数的方式 params query $router 和 $route的区别 $router是 VueRouter 实例，对路径相关导航操作 route是当前 path 映射的组件对象

导航守卫

路由元信息：通过 meta 定义路由元信息全局后置钩子：router.afterEach((to, from) => {}) 路由独享钩子函数：可以做一些单个路由的跳转拦截组件内钩子函数：更细粒度的路由拦截, 只针对一个进入某一个组件的拦截 keep-alive组件的页面缓存在路由跳转的时，不会保存页面当前的状态旧的组件会被销毁，新组件会被创建，再走一遍完整的声明周期 keep-alive组件的作用 keep-alive是 Vue 内置的一个组件可以使被包含的组件保留状态，或避免重新渲染 keep-alive组件的属性 inclue：值是字符串或正则表达，只有匹配的组件会被缓存 exclue：值是字符串或正则表达，任何匹配的组件都不会被缓存 keep-alive独有的生命周期 activated deactivated

Vuex

是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。用于开发大型单页应用，对于简单单页应用，使用store模式就可以

vuex安装方法

npm install vuex --save

State为什么被称为单一状态树因为用一个对象包含了全部层级状态 State 单一状态特点 state的改变完全由 mutations 控制 mapState的使用场景当一个组件需要获取多个状态时 Getters的作用当你需要对 State 进行计算、筛选、过滤时你可以把他看作Vuex的计算属性 Getters的参数 state getters 传递参数可以传递给getters参数 mapGetters mapGetters辅助函数仅仅是将store中的getter映射到局部计算属性 Mutation的状态更新 Vuex的 state 状态更新的唯一方式：提交Mutation Mutation主要包括哪两部分字符串的事件类型，也就是事件名/函数名一个回调函数，该回调函数第一个参数就是state Mutation接收哪些参数 state和payload

Mutation的提交方式

通过 commit 方式提交
通过 type 方式提交 Mutation 常量替换事件类型 Actions的基本定义 Action 提交的是 mutation , 而不是直接更改状态 Action 可以包含任意异步操作 Actions的的分发在Vue组件中，使用 dispatch 来调用 Action 中的方法 Action返回Promise 用来获取在 Action 中异步操作状态

参考文档

runoob

官网

vue常用命令

hello world 安装vue 安装vue-cli

shell

npm i -g @vue/cli --registry=https://registry.npm.taobao.org
npm i -g @vue/cli-init --registry=https://registry.npm.taobao.org

命令行创建vue.js 项目启动服务,编译测试打包发布

shell

npm run build

会在工程目录下新创建dist目录访问后端接口

优化打包体积

shell

npm run build -- --report

可在dist/report.html中找到文件

常用vue插件

vue-pdf 实现pdf文件在线预览 https://www.jianshu.com/p/a640ce9d4882

vue-qr 生成二维码，中间可以放头像 https://www.jianshu.com/p/724706e2ca9f

使用webstorm调试vue项目的方法

npm run serve

创建JavaScript Debug,配置URL,enable breakpoints

Vant是什么

https://vant-contrib.gitee.io/vant/#/zh-CN/

是一套轻量、可靠的移动端组件库。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。Vant 是有赞前端团队开源的移动端组件库，于 2017 年开源

Vue Loader是什么

是一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件

初始化工程

安装

常用命令

bash

cnpm install --save axios vue-loader vuex less less-loader vue-route  sass-loader core-js

cnpm install --save style-loader vue-template-compiler

bash

 cnpm install --save babel-loader
 cnpm install --save babel-loader@7
 cnpm install --save vue-style-loader

Module build failed: TypeError: this.getOptions is not a function

npm install sass-loader@7.3.1 --save-dev

降低版本号

To install it, you can run: npm install --save !!vue-style-loader!css-loader?{"sourceMap":true}!../.

bash

npm install less less-loader --save-dev

安装less后报错：Module build failed: TypeError: this.getOptions is not a function at Object.

bash

npm install less-loader@5.0.0 --save-dev

package.json

--save-dev 会保存到devDependencies
--save 会保存到dependencies

目录结构

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：assets: 放置一些图片，如logo等。components: 目录里面放了一个组件文件，可以不用。App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。main.js: 项目的核心文件。
static	静态资源目录，如图片、字体等。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式
.browserslistrc
.editorconfig	eslint检查忽略的配置
.eslintrc.js	eslint检查的配置
babel.config.js
vue.config.js
.babelrc	babel的配置文件

vue中链接中不带#

new Vue({
    mode: 'history',
    router,
    render: h => h(App)
}).$mount('#app')

mode: 'history' 在部署目录下配置web.config(iis服务器)

xml

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="F5刷新404的错误" patternSyntax="Wildcard">
                    <match url="*" />
                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/xxx/xxx/index.html" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

参考 https://www.cnblogs.com/goloving/p/9147551.html

函数式编程

主要思想是把运算过程尽可能写成一系列嵌套的函数并进行调用。常见的编程范式有命令式编程、函数式编程、面向对象编程、指令式编程等。函数既可以被赋值给一个变量，也可以作为参数传递，或者作为一个返回值返回。
命令式编程是告诉计算机具体工作步骤。函数式编程是将程序的描述与求值分离，关注如何用表达式描述程序逻辑。
函数式编程旨在帮助我们编写干净的、模块化的、可测试的、简洁的代码，提高代码的无状态性和不变性。它遵循以下原则：声明式（Declarative）、纯函数（Pure Function）、数据不可变性（Immutability）。
函数式编程的优点：可以把任务分解成简单的函数；接近自然语言，方便理解；更容易的代码管理；
函数式编程的原则之一是纯函数，即状态不受外部因素的影响，同时不会改变外部状态。只要传入的参数相同，得到的结果一定是相同的。也就是说，每个函数都是独立的，测试会变得非常轻松。

Vue.js ​

基础 ​

mixin ​

默认属性值 ​

事件监听指令 v-on ​

条件渲染指令 v-if ​

循环遍历指令 v-for ​

值绑定 ​

自定义指令 ​

VueRouter ​

获取参数 ​

导航守卫 ​

Vuex ​

参考文档 ​

vue常用命令 ​

​

常用vue插件 ​

​

使用webstorm调试vue项目的方法 ​

Vant是什么 ​

Vue Loader是什么 ​

初始化工程 ​

目录结构 ​

vue中链接中不带# ​

函数式编程 ​

Vue.js

基础

mixin

默认属性值

事件监听指令 v-on

条件渲染指令 v-if

循环遍历指令 v-for

值绑定

自定义指令

VueRouter

获取参数

导航守卫

Vuex

参考文档

vue常用命令

常用vue插件

使用webstorm调试vue项目的方法

Vant是什么

Vue Loader是什么

初始化工程

目录结构

vue中链接中不带#

函数式编程