Vue.js期末考复习总结，看这一篇就够了

2024-01-01 13:10
文章标签 javascript 总结 vue js 一篇 复习 frontend 就够 期末考

本文主要是介绍Vue.js期末考复习总结，看这一篇就够了，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

  • 前言
  • 因为刚好学校期末考就总结了一下。在我的博客里有更多自己总结的东西哦欢迎访问✧*｡٩(ˊᗜˋ*)و✧*｡点我点我

第一章

MVVM 概念

  • Model-View-ViewModel,模型-视图-视图模型，连接view和model的桥梁。
  • 两个方向，一个模型转换成视图，一个视图转换成模型，实现方式是DOM事件监听。

Vue是渐进式JS框架，渐进式的意义是什么

  • 阶段性
  • 可以作为嵌入服务端应用的一部分
  • 可供使用的api丰富
  • vue可以用自带命令行快速初始化项目

单页面应用及其优缺点

  • SPA，即只有一个主页面的应用。所有内容都在一个html里
  • 优点
    • 前后端分离
    • 用户体验良好
    • 减轻服务端压力
    • 共用一套后端程序代码
  • 缺点
    • 不利于SEO优化
    • 首屏加载过慢

第二章

创建Vue实例

var app = new Vue({...})

数据与方法

  • Object.freeze(),冻结一个对象，使对象不能被修改。
  var obj = {foo: '10'}Object.freeze(obj);new Vue({el: '#app',data: obj})

生命周期与钩子函数

  • 图
    在这里插入图片描述

  • 钩子函数参数

    • 指令钩子函数会被传入以下参数：
    • el：指令所绑定的元素，可以用来直接操作 DOM 。
    • binding：一个对象，包含以下属性：
    • name：指令名，不包括 v- 前缀。
    • value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
    • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
    • expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
    • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
    • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
    • vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
    • oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

计算属性

  • 和methods的不同：在调用methods里的一个方法时，所有方法都会调用（都会遍历一遍）
<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: {// 计算属性的 getterreversedMessage: function () {// `this` 指向 vm 实例return this.message.split('').reverse().join('')}}
})

  • 插值

    • 文本
    {{message}}
    • 原式html， 在这样绑定data里的message属性
    <p v-html="message"></p>
    • JavaScript表达式
    {{a+b+c}}

  • 缩写

    • v-bind缩写：
    • v-on缩写@

第三章

侦听属性

  • 其实就是用key-value的形式定义和绑定数据，其中key是被监听对象，value可以是字符串，方法，函数，对象
  • 如果不启用深度遍历，value是对象的时候新旧值是一样的，因为他们指向同一个对象
  • 在下面的例子里，输入1234，则new是1234，old是123（输入过的数）
watch: {message: function(newValue, oldValue) {console.log("新" + newValue + "旧" + oldValue)}
}

过滤器

  • 作用：对数据进行筛选，过滤，格式化
  • 全局和局部过滤器重名，会采用全局过滤器。
//全局过滤器
Vue.filter('captitalize', function(value){...
})
//局部过滤器
falters: {capitalize: function(value) {...}
}

第四章

基本指令

  • v-cloak,解决网速较慢页面加载闪烁问题
  • v-once, 被标记的元素和组件只渲染一次
  • v-html和v-text的区别是text就是text，html就是html被解析过后渲染的结果

条件渲染

  • v-if
<div v-if="type === 'A'">A
</div>
<div v-else-if="type === 'B'">B
</div>
<div v-else-if="type === 'C'">C
</div>
<div v-else>Not A/B/C
</div>
  • key，表达这两个信息元素是完全独立的，不可复用。常见于表单绑定
<template v-if="loginType === 'username'"><label>Username</label><input placeholder="Enter your username" key="username-input">
</template>
<template v-else><label>Email</label><input placeholder="Enter your email address" key="email-input">
</template>
  • v-if和v-show的区别
    • v-if是达到条件才渲染元素，并且能确保条件块内事件监听器会被销毁和重建
    • v-show是无论初始条件是什么，元素都会被渲染

列表渲染

  • v-for遍历数组
<ul id="example-2"><li v-for="(item, index) in items">{{ parentMessage }} - {{ index }} - {{ item.message }}</li>
</ul>

