vue的学习笔记总结

<meta charset="utf-8">

1.常用名词

npm:包管理器，用于下载资源包

vue-router:vue推荐的路由框架

vuex: 状态管理器，用于维护vue组件间公用的一些变量和方法

axios:用于发起get，post请求

vux:基于vue的移动端UI库

webpack:打包器

2.npm常用命令

npm install

npm run dev

npm run build

npm run build --report(用于查看vue_cli生产环境部署资源资源文件大小的npm命令)

3.vue-cli目录解析：

1. build 文件夹：用于存放 webpack 相关配置和脚本。开发中仅 偶尔使用 到此文件夹下 webpack.base.conf.js 用于配置 less、sass等css预编译库，或者配置一下 UI 库。
2. config 文件夹：主要存放配置文件，用于区分开发环境、线上环境的不同。 常用到此文件夹下 config.js 配置开发环境的 端口号、是否开启热加载 或者 设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包生成静态资源的名称和路径等。
3. dist 文件夹：默认 npm run build 命令打包生成的静态资源文件，用于生产部署。
4. node_modules：存放npm命令下载的开发环境和生产环境的依赖包。
5. src: 存放项目源码及需要引用的资源文件。
6. src下assets：存放项目中需要用到的资源文件，css、js、images等。
7. src下componets：存放vue开发中一些公共组件：header.vue、footer.vue等。
8. src下emit：自己配置的vue集中式事件管理机制。
9. src下router：vue-router vue路由的配置文件。
10. src下service：自己配置的vue请求后台接口方法。
11. src下page：存在vue页面组件的文件夹。
12. src下util：存放vue开发过程中一些公共的.js方法。
13. src下vuex：存放 vuex 为vue专门开发的状态管理器。
14. src下app.vue：使用标签<route-view></router-view>渲染整个工程的.vue组件。
15. src下main.js：vue-cli工程的入口文件。
16. index.html：设置项目的一些meta头信息和提供<div id="app"></div>用于挂载 vue 节点。
17. package.json：用于 node_modules资源部 和 启动、打包项目的 npm 命令管理。

4.vue.js的两个核心是什么？

数据驱动，也叫双向数据绑定。(getter和setter)

组件系统。

5.对于 Vue 是一套 构建用户界面 的 渐进式框架 的理解

在声明式渲染（视图模板引擎）的基础上，我们可以通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。更重要的是，这些功能相互独立，你可以在核心功能的基础上任意选用其他的部件，不一定要全部整合在一起。可以看到，所说的“渐进式”，其实就是Vue的使用方式，同时也体现了Vue的设计的理念

6.vue常用指令

v-if

v-show

v-for

v-bind(动态地绑定一个或多个特性)

v-on(用于监听指定元素的DOM事件，比如点击事件)

v-model

v-pre(跳过这个元素和它的子元素的编译过程。)

v-once(只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。)

7.v-if 和v-show的区别

都是动态显示DOM

v-if是真正的条件渲染，v-show只是简单的改变元素的display属性

v-if适合运行时，条件很少改变的场景，v-show适合运行时条件频繁改变的 场景

8.vue常用修饰符

.stop

.prevent

.capture（默认在冒泡阶段中监听事件，使用v-on:click.capture后，在捕获阶段中监听事件）

.self

.{keyCode | keyAlias} (只当事件是从特定键触发时才触发回调)

.native监听组件根元素的原生事件

.once

.left

.right

.middle

.passive(表示处理事件函数中不会调用preventDefault函数，就会减少了额外的监听，从而提高了性能；)

.number 输入字符串转为数字

.trim 输入首尾空格过滤

9.v-on可以监听多个方法吗

可以

<input type="text" :value="name" @input="onInput" @focus="onFocus" @blur="onBlur" />

<a href="javascript:;" @click="methodsOne" @click="methodsTwo"></a> 只响应methodsOne

10.vue中key值得作用

用于管理可复用的元素。因为vue会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。

<input placeholder="Enter your username" key="username-input"> key值相同的，就不会重新渲染，key值不同的，则会重新渲染

11.vue-cli工程升级vue版本

npm-check-updates 升级插件

首先安装插件npm install npm-check-updates -g

然后在待升级工程的目录结构下，命令行输入：ncu

然后升级所有版本，命令行输入：ncu -a

再输入：npm install

12.vue事件中如何使用event对象

<a href="javascript:void(0);" data-id="12" @click="showEvent($event)">event</a>

