vue的学习笔记总结
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目录解析：
- build 文件夹：用于存放 webpack 相关配置和脚本。开发中仅 偶尔使用 到此文件夹下 webpack.base.conf.js 用于配置 less、sass等css预编译库，或者配置一下 UI 库。
- config 文件夹：主要存放配置文件，用于区分开发环境、线上环境的不同。 常用到此文件夹下 config.js 配置开发环境的 端口号、是否开启热加载 或者 设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包生成静态资源的名称和路径等。
- dist 文件夹：默认 npm run build 命令打包生成的静态资源文件，用于生产部署。
- node_modules：存放npm命令下载的开发环境和生产环境的依赖包。
- src: 存放项目源码及需要引用的资源文件。
- src下assets：存放项目中需要用到的资源文件，css、js、images等。
- src下componets：存放vue开发中一些公共组件：header.vue、footer.vue等。
- src下emit：自己配置的vue集中式事件管理机制。
- src下router：vue-router vue路由的配置文件。
- src下service：自己配置的vue请求后台接口方法。
- src下page：存在vue页面组件的文件夹。
- src下util：存放vue开发过程中一些公共的.js方法。
- src下vuex：存放 vuex 为vue专门开发的状态管理器。
- src下app.vue：使用标签
渲染整个工程的.vue组件。 - src下main.js：vue-cli工程的入口文件。
- index.html：设置项目的一些meta头信息和提供用于挂载 vue 节点。
- package.json：用于 node_modules资源部 和 启动、打包项目的 npm 命令管理。
数据驱动，也叫双向数据绑定。(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可以监听多个方法吗
可以
只响应methodsOne
10.vue中key值得作用
用于管理可复用的元素。因为vue会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。
key值相同的，就不会重新渲染，key值不同的，则会重新渲染
11.vue-cli工程升级vue版本
npm-check-updates 升级插件
首先安装插件npm install npm-check-updates -g
然后在待升级工程的目录结构下，命令行输入：ncu
然后升级所有版本，命令行输入：ncu -a
再输入：npm install
12.vue事件中如何使用event对象
event
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的优先级高
16. vue中子组件调用父组件的方法
通过父组件v-on 监听 和 子组件$emit触发来实现：
父组件：
这是父组件
子组件：
这是子组件
17.vue中keep-alive组件的作用
keep-alive：主要用于保留组件状态或避免重新渲染。
include:字符串或正则表达式。只有匹配的组件会被缓存。
exclude：字符串或正则表达式。任何匹配的组件都不会被缓存。
例子：
18.vue中编写可复用的组件
prop：允许外部环境传递数据给组件
事件：允许组件触发外部环境的action
slot：允许外部环境将内容插入到组件的视图结构内
注：（单个插槽，多个插槽也叫具名插槽，作用域插槽）
作用域插槽：使用时候子组件标签
19.vue生命周期有关的试题
注意：
（1）mounted、updated不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用vm.$nextTick 替换掉mounted、updated：
（2）http请求建议在 created 生命周期内发出
[图片上传失败...(image-25eef6-1551234683562)]
20.vue如何监听键盘事件中的按键?
自定义按键修饰符
// 可以使用
v-on:keyup.f1 Vue.config.keyCodes.f1 = 11221.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.解决非工程化项目，在网速慢时初始化页面闪动的问题
{{message}}
[v-cloak]{ display:none; }
25.v-for产生的列表，实现active的切换
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的计算属性
Original message: "{{ message }}"
Computed reversed message: "{{ reversedMessage }}"
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传递数据
父：
子：
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.计算属性的缓存和方法的调用的区别
- 计算属性是基于它的依赖缓存的。一个计算属性所依赖的数据发生变化时，它才会重新取值。
- 使用计算属性还是methods取决于是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性，除非你不希望得到缓存。
- 计算属性是根据依赖自动执行的，methods需要事件调用。
利用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 文件中使用：
39.axios的使用方法
【vue的学习笔记总结】axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
推荐阅读
- 热闹中的孤独
- JAVA（抽象类与接口的区别&重载与重写&内存泄漏）
- 放屁有这三个特征的，请注意啦！这说明你的身体毒素太多
- 一个人的旅行，三亚
- 布丽吉特，人生绝对的赢家
- 慢慢的美丽
- 尽力
- 一个小故事，我的思考。
- 家乡的那条小河
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量