var example2 = new Vue({el: '#example-2',data: {parentMessage: 'Parent',items: [{ message: 'Foo' },{ message: 'Bar' }]}
})
  • v-for遍历对象
<ul id="v-for-object" class="demo"><li v-for="value in object">{{ value }}</li>
</ul>

new Vue({el: '#v-for-object',data: {object: {title: 'How to do lists in Vue',author: 'Jane Doe',publishedAt: '2016-04-10'}}
})
  • v-for和v-if一起用
<div id="app"><h3>没有报道的学生名单</h3><ul><li v-for="n in items" v-if="!n.value">{{n.name}}</li></ul>
</div>
<script>var app = new Vue({el: '#app',data: {items: [{name: '小明',},{name: '小红', value:'已报道'},{name: '小华', value: '已报道'},{name: '小思',},]}})
</script>

数组更新检测

  • 变异方法
    • push(),接收任意参数并添加到数组末尾，返回修改后数组长度
    • pop()从数组末尾移除最后一项，返回删除后的数组长度
  • 替换数组
    • filter()， 对数组中每一项运行给定函数，该函数会返回true的项组成的数组
    • 注意，这里的filter()和前面的过滤器区别就是这里是不改变原有数组，在这里自己生成一个新的反应出来，而
      之前的过滤器是直接覆盖原有数组修改的

自定义指令

  • 两种写法