showEvent(event){ //获取自定义data-id console.log(event.target.dataset.id) //阻止事件冒泡 event.stopPropagation(); //阻止默认 event.preventDefault() }

13.$nextTick的使用

因为Vue的异步更新队列，$nextTick是用来知道什么时候DOM更新完成的。

使用方法：

写在methods中

this.$nextTick(function(){ var text = document.getElementById('div').innnerHTML; console.log(text); });

14.vue组件中data为什么必须是函数

由于原生js的构造函数、原型链特征决定的，如果不是每个组件都返回自己的data,组件之间的数据，就会互相干扰，这是不符合业务需求的

15.v-for与v-if的优先级

当他们处于同一节点，v-for的优先级比v-if的优先级高

<li v-for="todo in todos" v-if="!todo.isComplete"> {{ todo }} </li>

16. vue中子组件调用父组件的方法

通过父组件v-on 监听 和 子组件$emit触发来实现：

父组件：

<template> <div class="fatherPageWrap"> <h1>这是父组件</h1> <emitChild v-on:emitMethods="fatherMethod"></emitChild> </div> </template> <script type="text/javascript"> import emitChild from '@/page/children/emitChild.vue'; export default{ data () { return {} }, components : { emitChild }, methods : { fatherMethod(params){ alert(JSON.stringify(params)); } } } </script>

子组件：

<template> <div class="childPageWrap"> <h1>这是子组件</h1> </div> </template> <script type="text/javascript"> export default{ data () { return {} }, mounted () { //通过 emit 触发 this.$emit('emitMethods',{"name" : 123}); } } </script>

17.vue中keep-alive组件的作用

keep-alive：主要用于保留组件状态或避免重新渲染。

include:字符串或正则表达式。只有匹配的组件会被缓存。

exclude：字符串或正则表达式。任何匹配的组件都不会被缓存。

例子：

<keep-alive> <component :is="view"></component> </keep-alive>

<keep-alive include="a,b"> <component :is="view"></component> </keep-alive>

<keep-alive :include="/a|b/"> <component :is="view"></component> </keep-alive>

<keep-alive :include="['a', 'b']"> <component :is="view"></component> </keep-alive>

18.vue中编写可复用的组件

prop：允许外部环境传递数据给组件

事件：允许组件触发外部环境的action

slot：允许外部环境将内容插入到组件的视图结构内

注：（单个插槽，多个插槽也叫具名插槽，作用域插槽）

作用域插槽：使用时候子组件标签<Child>中要有<template scope=”scopeName”>标签，再通过scopeName.childProp就可以调 用子组件模板中的childProp绑定的数据，所以作用域插槽是一种子传父传参的方式，解决了普通slot在parent中无法访问child数据的去问题；

19.vue生命周期有关的试题

注意：

（1）mounted、updated不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用vm.$nextTick 替换掉mounted、updated：

（2）http请求建议在 created 生命周期内发出

[图片上传失败...(image-25eef6-1551234683562)]

20.vue如何监听键盘事件中的按键?

<input v-on:keyup.13="submit">

<input v-on:keyup.enter="submit">

自定义按键修饰符

// 可以使用 v-on:keyup.f1 Vue.config.keyCodes.f1 = 112

<button @click.ctrl.exact="onCtrlClick">A</button>

21.vue更新数组时触发新视图更新的方法

变异方法会自动触发视图更新：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

非变异方法，不会自动触发视图更新：

filter(), concat()和 slice()

想要触发视图更新，可以用新数组替换旧数组：

example1.items = example1.items.filter(function (item) { return item.message.match(/Foo/) })

22.v-model语法糖的使用

语法糖：就是一种简便写法

父组件中：v-model="ifShow" data(){return {ifShow:true,}}

子组件中：this.$emit('input',false);//传值给父组件, 让父组件监听到这个变化

23.vue中对于对象的更改检测

vue中不能检测对象的添加或删除

所以，可以使用如下方法：

vue.set(object,key,value) eg:Vue.set(vm.userProfile, 'age', 27)

vm.$set(vm.userProfile, 'age', 27)

同时添加多个属性：

vm.userProfile = Object.assign({}, vm.userProfile, { age: 27, favoriteColor: 'Vue Green' })

24.解决非工程化项目，在网速慢时初始化页面闪动的问题

<div id="app" v-cloak> {{message}} </div>

[v-cloak]{ display:none; }

25.v-for产生的列表，实现active的切换

<li @click="currentIndex = index" v-bind:class="{clicked: index === currentIndex}" v-for="(item, index) in desc" :key="index"> <a href="javascript:;">{{item.ctrlValue}}</a> </li>

26. 过滤器

filter/filter.js：

function filterOne(n){ return n + 10; } function filterTwo(n){ return n + 5; } export{ filterOne, filterTwo }

main.js：

// 找 filter/filter.js import * as filters from './filter/filter.js' //遍历所有导出的过滤器并添加到全局过滤器 Object.keys(filters).forEach((key) => { Vue.filter(key, filters[key]); })

在 .vue 组件下使用

{{test | filterOne}}

27.vue等单页面应用及其优缺点

优点：

不需要重新加载整个页面，就不会出现白屏现象，和闪烁现象

对服务器的压力小，服务器只管出数据就可以了，不用管展示逻辑和页面合成

良好的前后端分离，后端不用负责模板的渲染

缺点：

首次加载耗时较多

不利于seo

28.vue的计算属性

<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div>

var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // this 指向 vm 实例 return this.message.split('').reverse().join('') } } })

29.vue提供的几种脚手架模板

可以先用vue-list命令查询可用的模板

vue-cli提供的常用模板：

webpacke(常用)

webpac-simple

browerify

browerify-simple

simple

30.vue父组件向子组件通过props传递数据

父：

<blog-post title="My journey with Vue"></blog-post>

<blog-post v-bind:title="post.title"></blog-post>

子：

export default { props : ["title"] } //或者 export default { props : { title:{ type:string, default:"" } } }

31.vue中使用全局常量

第一步，在 src 下新建 const 文件夹下 新建 const.js

第二步，如何在 const.js 文件下，设置常量

第三步，在 main.js 下全局引入：

第四步，即可在 .vue 组件中使用：

32.vue-cli生产环境使用全局常量

第一步，在 static 下新建 config.js：

第二步，在 config.js 里面设置全局变量：

第三步，在 index.html 里面引入：

第四步，在其他 .js 文件中即可使用：

第五步，打包后修改：通过 npm run build 命令打包后，此 config.js 文件会被打包到 dist/static文件夹下，此时如果需要修改 PUBLIC_IP，打开config.js即可修改，无需重新打包！

33.vue弹窗后如何禁止滚动条滚动

methods : { //禁止滚动 stop(){ var mo=function(e){e.preventDefault();}; document.body.style.overflow='hidden'; document.addEventListener("touchmove",mo,false);//禁止页面滑动 }, /取消滑动限制/ move(){ var mo=function(e){e.preventDefault();}; document.body.style.overflow='';//出现滚动条 document.removeEventListener("touchmove",mo,false); } }

34.计算属性的缓存和方法的调用的区别

1. 计算属性是基于它的依赖缓存的。一个计算属性所依赖的数据发生变化时，它才会重新取值。
2. 使用计算属性还是methods取决于是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性，除非你不希望得到缓存。
3. 计算属性是根据依赖自动执行的，methods需要事件调用。

35.父组异步获取动态数据传递给子组件

利用v-if可在http请求返回后再显示。这样子组件可以返回的http请求数据。

36.vue-router响应 路由参数的变化

方法一：

const User = { template: '...', watch: { '$route' (to, from) { // 对路由变化作出响应... } } }

方法二：

const User = { template: '...', beforeRouteUpdate (to, from, next) { // react to route changes... // don't forget to call next() } }

37.解决跨域问题

1、 vue-cli项目中通过node.js代理服务器来实现跨域请求

2、在服务器响应客户端的时候，带上 Access-Control-Allow-Origin:* 头信息 [推荐使用]

3、通过 jquery 的 jsonp 形式解决跨域问题

方法一：

1、在vue-cli项目中的 config 文件夹下的 index.js 配置文件中，配置 dev对象的 proxyTable对象，可通过node.js的代理服务器来实现跨域请求。

dev: { env: require('./dev.env'), port: 8080, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: {}, cssSourceMap: false }

2.以 java 代码为例，设置 http 请求的响应头，推荐使用：

3.jQuery设置ajax请求跨域

$.ajax({ url:'...../data.js',//可以不是本地域名 type:'get', dataType:'jsonp', //jsonp格式访问 jsonpCallback:'aa' //获取数据的函数 })

38. vue中使用模拟数据jsonp

第一步，在新建目录：src/service/tempdata下新建 test.js 文件，存放 本地JSON 数据：

export const meeting = { "data": [ { "name": "列表1", "nameId": "123"}, {"name": "列表2", "nameId": "234"} ] };

第二步，在新建目录：src/service/getData.js下引入使用 ：

//1、引入 import * as meeting from './tempdata/meeting' //2、设置 JSON 模拟数据函数 const setpromise = data => { return new Promise((resolve, reject) => { resolve(data) //如果修改为 reject(data)，则下面使用时，走 .catch 方法 }) } //3、使用 var Meeting = () => setpromise(meeting.meeting); //4、导出 export{ Meeting }

第三步，在 .vue 文件中使用：

<script type="text/javascript"> //1、引入 import { Meeting } from '../service/getData' //2、即可在 生命周期钩子函数 或者 methods 方法里面使用了 export default{ mounted(){ Meeting().then(res => { //res为模拟数据 console.log(res) }).catch(err => { console.log(err) }) } } </script>

39.axios的使用方法

axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });