Vue与 Vue组件部分
1.Vuex作用?哪种功能场景使用它?
答案:vue框架中状态管理.
场景有:单页面应用中,组件之间的状态。音乐播放、
登录状态、加入购物车
2.解释vuex最常用的两种属性
答案:分别State、Getter
vuex的State特性
A.Vuex就是一个仓库,仓库里面放了很多对象。其中state就是数据源存放池,
对应于一般Vue对象里面的data.
B.state里面存放的数据时响应式的,Vue组件从store中读取数据,若是store中的数据
发生变化,依赖这个数据的组件也会发生更新.
C.它通过mapState把全局的state和getters映射当前组件computed计算属性中
vuex的Getter特性
A.getters可以对State进行计算操作,它就是Store的计算属性
B.虽然在组件内也可以做计算属性,但是getters可以在多组件之间复用
C.如果一个状态只在一个组件内使用,是可以不用getters
3.请列举出3个Vue中常用的生命周期钩子函数
答案:
created:实例已经创建完成之后调用,在这一步,实例已经完成数据观测,
属性和方法的运算,watch/event事件回调.然后,挂载阶段还没开始,$el
属性目前还不可见.
mounted:el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。
如果root实例挂载了一个文档内元素,当mouted被调用时vm.$el也在文档内。
activated:keep-alive组件激活时调用
4.mint-ui是什么?怎么使用?至少说出三个组件
答案:基于vue的前端组件库。npm安装,然后import样式和js,
Vue.use(mintUI)全局引入。
-在单个组件内部引入:import{ Toast } from 'mint-ui'
-组件1:Toast('登录成功');
-组件2:mint-header
-组件3:mint-swiper
5.vue-loader是什么?使用它的用途有哪些
答案:解析.vue文件的一个加载器,跟template/js/style转换成js模块。
用途:js可以写es6、style样式可以scss或less、template可以加jade等。
6.axios的特点有哪些?
Axios是一个基于promise的HTTP库,支持promise所有的API
它可以拦截请求和响应
它可以转换请求数据和响应数据,并对响应回来的内容自动转换JSON类型的数据
安全性更高,客户端支持防御XSRF
7.axios有哪些常用方法
答案:axios.get(url[,config]) //get请求用于列表和信息查询
axios.delete(url[,config]) //删除
axios.post(url[,data[,config]]) //post请求用于信息的添加
axios.put(url[,data[,config]]) //更新操作
8.Vuex的理解
答案:Vuex是一个专为Vue开发的应用程序的状态管理模式,他采用集中式存储管理
应用的所有组件的状态,并以相应的规则保证以一种可预测的方式发生变化.
核心概念:
Store:要是用Vuex,我们要创建一个实例store,我们称之为仓库,利用这个仓库store来对我们的
状态进行管理.
State
Vuex使用单一状态树,用一个对象State包含了整个应用层级的所有状态,你可以理解为这些
状态就是一堆全局变量和数据.
Getter
还记得Vue中的计算属性computed吗?当我们需要在data的基础上再派生一些状态的时候,
就会使用computed来实现。同样,当我们需要从state中派生出一些状态的时候,就会使用到getters,
你可以将getters理解state的计算属性。
Mutation
Vuex相比传统的全局变量有两个优势,其中一个是Vuex中的状态不能随意修改,要修改必要按照
Vuex提供的方式才能修改.
Action
Action类似于mutation,不同在于:
Action提交的是mutation,而不是直接变更状态.
Action可以包含任意异步操作,通过store.dispatch方法触发
9.Vue和angular的区别
答案:Vue:上手容易 指令以v-xxx html+json,然后再new Vue()实例化对象
个人维护项目 适合移动端
Angular:上手难 指令以ng-xxx 列表内容 所有属性和方法都挂载在$scope上
由google维护 适合web端
10.vue两种模式
答案:vue-router里面除了要配置路由词典外,还要选择 模式有hash模式和
history模式
11.vue的生命周期
答案:总共8个阶段:
创建前/后:创建模型数据和响应系统
beforeCreate 挂在元素$el:undefined 数据data:undefined
Created 挂在元素$el:undefined 数据data:{... }
载入前/后: 挂载 创建虚拟DOM 并生成真实DOM 认为Vue实例/组件
首次加载完成 可以发送ajax请求,也可以操作DOM元素
beforeMount:挂载元素$el undefined 数据data:{....}
Mouted:挂载元素$elDOM 数据data:{...}
更新前/后:模型数据发生变化时触发
BeforeUpdate:
Updated:
销毁前/后: destroy()方法被调用时,要销毁组件/实例时
beforeDestroy:
Destroyed:
12.v-show和v-if指令的共同点和不同点?
v-show指令是通过修改元素的displayCSS属性让其显示或隐藏
v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果
Vue与 Vue组件部分的更多相关文章
- Vue 给子组件传递参数
Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div clas ...
- Vue.js说说组件
什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTM ...
- Vue.js 递归组件实现树形菜单
最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = tr ...
- Vue.js多重组件嵌套
Vue.js多重组件嵌套 Vue.js中提供了非常棒的组件化思想,组件提高了代码的复用性.今天我们来实现一个形如 <app> <app-header></app-head ...
- 基于Vue封装分页组件
使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} ...
- webpack入坑之旅(五)加载vue单文件组件
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- vue单文件组件的构建
在很多Vue项目中,我们使用 Vue.component 来定义全局组件,这种方式在很多中小规模的项目中运作的很好. 但当在更复杂的项目中,就有了很大的弊端. 我们就可以用文件扩展名 .vue的单文件 ...
- Vue 非父子组件通信
组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有 ...
- 【原】vue单文件组件互相通讯
在vue中,我们可以把一个页面各个部分单独封装起来,做成各种小组件,然后加载,这样的好处是代码维护起来比较容易,重复的代码多处调用! 在一个vue项目中,单文件组件以.vue形式文件命名 每个组件之间 ...
- vue初学实践之路——vue简单日历组件(1)
---恢复内容开始--- 最近做的项目有一个需求,需要有一个日历组件供预定功能使用,之前的代码过于繁琐复杂,所以我采用vue重写了这个组件. npm.vue等等安装. 只是一个简单的日历组件,所以并不 ...
随机推荐
- 解决linux(ubuntu18)下无法挂载ntfs磁盘,并读写挂载硬盘
首先需要有ntfs-3g,没有的话sudo apt-get install ntfs-3g 挂载硬盘: chen@ilaptop:/$ sudo mount -o rw,remount /dev/sd ...
- Spring Boot中使用@JsonComponent
文章目录 序列化 反序列化 在同一个class中序列化和反序列化 Spring Boot中使用@JsonComponent @JsonComponent 是Spring boot的核心注解,使用@Js ...
- 基于Atlas实现mysql读写分离
一.实验环境 主机名IP地址 master192.168.200.111 slave192.168.200.112 atlas192.168.200.113 主从复制不再赘述,链接地址:授权Atlas ...
- OC的消息机制简单介绍
在OC的消息机制中主要分为三个阶段,分别为: 1.消息发送阶段:从类以及父类的方法缓存列表和方法列表查找方法. 2.动态解析阶段:在消息发送阶段没有找到方法,则会进入这个阶段,负责动态添加方法实现. ...
- 《Arduino实战》——2.4 反应速度计:谁真正拥有最快的反应时间
本节书摘来异步社区<Arduino实战>一书中的第2章,第2.4节,作者:[美]Martin Evans ,Joshua Noble ,Jordan Hochenbaum,更多章节内容可以 ...
- Joomla CMS 3.2-3.4.4 SQL注入 漏洞分析
RickGray · 2015/10/26 11:24 昨日,Joomla CMS发布新版本3.4.5,该版本修复了一个高危的SQL注入漏洞,3.2至3.4.4版本都受到影响.攻击者通过该漏洞可以直接 ...
- 图论--割边--Tarjan模板
#include<iostream> #include<stdio.h> #include<vector> using namespace std; const i ...
- C. Anton and Fairy Tale(数学推式子)
\(数学题,式子并不难推,但边界是真的烦\) \(\color{Red}{Ⅰ.其实可以发现,当m>=n时,每次都可以粮食补到n,所以一定是在第n天消耗完毕}\) \(\color{Purple} ...
- Spring学习笔记(八)Spring Data JPA学习
jpa简单的命名规则如下,这个不多做介绍,放在这里也是给自己以后查找起来方便,这篇文章主要介绍之前一直忽略了的几个点,像@NoRepositoryBean这个注解,以及怎么自定义Repositor ...
- 王颖奇 201771010129 第三周 Java基本程序设计总结
实验三 Java基本程序设计 实验时间 2018-9-13 201771010129 王颖奇 1.实验目的与要求 (1)进一步掌握Eclipse集成开发环境下java程序开发基本步骤: (2)熟悉PT ...