<div id="app"><input v-focus></input>
</div>
<script>
//全局指令
Vue.directive('focus', {inserted: function(el) {el.focus}
})
//局部指令
var app = new Vue({el: '#app',directives: {focus: {//指令。。。}}
})
</script>

疑难困惑

  • vue2.0中，v-for的:key作用是什么？
    • 给vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有的元素，需要为每项提供一个唯一的key。

第五章

绑定html样式

  • Class数组语法
<style>.style1 {color: white;}.style2 {color: black;}
</style>
<div id="app"><div v-bind:class="{ 'style1', 'style2' }">{{message}}</div>
</div>
<script>new Vue({el: '#app',data: {message: '数组语法'}})
</script>
  • Class对象语法
<style>.static {color: #3a8ee6;}.style1 {color: white;}.style2 {color: black;}
</style>
<div id="app"><div class="static" v-bind:class="{style1: boole1, 'style': boole2}"></div>
</div>
<script>new Vue({el: '#app',data: {boole1: true,boole2: true}})
</script>

绑定内联样式

  • 对象语法
<div id="app"><div v-bind:style="{color:'red', fontSize:'30'}">对象语法</div>
</div>
<script>new Vue({el: '#app',})
</script>
  • 数组语法
<div id="app"><div v-bind:style="[styleObj1, styleObj2]">对象语法</div>
</div>
<script>new Vue({el: '#app',data: {styleObj1:{color: 'blue'}},computed: {styleObj2:function (){return {padding: '30px'}}}})
</script>

第六章

事件处理

  • 多个事件调用方法
<div id="app"><div>单击：<button v-on:click="reduce(1)">-1岁</button><button v-on:click="add(1)">+1岁</button></div><p>老王的年龄{{age}}岁</p><div>双击：<button v-on:click="reduce(10)">-10岁</button><button v-on:click="add(10)">+10岁</button></div>
</div>
<script>new Vue({el: '#app',data: {age: 50},methods: {add:function (change){this.age-=change},reduce:function (change){this.age-=change},}})
</script>

事件修饰符

  • .stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡
  • .prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）
  • .capture：与事件冒泡的方向相反，事件捕获由外到内
  • .self：只会触发自己范围内的事件，不包含子元素
  • .once：只会触发一次
  • 用法大概是这样
<div @click.stop="inside">阻止事件</div>

按键修饰符

  • 键盘事件
    • keydown, 键盘按下时触发
    • keyup, 键盘按键抬起时触发
    • keypress, 键盘按下和抬起之间触发
  • 按键修饰符
    • .enter => // enter键
    • .tab => // tab键
    • .delete (捕获“删除”和“退格”按键) => // 删除键
    • .esc => // 取消键
    • .space => // 空格键
    • .up => // 上
    • .down => // 下
    • .left => // 左
    • .right => // 右
  • 使用
<input @keyup.enter="submit">

系统修饰键

  • 常用的系统修饰键
    • .ctrl
    • .alt
    • .shift
    • .meta
  • 用法
<!-- Alt + C -->
<input @keyup.alt.67="clear"><!-- Ctrl + Click -->
<div @click.ctrl="doSomething">做一些操作</div>

疑难解惑

  • exact修饰符怎么用
  • exact修饰符允许控制精准的系统修饰符组合触发的事件
<button @click.ctrl.exact="onClick">A</button>

第七章

表单双向绑定

  • v-model能绑定的元素：

    • text里的value和input
    • checkbox和radio里的checked和change
    • select字段将value作为prop并将change作为事件

  • 文本

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
  • 多行文本
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>//pre-line的含义是合并行序列保留换行符
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
  • 复选框
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
  • 单选按钮
<div id="example-4"><input type="radio" id="one" value="One" v-model="picked"><label for="one">One</label><br><input type="radio" id="two" value="Two" v-model="picked"><label for="two">Two</label><br><span>Picked: {{ picked }}</span>
</div>
<script>new Vue({el: '#example-4',data: {picked: ''}})
</script>
  • 选择框
<div id="example-5"><select v-model="selected"><option disabled value="">请选择</option><option>A</option><option>B</option><option>C</option></select><span>Selected: {{ selected }}</span>
</div>
<script>new Vue({el: '...',data: {selected: ''}})
</script>
  • 多选时
多选时 (绑定到一个数组)：<div id="example-6"><select v-model="selected" multiple style="width: 50px;"><option>A</option><option>B</option><option>C</option></select><br><span>Selected: {{ selected }}</span>
</div>
<script>new Vue({el: '#example-6',data: {selected: []}})
</script>

绑定选择框

<div id="app"><select v-model="selected" multiple><option :value="{num:1}">A</option><option :value="{num:2}">B</option><option :value="{num:3}">C</option><option :value="{num:4}">D</option></select><br><span>Selected: {{ selected }}</span>
</div>
<script>new Vue({el: '#app',data: {selected: []}})
</script>

修饰符

  • lazy，转变为在change事件中同步，即失焦or按enter才更新
  • number，将输入的值转成number类型
  • trim，自动过滤用户输入的首尾空格
  • 用法看着里
<input v-model.lazy="msg"></input>

第八章

组件的注册

  • 全局注册
<div id="app"><component-a></component-a>
</div>
<script>//方法1Vue.component('component-a', { /* ... */ })//方法2var component = Vue.extend({template: '<div><h3>全局组件</h3></div>>'})Vue.component('component-a', component)new Vue({ el: '#app' })
</script>
  • 局部注册
<script>var ComponentA = { /* ... */ }var ComponentB = { /* ... */ }var ComponentC = { /* ... */ }new Vue({el: '#app',components: {'component-a': ComponentA,'component-b': ComponentB}})
</script>
  • 以匿名对象的方式注册组件
<div id="app"><my-com2></my-com2>
</div>
<script>Vue.component('myCom2',Vue.extend({template: '<div>直接用component创建的组件</div>'}))new Vue({el: '#app'})
</script>
  • 注意，在上面的代码中extend创建的模板只能有且仅有一个根元素，当出现多个根元素的时候默认只渲染第一个。
    说人话就是要有div包着，不能没有div但是有h3和p两种标签，不然会只渲染前面的

组件中data的选项

  • 看代码，其实就是加了个data而已
<div id="app"><my-com></my-com>
</div>
<template id="tmp"><h3>{{name}}</h3>
</template>
<script>Vue.component('my-com', {template: '#tmp',data: function (){return {name: 'john'}}})var app = new Vue({el: '#app'})
</script>

组件间数据通信

  • 父子组件传值，父传子(用props)
<div id="app"><h3>请输入要传的值<input type="text" v-model="title"></input></h3><child-node v-bind:parentTitle="title"></child-node>
</div>
<template id="tmp"><div><h4>属性值 {{content}} </h4></div>
</template>
<script>
var app = new Vue( {el: '#app',data(){return {title:'首页',}},components:{'childNode': {template: '#tmp',props: ['parentTitle'],data() {return{content: this.parentTitle}},watch: {parentTitle: {this.content = this.parentTitle}},}}
})
</script>
  • 父子组件传值，子传父(用$emit)
<div id="app"><h3>属性值 {{msg}} </h3><child-node @show="showMsg"></child-node>
</div>
<template id="tmp"><div><h4>请输入要传的值<input type="text" v-model="childMsg"></input><button @click="func">传递</button></h4></div>
</template>
<script>
var app = new Vue( {el: '#app',data(){return {title:'',msg: ''}},components:{'childNode': {template: '#tmp',data() {return{childMsg: ''}},methods: {func() {this.$emit('show', this.childMsg)}},}}
})
</script>

这篇关于Vue.js期末考复习总结，看这一篇就够了的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/559345。

相关文章

Java实现Excel与HTML互转

Java实现Excel与HTML互转

《Java实现Excel与HTML互转》Excel是一种电子表格格式,而HTM则是一种用于创建网页的标记语言,虽然两者在用途上存在差异,但有时我们需要将数据从一种格式转换为另一种格式,下面我们就来看看... Excel是一种电子表格格式，广泛用于数据处理和分析，而HTM则是一种用于创建网页的标记语言。虽然两
阅读更多...
vue解决子组件样式覆盖问题scoped deep

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器（/deep/）来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言
阅读更多...
VUE动态绑定class类的三种常用方式及适用场景详解

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式（对象添加：情景一）2.动态添加一个class样式（字符串添加：情
阅读更多...
Python中实现进度条的多种方法总结

Python中实现进度条的多种方法总结

《Python中实现进度条的多种方法总结》在Python编程中,进度条是一个非常有用的功能,它能让用户直观地了解任务的进度,提升用户体验,本文将介绍几种在Python中实现进度条的常用方法,并通过代码... 目录一、简单的打印方式二、使用tqdm库三、使用alive-progress库四、使用progres
阅读更多...
Node.js 中 http 模块的深度剖析与实战应用小结

Node.js 中 http 模块的深度剖析与实战应用小结

《Node.js中http模块的深度剖析与实战应用小结》本文详细介绍了Node.js中的http模块,从创建HTTP服务器、处理请求与响应,到获取请求参数,每个环节都通过代码示例进行解析,旨在帮... 目录Node.js 中 http 模块的深度剖析与实战应用一、引言二、创建 HTTP 服务器：基石搭建（一
阅读更多...
React实现原生APP切换效果

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用
阅读更多...
Android数据库Room的实际使用过程总结

Android数据库Room的实际使用过程总结

《Android数据库Room的实际使用过程总结》这篇文章主要给大家介绍了关于Android数据库Room的实际使用过程,详细介绍了如何创建实体类、数据访问对象（DAO）和数据库抽象类,需要的朋友可以... 目录前言一、Room的基本使用1.项目配置2.创建实体类（Entity）3.创建数据访问对象（DAO
阅读更多...
Java向kettle8.0传递参数的方式总结

Java向kettle8.0传递参数的方式总结

《Java向kettle8.0传递参数的方式总结》介绍了如何在Kettle中传递参数到转换和作业中,包括设置全局properties、使用TransMeta和JobMeta的parameterValu... 目录1.传递参数到转换中2.传递参数到作业中总结1.传递参数到转换中1.1. 通过设置Trans的
阅读更多...
C# Task Cancellation使用总结

C# Task Cancellation使用总结

《C#TaskCancellation使用总结》本文主要介绍了在使用CancellationTokenSource取消任务时的行为,以及如何使用Task的ContinueWith方法来处理任务的延... 目录C# Task Cancellation总结1、调用cancellationTokenSource.
阅读更多...
使用Vue.js报错：ReferenceError: “Vue is not defined“ 的原因与解决方案

使用Vue.js报错：ReferenceError: “Vue is not defined“ 的原因与解决方案

《使用Vue.js报错：ReferenceError:“Vueisnotdefined“的原因与解决方案》在前端开发中,ReferenceError:Vueisnotdefined是一个常见... 目录一、错误描述二、错误成因分析三、解决方案1. 检查 vue.js 的引入方式2. 验证 npm 安装3.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2