vue两大特征

一、数据驱动(mvvm)
二、组件化开发

1.什么是vue?

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。

Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架!

2.什么是mvc和mvvm?

MVC 是后端的分层开发概念;

MVVM是前端视图层的概念,主要关注于视图层分离,也就是说:MVVM把前端的视图层,分为了三部分Model、View、VM ViewModel;

3.框架和库的区别?

框架:是一套完整的解决方案;对项目的侵入性较大,项目如果需要更换框架,则需要重新架构整个项目。

库(插件):提供某一个小功能,对项目的侵入性较小,如果某个库无法完成某些需求,可以很容易切换到其它库实现需求。

4.插值表达式、v-cloak、v-text、v-html

  • 插值表达式{{}},可以在前后插入一些内容

  • v-text:会替换掉元素里的内容

  • v-html:可以渲染html界面

5.vue指令界面防止闪烁?

在{{}}前面的div里加入v-cloak

6.vue指令v-html和v-text的区别?

作用:

都是用于渲染页面

7.vue指令-属性绑定及简写?

v-bind  简写:

8.vue指令-事件绑定及简写?

v-on  简写@

9.vue事件修饰符?

.stop 阻止冒泡

.prevent 阻止默认事件

.capture 添加事件侦听器时使用事件捕获模式

.self 只当事件在该元素本身(比如不是子元素)触发时触发回调

.once 事件只触发一次

10.vue指令-双向数据绑定

v-model

11.vue指令-循环渲染?

v-for 搭配key使用

12.vue指令-显示隐藏?

v-if和v-show

13.vue指令-v-for如何遍历对象,数组,数字?

  1. 遍历数组,参数(item,index) in list

  2. 遍历对象,参数(value,key,index) in list

  3. 遍历数字,num in 10 (1~10)

14.vue指令-v-for为什么设置key?

  1. 让界面元素和数组里的每个记录进行绑定

  2. key只能是字符串或者数字

  3. key必须是唯一的

15.vue指令-v-if和v-show的区别?

v-if是通过添加和删除dom元素

v-show是通过display:none方式隐藏

16.vue绑定class方式?

  1. 数组

  2. 三木表达式

  3. 数组内置对象(对象的键是样式的名字,值是Boolean类型)

  4. 数组加三木表达式

17.vue绑定style方式?

  1. 直接在元素上通过 :style 的形式,书写样式对象

  2. 将样式对象,定义到 data 中,并直接引用到 :style 中

    1. 在data上定义样式

    2. 在元素中,通过属性绑定的形式,将样式对象应用到元素中

  3. 在 :style 中通过数组,引用多个 data 上的样式对象

    1. 在data上定义样式

    2. 在元素中,通过属性绑定的形式,将样式对象应用到元素中

18.vue过滤器全局和局部声明方式及使用?

通过Vue提供的filter方法定义:Vue.filter()

filters这个是实例化Vue的一个参数,和data,methods平级的

19.vue键盘修饰符使用?

  1. 监听所有按键:v-on:keyup

  2. 监听指定按键:v-on:keyup.按键码

20.vue键盘修饰符设置别名?

Vue.config.keyCodes.f1 = 112

21.vue自定义指令全局和局部声明方式及使用?

使用这个方法进行全局定义:Vue.directive()

私有定义:directives

22.vue生命周期钩子函数有哪些?

beforeCreate、created、beforeMount、Mounted、beforeUpdate、updated、beforeDestroy、destroyed、

23.vue生命周期钩子函数各阶段特点,什么作用?

beforeCreate:初始化vue实例,一般用于页面重定向

created:一般用于接口请求,数据初始化

beforeMount:页面数据未更新,在内存中已经解析好模板,虚拟dom,尚未挂载到页面中

Mounted:页面更新完成,需要依赖dom的操作完成

beforeUpdate:触发0次或多次,数据更新前

updated:数据更新后

beforeDestroy:组件销毁前,清除定时器还有页面监听

destroyed:组件销毁后

24.vue-resourse如何发送get,post请求?

this.$http.get

this.$http.post

25.vue-resourse发送post请求第三个参数写什么?

emulateJSON:true

26.axios发送get,post请求?

axios.$http.get

axios.$http.post

27.axios发送post请求使用内置参数对象是什么?

fromdata

urlsearchparsms

28.vue中过渡动画类名有哪些?

v-enter、 v-enter-active、v-enter-to、v-leave、v-leave-active、v-leave-to、

