不想看这个直接搜我的蓝奏云上发的，后面太多了，全弄过来不方便
https://wwlo.lanzouy.com/b058n5j0b
密码:ayr6
第1章
- 填空题
- 用户界面
- ViewModel
- refs
- vue-devtools
- 组件
- 判断题
- 对
- 对
- 对
- 对
- 对
- 选择题
- D
- C
- D
- A
- A
- 简答题
请简述什么是Vue。
Vue（读音/Vjuː/，类似于View）是一套用于构建用户界面的渐进式框架，与其他大型框架相比，Vue被设计为可以自底向上逐层应用。其他大型框架往往一开始就对项目的技术方案进行强制性的要求，而Vue更加灵活，开发者既可以选择使用Vue来开发一个全新项目，也可以将Vue引入到一个现有的项目中。
请简述Vue优势有那些。
轻量级: Vue相对简单、直接，所以Vue使用起来更加友好。
数据绑定: Vue是一个MVVM框架，即数据双向绑定。
指令: 指令主要包括内置指令和自定义指令，以“v-”开头，作用于HTML元素。
插件: 插件用于对Vue框架功能进行扩展，通过MyPlugin.install完成插件的编写，简单配置后就可以全局使用。
编程题
请使用Vue.js动手创建Vue实例并实现数据的绑定效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>登录页面</title>
<!-- 引入vue.js -->
<script src="vue.js"></script>
</head>
<body>
<!-- 定义唯一根标签 -->
<div id="app">
<!-- 绑定login -->
<p>{{login}}</p>
</div>
<script>
// 实例化
var vm = new Vue({
el: '#app',
// 定义初始数据
data: {
login: '登录页面'
}
})
</script>
</body>
</html>
请手动配置Vue.js开发环境。
打开git-bash命令行工具
安装Node环境
打开解压好的vue-devtools-5.1.1文件，执行命令如下
npm install
npm run build
打开Chrome浏览器，添加vue-devtools调试工具
安装脚手架工具： npm install vue-cli@2.9.x –g
安装webpack打包工具： npm install webpack@4.27.x –g
构建项目：vue init webpack app第2章
- 填空题
- new关键字
- data
- 唯一根标签
- v-model
- v-on
- 判断题
- 对
- 对
- 对
- 对
- 对
- 选择题
- D
- A
- C
- B
- B
- 简答题
请简述什么是Vue实例对象。
在Vue项目中，每个Vue应用都是通过Vue构造器创建新的Vue实例开始的。
通过new关键字的方式创建vm实例对象。
创建方式：
<script>
var vm = new Vue({
// 选项
})
<script>
其中，配置选项的主要内容及含义：
- data：Vue实例数据对象
- methods：定义Vue实例中方法
- components：定义子组件
- computed：计算属性
- filters: 过滤器
- el: 唯一根元素
- watch: 监听数据变化
请简述什么是Vue组件化开发。
- 在Vue中，组件是构成页面中独立结构单元，能够减少重复代码的编写
- 提高开发效率，降低代码之间的耦合程度，使项目更易维护和管理
- 组件主要以页面结构形式存在，不同组件也具有基本交互功能，根据业务逻辑实现复杂的项目功能
请简单介绍Vue内置指令主要内容有哪些。
- v-model：双向数据绑定
- v-on：监听事件
- v-bind：单向数据绑定
- v-text：插入文本内容
- v-html：插入包含HTML的内容
- v-for：列表渲染
- v-if：条件渲染
- v-show：显示隐藏
五、编程题
1.编写页面样式：
<style>
.compare{
margin: 0 auto;
width: 500px;
}
ul{
padding: 0;
}
ul li {
list-style: none;
margin-top: 20px;
}
</style>
编写页面结构：
<div id="app">
<!-- 定义页面结构 -->
<div class="compare">
<ul>
<li>
请输入第一个数：<input type="text" v-model="num1">
</li>
<li>
请输入第二个数：<input type="text" v-model="num2">
</li>
<li>
<input type="button" value="比较" @click='compare()'>
</li>
</ul>
<div class="result">
得出结果：{{result}}
</div>
</div>
</div>
<!-- 引入vue.js -->
<script src="vue.js"></script>
编写JavaScript代码：
<script>
var vm = new Vue({
el: '#app',
// 定义初始数据
data: {
num1: '',
num2: '',
result: ''
},
// 定义事件处理函数compare
methods: {
compare() {
if (!this.num1 || !this.num2) {
this.result = '输入的数不能为空'
} else {
this.result = parseInt(this.num1) == parseInt(this.num2) ? '两个数相等' : parseInt(this.num1) > parseInt(this.num2) ? '第一个数大于第二个数' : '第一个数小于第二个数'
}
}
}
})
</script>
2.编写页面结构：
<div id="app">
<!-- 定义页面结构 -->
<div class="calc">
<ul>
<li>
请输入第一个数：<input type="text" v-model="num1">
</li>
<li>
<select name="" id="fuhao">
<option value="1" onclick="">+</option>
<option value="2" onclick="">-</option>
<option value="3" onclick="">*</option>
<option value="4" onclick="">/</option>
</select>
</li>
<li>
请输入第二个数：<input type="text" v-model="num2">
</li>
<li>
<input type="button" value="计算" @click='calc()'>
</li>
</ul>
<div class="result">
得出结果：{{result}}
</div>
</div>
</div>
编写JavaScript代码：
<script>
var vm = new Vue({
el: '#app',
// 定义初始数据
data: {
num1: '',
num2: '',
result: ''
},
// 定义事件处理函数compare
methods: {
calc() {
if (!this.num1 || !this.num2) {
this.result = '输入的数不能为空'
} else {
var fuhao = document.getElementById('fuhao').value;
if (fuhao == "1") {
this.result = parseInt(this.num1) + parseInt(this.num2)
}
if (fuhao == "2") {
this.result = parseInt(this.num1) - parseInt(this.num2)
}
if (fuhao == "3") {
this.result = parseInt(this.num1) * parseInt(this.num2)
}
if (fuhao == "4") {
this.result = parseInt(this.num1) / parseInt(this.num2)
}
}
}
}
})
</script>
第3章
- 填空题
- vm.$root
- vm.$data
- vm.$children
- install
- Vue.directive()
- 判断题
- 错
- 对
- 对
- 错
- 错
- 选择题
- D
- CD
- B
- B
- D
- 简答题
- 请简述什么是Vue插件。
Vue.use主要用于在Vue中安装插件，通过插件可以为Vue添加全局功能。插件可以是一个对象或函数，如果是对象，必须提供install()方法，用来安装插件；如果插件是一个函数，则该函数将被当成install()方法。
- 请简述Vue全局API接口主要内容。
- Vue.directive():Vue中有很多内置指令，如v-model、v-for和v-bind等
- Vue.use():Vue.use主要用于在Vue中安装插件，通过插件可以为Vue添加全局功能
- Vue.extend():Vue.extend用于基于Vue构造器创建一个Vue子类，可以对Vue构造器进行扩展
- Vue.set():Vue的核心具有一套响应式系统，简单来说就是通过监听器监听数据层的数据变化，当数据改变后，通知视图也自动更新
- Vue.mixin():Vue.mixin用于全局注册一个混入，它将影响之后创建的每个Vue实例
- 请简单介绍Vue实例对象属性和方法。
- vm.$props: 使用vm.$props属性可以接收上级组件向下传递的数据
- vm.$options: Vue实例初始化时，除了传入指定的选项外，还可以传入自定义选项
- vm.$el: vm.$el用来访问vm实例使用的根DOM元素
- vm.$children: vm.$children用来获取当前实例的直接子组件
- vm.$root: vm.$root用来获取当前组件树的根Vue实例，如果当前实例没有父实例，则获取到的是该实例本身
- vm.$slots:插槽就是定义在组件内部的template模板，可以通过$slots动态获取
- vm.$attrs: vm.$attrs可以获取组件的属性，但其获取的属性中不包含class、style以及被声明为props的属性
五、编程题
1.编写页面样式：
<style>
* {
margin: 0;
padding: 0
}
ul {
list-style: none;
}
.c-nav {
width: 900px;
height: 42px;
margin: 0 auto;
border-radius: 5px;
position: relative;
}
.c-nav li {
float: left;
width: 83px;
text-align: center;
line-height: 42px;
}
.c-nav li a {
color: #333;
display: inline-block;
height: 42px;
}
header {
background: #ccc;
}
.c-nav li.current a {
color: red;
}
</style>
编写页面结构：
<div id="app">
<my-component>
<!-- 定义导航栏结构 -->
<template v-slot:header>
<div id="c_nav" class="c-nav">
<span class="cloud"></span>
<ul ref='nav'>
<li v-bind:class="{currentName}" v-for="item,key in list" @mouseenter="current(key)" @mouseleave="cancel()"
:id=key>
<a href="#">{{item}}</a>
</li>
</ul>
</div>
</template>
</my-component>
</div>
编写JavaScript代码：
<script>
// 注册组件
Vue.component('my-component', {
render(createElement) {
return createElement('div', [
createElement('header', this.$slots.header),
])
}
})
var vm = new Vue({
el: '#app',
// 定义初始数据
data: {
list: ['首页新闻', '公司简介', '招聘信息', '活动策划', '师资力量'],
currentName: '',
},
methods: {
// 定义事件处理函数
current(key) {
vm.$refs.nav.getElementsByTagName('li')[key].className = 'current';
},
cancel() {
for (var i = 0; i < vm.$refs.nav.getElementsByTagName('li').length; i++) {
vm.$refs.nav.getElementsByTagName('li')[i].className = ''
}
}
}
})
</script>
2.编写页面结构：
<div id="app">
<my-component><my-component />
</div>
编写JavaScript代码：
<script>
// 定义一个MyPlugin（自定义插件）对象
let MyPlugin = {}
// 编写插件对象的install方法
// install()方法有两个参数，第1个参数Vue是Vue的构造器，options是一个可选的配置对象。
MyPlugin.install = function (Vue, options) {
// 在插件中为Vue创建组件myComponent
Vue.component('my-component', {
template: '<div>{{msg}}</div>',
data() {
return {
msg: '我是登录页面'
}
}
})
}
// 调用Vue.use()方法安装插件，在第1个参数中传入插件对象MyPlugin，第2个参数传入可选配置。
Vue.use(MyPlugin, {
someOption: true
})
var vm = new Vue({
el: '#app'
})
</script>第4章
一、填空题
- transition
- name
- appear
- v-leave、v-leave-active、v-leave-to
- 自定义过渡
二、判断题
- 对
- 错
- 对
- 错
- 对
三、选择题
- C
- D
- D
四、简单题
- 请简述JavaScript钩子函数包括哪些。
入场钩子分别是beforeEnter（入场前）、enter（入场）、afterEnter（入场后）和enterCancelled（取消入场）
出场钩子分别是beforeLeave（出场前）、leave（出场）、afterLeave（出场后）和leaveCancelled（取消出场）
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@enter-cancelled="enterCancelled"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
@leave-cancelled="leaveCancelled"
v-bind:css="false"> // Vue会跳过CSS的检测
</transition>
- 请简述6个内置的过渡类名有哪些。
进入（enter）：
v-enter: 在元素被插入之前生效，在元素被插入之后的下一帧移除
v-enter-active: 在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡动画完成之后移除
v-enter-to: 在元素被插入之后下一帧生效（与此同时v-enter被移除），在过渡动画完成之后移除
离开（leave）：
v-leave：在离开过渡被触发时立刻生效，下一帧被移除
v-leave-active：在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡完成之后移除
v-leave-to：在离开过渡被触发之后下一帧生效（与此同时v-leave被移除），在过渡动画完成之后移除
- 请简述自定义过渡类名的属性有哪些。
enter-class
enter-active-class
enter-to-class
leave-class
leave-active-class
leave-to-class
注意：自定义类名的优先级高于普通类名
五、编程题
1.html代码如下：
<body>
<!-- 定义登录组件 -->
<template id="example1">
<div>
<!-- 唯一的根容器 -->
<div class="form-input">
<input type="text" name="user" placeholder="请输入手机号/邮箱" class="form-input">
</div>
<div class="form-input">
<input type="password" name="psd" placeholder="请输入密码" class="form-input">
</div>
<button type="button" class="primary-button"><span>登录</span></button>
</div>
</template>
<!-- 二维码登录 -->
<template id="example2">
<div class="pic">
<img src="images/code.jpg">
</div>
</template>
<div id="content">
<div class="title">
<a href="javascript:;" @click="compontentName = 'example1',cur=0" :class="{active:cur == 0}">账号登录</a>
<a href="javascript:;" @click="compontentName = 'example2',cur=1" :class="{active:cur == 1}">二维码登录</a>
</div>
<transition enter-active-class="animated bounceInDown">
<component :is="compontentName"></component>
</transition>
</div>
</body>
css代码如下:
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<style>
#content{
width: 400px;;
margin: 60px auto;
}
.title{
height: 50px;
border-bottom: 1px solid #e1e7ec;
text-align: center;
}
#content a{
text-decoration: none;
color: black;
font-size: 16px;
background: #f1f1f1;
padding: 5px 10px;
margin: 0 10px;
border-radius: 5px;
}
.form-input{
height: 46px;
line-height: 46px;
margin-top: 10px;;
}
input{
box-sizing: border-box;
padding: 0 25px;
background: #eef3f5;
border-radius: 8px;
width: 100%;
height: 100%;
border: 0;
outline: 0;
font-size: 14px;
}
#content .active{
background-color: #09f;
color: #fff;
}
.primary-button{
background: linear-gradient(325deg,#4aa4ff,#1058fa);
width: 100%;
height: 42px;
border-radius: 23px;
border: 0;
outline: none;
color: #fff;
letter-spacing: 10px;
font-weight: 500;
font-size: 16px;
cursor: pointer;
margin-top: 30px;
}
.pic{
width: 200px;
height: 200px;
margin: 0 auto;
}
.pic img{
width: 100%;
height: 100%;
}
</style>
js代码如下：
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
Vue.component('example1',{template:'#example1'})
Vue.component('example2',{template:'#example2'})
var vm = new Vue({
el: '#content',
data: {
compontentName :'example1',
cur:0
}
});
</script>
账号登录
二维码登录
2.html代码如下：
<div id="app">
<div>
<div v-for='item in showList'>{{item}}</div>
<div @click="showAll = !showAll" class="status">{{flag}}</div>
</div>
</div>
js代码如下：
<!-- 一开始只显示4个数据，点击展开显示全部 -->
<script type = "text/javascript">
var vm = new Vue({
el:'#app',
data() {
return {
fruitList:[
'草莓','苹果','香蕉','榴莲','香梨' // 进行显示的数据
],
showAll:false, // 标记数据是否需要完全显示的属性
}
},
computed:{
showList:function(){
if(this.showAll == false){
var showList = [];
if(this.fruitList.length > 4){ // 一开始显示前4个数据
for(var i=0;i<4;i++){
showList.push(this.fruitList[i])
}
}else{
showList = this.fruitList
}
return showList;
}
else{
return this.fruitList;
}
},
flag:function(){
if(this.showAll == false){
return '单击展开'
}
else{
return '单击收起'
}
}
}
})
</script>第5章
- 填空题
- npm install vue-router
- 路由对象
- 命名路由
- 编程式导航
- hash（#号）
- 判断题
- 对
- 错
- 对
- 错
- 对
- 选择题
- A
- A
- C
- 简单题
- 请简述npm方式安装vue-router的步骤。
1.首先通过cd命令进入创建好的项目目录里面
cd 文件名
2.使用以下npm命令来安装路由
方式一：npm install vue-router --save（不加版本号）
// --save 会在package.json包配置文件中添加对应的配置
方式二：npm install vue-router@3.1.x（指定版本号）
安装完成之后可以在package.json文件中查看到vue-router的相关信息
3.在main.js文件中引入路由、安装路由功能等，示例代码如下
import Vue from 'vue'
import VueRouter from 'vue-router' // 引入插件
import App from './App'
Vue.use(VueRouter) // 注册组件
const router = new VueRouter({ // 创建实例
routes:[] // 配置路由规则
})
const app = new Vue({
el: '#app',
router:router, // 挂载路由
render:h=>h(App)
})
- 请简述vue-router路由的作用。
根据不同的url哈希值，在路由视图中显示不同的页面，实现非跳转式的页面切换
在单页面应用中更新视图可以不用重新请求页面
用户体验好，不需要每次都从服务器全部获取，快速展现给用户
- 请简单列举并说明路由对象包括哪些属性。
路由对象表示当前激活的路由的状态信息，包含了当前URL解析得到的信息，还有URL匹配到的路由记录，this.$router表示全局路由器对象，this.$route表示当前正在用于跳转的路由器对象，$route的常用属性信息如下：
$route.path：对应当前路由地址
$route.query：一个{key:value}对象，表示 URL查询参数
$route.params：一个{key:value}对象，路由转跳携带参数
$route.hash：在history模式下获取当前路由的hash值（带#），如果没有hash值，则为空字符串
$route.fullPath：完成解析后的URL，包含查询参数和hash的完整路径
$route.name：当前路由的名称
$route.matched：路由记录，当前路由下路由声明的所有信息，从父路由（如果有）到当前路由为止
$route.redirectedFrom：如果存在重定向，即为重定向来源的路由
4728
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