29.vue中过渡动画结合第三方插件使用?

引入animate.css,enter-active-class,leave-active-class

30.vue中过渡动画中钩子函数的使用?

beforeEnter、enter、afterEnter、beforeLeave、leave、afterleave、

31.vue中如何设置v-for列表动画?

transition

32.vue中如何声明组件?

全局定义:vue.component

私有定义:components

33.vue中如何父组件给子组件传值?

在父组件中加入props方法,与methods,data平级

34.vue中如何子组件给父组件传值?

给父组件中给引用的子组件注册一个自定义事件

子组件可以触发这个事件$emit("事件名字",传递的参数)

35.vue中如何使用插槽,两种插槽的区别?

插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot> 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的<slot></slot>标签。

具名插槽 具名插槽其实就是给插槽取个名字。一个子组件可以放多个插槽,而且可以放在不同的地方,而父组件填充内容时,可以根据这个名字把内容填充到对应插槽中

<slot name=”header”></slot> <template v-slot:”header”><template>

36.前端路由和后端路由的区别?

前端路由:对于单页面应用程序来说,主要通过url中的hash(#号)来实现页面之间的切换,这种通过hash实现切换的方式称为前端路由

后端路由:所有的超链接都是url地址,所有的url地址对应服务器上对应的资源

37.vue中如何使用路由?

1.引入vue.router

2.创建路由new VueRouter

const router = new VueRouter({})

3.创建映射关系

routes:[

{

path:'/'  路径

component:""  对应组件

}

]

4.将路由挂载在vue实例上

5.战示区域

<router-view></router-view>

38.路由跳转两种方式,声明式,函数式?

声明式:<router-link :to="{path:'/detail',query:{courseid:103,age:18}}">详情页</router-link>

<router-link :to="{name:'mine',params:{urseid:103}}">个人中心</router-link>

函数式: <button @click=" "> 页面跳转</button>

39.路由传参两种方式,声明式,函数式?

<router-link :to="{path:'/detail',query:{courseid:103,age:18}}">详情页</router-link>

<router-link :to="{name:'mine',params:{urseid:103}}">个人中心</router-link>

<!-- 函数式 -->

<button @click="todetail"> 页面跳转</button>

<button @click="todetail2"> 页面跳转2</button>

40.路由嵌套?

const router = new VueRouter({

//  3.创建映射关系

routes: [

// 重定向

{

path: '/',

redirect: "/index"

},

{

// 路径

path: '/index',

// 对应组件

component: index,

// 嵌套

children: [

// 不加/  注意,以 / 开头的嵌套路径将被视为根路径。这允许你利用组件嵌套,而不必使用嵌套的 URL。

{

path: "other",

component: other

}

]

},

{

path: "/detail",

component: detail

}

]

})

41.路由高亮?

.router-link-active 默认样式

自定义 linkActiveClass 在new VueRouter实例中

42.路由重定向?

// 重定向

{

path: '/',

redirect: "/index"

},

43.ref的使用?

获取DOM,操作DOM

给DOM元素加ref=“自己起的名”

<div id="box" ref="refdiv"> haha</div>

this.$refs.refdiv.style.color = 'red'

44.属性计算,属性监听?

watch: {

// newVal: 当前最新值

// oldVal: 上一刻的值

变量名 (newVal, oldVal){

// 变量名对应值改变这里自动触发

}

}

watch: {

"firstname": function (newvalue,oldvalue) {

// console.log(newvalue);

// console.log(oldvalue);

this.name = this.firstname + this.lastname

},

"lastname": function (newvalue,oldvalue) {

this.name = this.firstname + this.lastname

}

},

Watch 监听,和methods平级

属性计算 不能和data里面数据冲突

// 计算属性中所依赖的任何一个 data 属性改变之后,都会重新触发 本计算属性 的重新计算,从而更新 fullName 的值

computed:{

name:{

get:function(){

return this.firstname + '-' + this.lastname

},

// 只有修改自身时会触发

set:function(value){

console.log(value);

this.firstname =  value.split("-")[0]

this.lastname =  value.split("-")[1]

}

}

}

Vue第一周复习总结相关推荐

  1. 中软培训第一周复习总结 --简单的HTML 与CSS

    一些需要记住的点: day1 HTML格式及简单标签: html 文件一般格式: 1 <html> 2 <head lang="en"> 3 <met ...

  2. 2017暑假 第一周 学习总结(复习)

    2017暑假 学习总结目录: 1 2 3 4 Time:7.3 ~ 7.9 Content:再次认识Java,熟悉环境配置,HelloWorld 基本结构,了解开发工具 eclipse,标识符命名规范 ...

  3. 20162313苑洪铭 第一周作业

    20162313苑洪铭 20016-2017-2 <程序设计与数据结构>第1周学习总结 教材学习内容总结 本周观看教材绪论 主要在教我建立一个简单的java程序 内容是林肯的名言 虽然看起 ...

  4. 大三下学期第一周总结

    本周以是开学第一周了,在生活方面,生活琐事确实变多了起来.每天上课,看着老师熟悉的面庞,如履春风.感觉学习没有那么多的陌生恐惧.学习是一方面,身体锻炼不能落下.一周至少保证三小时及其以上的运动.身体是 ...

  5. 机电传动控制课程第一周学习笔记

    机电传动课程第一周学习笔记 本周的学习内容主要是第一章绪论和第二章机电传动系统的动力学基础,结合课程学习和预习复习回顾内容如下: 1.绪论:学习了机电传动控制目的与任务.发展历程和我们该如何学习这门课 ...

  6. 慕课堂签到迟到怎么办_线上教学第一周:长安大学精品课程助力“云端课堂”...

    课下学生点播长安大学精品在线课程视频自学,课上与老师互动解决重点难点,实现空中翻转课堂.近几年学校陆续建设了85门精品在线开放课程资源,为我校的各类课程进行大规模线上线下混合式教学积累了宝贵的实践经验 ...

  7. 信息安全系统设计基础第一周学习总结

    学习计时:共15小时 读书:1 代码:10 作业:13 博客:1 一.学习目标 1. 能够独立安装Linux操作系统 2. 能够熟练使用Linux系统的基本命令 3. 熟练使用Linux中用户管理命令 ...

  8. 深度学习笔记第一门课第一周:深度学习引言

    本文是吴恩达老师的深度学习课程[1]笔记部分. 作者:黄海广[2] 主要编写人员:黄海广.林兴木(第四所有底稿,第五课第一二周,第三周前三节).祝彦森:(第三课所有底稿).贺志尧(第五课第三周底稿). ...

  9. 张旭升20162329 2006-2007-2 《Java程序设计》第一周学习总结

    20162329 2006-2007-2 <Java程序设计>第一周学习总结 教材学习内容总结 通过打书上的代码熟悉了Java编程的基本过程 教材学习中的问题和解决过程 1.因为我的虚拟机 ...

最新文章

  1. 适应安装程序用的TreeView控件
  2. Java对象的创建过程:类的初始化与实例化
  3. calender获取日期前几月_java获取当前时间和前一天日期(实现代码)
  4. 再有人问你MySql 的隔离级别是什么,就把这篇文章发给他!
  5. 人生路上对我影响最大的三位老师浅谈师生关系
  6. Unix环境高级编程(十五)高级I/O
  7. CSS基本选择器之类选择器多类名(CSS、HTML)
  8. git config 的CRUD,增删改查
  9. 车道识别与交通标志识别
  10. Qt QComboBox详解
  11. 关于ssh整合后struts2拦截器不起作用(blog-1)
  12. 如何通俗的理解机器学习中的VC维、shatter和break point?
  13. 读书笔记----《平凡的世界》第四篇
  14. Apache DolphinScheduler v2.0.1 Master 和 Worker 执行流程分析系列(三)
  15. MNN实践[C++版本]
  16. LiteOS学习笔记-5通信模组之LiteOS的SAL及socket编程
  17. 拼多多客服回复话术技巧
  18. 收藏这些网站,找PPT设计素材不再发犯难(图标、信息图、配色、免版权免费图片)...
  19. 19 Python __dict__与dir()区别
  20. 铅酸电池充电C语言程序,铅酸蓄电池化成充电方法与流程

热门文章

  1. Rotated_Faster_Rcnn
  2. 如何查看oracle数据库表空间
  3. 皮一皮:这是现在的OCR识别技术水平?
  4. html中两个表格的间距怎么设置,HTML两个表格间距怎么调整
  5. 越南语像素蛋糕作图软件完整学习版
  6. fatal: write error: No space left on device KiB | 564.00 KiB/s
  7. 利用Python递归下载文件夹下所有文件
  8. c++字符串完全指南
  9. 美国的4G,韩国的技术,高通的落魄
  10. 【MAPBOX基础功能】23、mapbox通过marker的方式绘制波纹点位