Vue3学习笔记（六）—— 作业开发者社区

Vue3学习笔记（六）—— 作业

import App from ' ./view/index.vue '

let arr = [1,2,3,4];
var arr2 = [];
for(let i of arr){
　　arr2.push(i*1);
console.1og(arr2);

let iam =“我是";
let name = "lb"
let str =“大家好，”+ iam + name + "，多指教。";

let name = "tom" ;
let obj={
　　"name" :name ,
　　"say":funct1on(){
　　　　alert('hello world');
};

arr.forEach(
    function (v,i) {
        console.1og(i);
        console.1og(v);
);

let arr=[1, 2, 2, 3, 4, 5,5，6,7,7，8,8，0，8,6，3,4，56，2]

let jsonData = {
    id: 42,
    status: "OK",
    data: [867, 5309]
let { id, status, data: number ) = jsonData;
console.1og(id, status,number);

const list = [
    {id:3, name:”张三半”}，
    {id:5, name:“张无忌”}，
    {id:13, name:"杨道"},
    {id:33, name;“殷天正"},
    {id:12, name:"赵敏"}，
    {id:97, name:"周芷若”}
]

const headAndTail = (head, ...tail) => [head, tail];
headAndTail(6, 2, 3, 4, 5)

var a=[1, 4, -5, 10].find((n) => n < 0);
var b=[1, 5, 10, 15]. find(function(value, index, arr) {
    return value > 9;
var c=[1, 5, 10, 15].findIndex(function(value, index, arr) {
    return value > 9;
console.log(a);
console.1og(b);
console.log(c);

<template>
    {{ message. split('').reverse().join('') }}
</template>
<script>
    import { ref } from 'vue'
    export default {
        setup () {
            const message =ref( hello')
            return {
                 message
</script>

<template>
    <form action="" style="margin: 20px;">
　　 <p @click="tag" :style="{ width: W, height: h, backgroundColor: bgc }"></p> 
　　 <input type="button" value="红" @click="tag('red')" />
　　 <input type="button" value="黄" @click="tag( 'yellow')" />
　　 <input type="button" value="蓝" @click="tag('blue')" />
　　</ form>
</template>
<script>
　　import { reactive, toRefs } from "vue" ; 
　　export default {
　　　　setup() {
　　　　　　const state = reactive({
　　　　　　　　h: "200px"
　　　　　　　　W: "200px"
　　　　　　　　bgc: "red",
　　　　const tag= (b) => (state.bgc = b);
　　　　return{

<template>
　　<form action="#" sty1e=" margin: 20px; '>
　　　　<p @click="tag" :style="{ width: w, height: h, backgroundcolor: bgc}"></p>
　　</form>
</template>
<script>
import { reactive, toRefs } from "vue";
export default {
　　setup() {
　　　　const state . reactive({
　　　　　　h: "200px" ,
　　　　　　w: "200px"
　　　　　　bgc: "cyan",
let num = 0;
const tag=()=>(
　　num += 1;
　　if(num==1){
　　　　state.bgc = "pink" ; 
　　}else {
　　　　if(num==2){
　　　　　　state.bgc = "green"; 
　　　　}else {
　　　　　　state.bgc = "cyan"; 
　　　　　　num = 0;
return {
　　...toRefs(state),
</script>

<template>
        <li v-for="(val, key, index) in dict" :key=" index" >
             {{ index }} -- {{ val.name }}
    　　<li v-for="(val, index) in list" :key="index">
        　　<span v -if="val.age < 30">{{ index )) -- {{ val.name }}</span>
</template>
<script>
　　import { reactive, toRefs } from "vue";
　　export default {
　　setup() {
　　　　const state = reactive({ 
　　　　　　dict: {
　　　　　　　　　　name :"Tom",
　　　　　　　　　　age: 18,
　　　　　　　　　　name: "Li1y", 
　　　　　　　　　　age: 28，
　　　　　　　　　　name: "张三”， 
　　　　　　　　　　age: 30，
　　　　　　list: [{
　　　　　　　　name: "Tom" ， 
　　　　　　　　age: 18，
　　　　　　　　name: "Lily", 
　　　　　　　　age: 28，
　　　　　　　　name: "张三”，
　　　　　　　　age: 30，
　　　　return {
　　　　　　...toRefs(state),
</script>

<div class="pre">内容为: XX</div>
<div class=" after">反转后内容为: XX</div>
<div class="total">反转前内容为XX，反转后内容为xx</div>

<template>
　　<input type="text" v-model-"frstName" /> 
　　<input type="text" v-model="lastName" /><br> 
　　完整名称: {{fu1lName}}
</template>
<script>
　　import { reactive, toRefs, computed } from 'vue '
　　export default {
　　　　setup () {
　　　　const state = reactive({
　　　　　　firstName: hello',
　　　　　　lastName: 'Vue 3.0'
　　const fullName =computed(() => (
　　　　return state.firstName + ' ' + state.lastName;
　　return {
　　　　...toRefs(state),
　　　　fullName
</script>

<template> 
　　{{state}}
</template>
<script>
　　import {ref, watch} from 'vue'exportdefault
　　setup() {
　　　　const state = ref(0)
　　watch(state, (newValue, oldValue) => { 
　　　　console.1og( '原值为${ oldValue}')
　　　　console. log( '新值为${newValue}')
　　setTimeout(() => {
　　　　state. value++
　　}，1000)
　　return{
　　　　state
</script>

import Vue from 'vue' ;
import VueRouter from' vue-router ;
import page1 from ' ./page1.vue';
import page2 from ' ·/page2.vue';
const routes= [
    {path:' /page1',component: page1},
    {path:"/page2" , component: page2}
const router=new VueRouter({
　　　routes
export default router

<template>
    <h3>{{ msg }}</h3>
        <li v-for="(value, index) in arr" :key="index" , l(index]] -- [[value]]></li>
</template>
<script>
import { reactive, toRefs } from 'vue'
export default {
    setup() {
        const state = reactive({ msg: '武汉欢迎您! ', arr: ['lb', 'wq', 'lyd'] })
        return {
            ....toRefs(state)
</script>

<template>
    <my-hello></my-hello>
    <my-hello></my-hello>
</template>
<script>
import myHello from ' . /ChildComp . vue ' export default {
    components: {
        myHello
</script>

<template>
    <button @click="myBtn" toggle></button>
    <transition name="fade">
        <div class="box" v-if="show"></div>
    </transition>
</template>
<script>
import { reactive, toRefs } from 'vue'
export default {
    setup() {
        const state = reactive({ show: true })
        const myBtn = () => fstate.show = !state.show;
        return { ...toRefs(state), myBtn }
</script>
<style scoped>
.box {
    width: 100px;
    height: 200px;
    background-color: greenyellow;
.fade-enter-active, .fade-leave-active{
    transition: height 5s;
.fade-enter{
    height: 0;
.fade-enter-to{
    height: 200px;
.fade-leave{
    height: 200px;
.fade-leave-to{
    height: 0;
</style>

<template>
        <span>{Count)}</span> |
        <span>{{ double }}</span> <br>
        <button @click-"changecount">增加</button>
</template>
<script>
import { computed, reactive, toRefs, onMounted } from 'vue'
export default {
    setup() {
        const data = reactive({
            count: 0,
            double: computed(() => {
                return data.count * 2
            changecount: () => {
                data.count++
            onMounted(() => {
            data.count = 8
    const result = toRefs(data)
    return { ...result }
</script>

<template>
    <button v-if="msg <= 5" v-btn @click="abtn">{{ msg }}</button>
</template>
<script>
import { reactive, toRefs } from 'vue’ 
export default {
    setup() {
        const state = reactive({ msg: 0 })
        const abtn = () => {
            state.msg++;
        return {
            ...toRefs(state), abtn
        directives: {
            btn: {
                //局部自定义指令
                mounted: () => console.1og('mounted'),
                    //钩子函数
                    updated: (el) => {
                        //钩子函数
                        el.innerHTML = '钩子函数' + el.innerHTML;
                        console.log('updated')
                unmounted: () => console.1og(' unmounted') //钩子函数
</script>

<template>
    <button @click="increment">
        {{ state.count }} - {{ state.double }}
    </button>
</template>
<script>
import { reactive, computed } from 'vue'
export default {
    setup() {
        const state = reactive({
            count: 0,
            double: computed(() => state.count + 2)
        function increment() {
            state.count++
        return { state,increment }
</script>

<template>
    父组件:提供数据<br>
    <childa></childa>
</template>
<script>
import { provide } from 'vue '
import childa from './childrenA'
export default {
    components: {
        childa
    setup() {
        const obj = {
            name: '小红书',
            age: 18
        }//向子组件以及孙子组件传递名为info的数据
        provide('info', obj)
</script>

<template>
    子组件A: {{ student.name }}<br>
    <childb></childb>
</template>
<script>
import { inject } from 'vue' 
import childb from './childreB' 
export default{
    components: {
        childb
    setup() {
        const student = inject('info')
        return {student}
</script>

<template>
    孙子组件B: {{ student.age }}<br>
</template>
<script>
import { inject } from 'vue '
export default {
    setup() {
        const student = inject('info');
        return{student}
</script>

const state = reactive({
    message: 'Hello Vue3 World!'
const count = ref(0);

module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  devServer: {
    open: true,
    host: ' localhost',
    port: ' 8080',
    proxy: {
      '/api': {
        target: 'http://localhost',
        WS: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ' '
}

<template>
    <div class="container">
        <!--form表单容器-->
        <div class="forms-container">
            <el-form :model="form" ref="lbLogin" label-width="80px" class="loginForm" :rules="rules">
                <el-form-item label="用户名" prop="name">
                    <el-input v-model="form.name" placeholder="请输入用户名..."></el-input>
                </el-form-item>
                <el-form-item label="密&nbsp;&nbsp;&nbsp;码" prop="password">
                    <el-input v-model="form.password" type="password" placeholder="请输入密码..."></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" class="submit-btn" @click="onsubmit('lbLogin')">登录</el-button>
                    </el-form-item› </el-form>
                    <div class="tiparea">
                        <p>忘记密码？
                            <a href="#">立即找回</a>
                            <a href="/register">注册</a>
</template>
<script>
import { reactive, toRefs, getCurrentInstance } from 'vue'
export default {
    setup() {
    cost state = reactive({
        form: {
            name: ""
                password: ""
        rules: {
            name: [{
                required: true,
                message: '请输入用户名',
                trigger: "blur"
                class= "submit-btn"
            password: [{
                required: true
            message: '请输入密码'
            trigger: 'blur'
        const { ctx } = getCurrentInstance()
        const onSubmit = (formName) => {
            ctx.$refs(formName).validate((valid) => (
if (valid) {
                if (state.form.name === state.form.password) {
                    console.log('login success!!')
                else {
                    console.log('username and password is error!!')
            } else {
                console.log('error submit!! ')
                return false
        return {
            ...toRefs(state),
            onSubmit
</script›
‹style scoped>
.logo{
            width: 70 %;
            margin - top: 75px;
.container{
    position: relative;
    width: 100 %;
    background - color: #ff;
    min - height: 300px;
    overflow: hidden;
.forms - container{
    width: 100 %;
    margin: 50px auto;
    padding: 20px;
    /* border:1px solid #dedfe6;
    border-radius: 6px;
    box-shadow: 5px 5px 30px #dedfe6;*/
.login - titlef{
    text - align: center;
    font - weight: bolder;
    margin - bottom: 30px;
.submit - btnf{ width: 100 %; }
.tipareat{
    text - align: right;
    font - size: 12px;
    color: #333
.tiparea p at{
    color: #409eff;
    text - decoration: none;
</script>

<?php
$authors = array(
array(
  'date'=>'12021-05-02',
  'name'=>'刘兵1',
  'province'=>"湖北",
  'city'=>'武汉市',
  'address'=>'武汉解放大道717号',
  'zip'=>420104
array(
  'date'=>'2021-08-13',
  'name'=>'汪琼1',
  'province'=>"湖北",
  'city'=>'荆州市',
  'address'=>'荆州市武德路世纪佳园520号',
  'zip'=>430000
array(
  'date'=>'2021-05-02',
  'name'=>'刘兵2',
  'province'=>"湖北",
  'city'=>'武汉市',
  'address'=>'武汉解放大道717号',
  'zip'=>420104
array(
  'date'=>'2021-08-13',
  'name'=>'汪琼2',
  'province'=>"湖北",
  'city'=>'荆州市',
  'address'=>'荆州市武德路世纪佳园520号',
  'zip'=>430000
array(
  'date'=>'2021-05-02',
  'name'=>'刘兵3',
  'province'=>"湖北",
  'city'=>'武汉市',
  'address'=>'武汉解放大道717号',
  'zip'=>420104
array(
  'date'=>'2021-08-13',
  'name'=>'汪琼3',
  'province'=>"湖北",
  'city'=>'荆州市',

Vue3学习笔记（六）—— 作业

Vue3学习笔记（六）—— 作业

第一章：Vue 3.0 概述

1、选择题

2、简答题

3、实验题

3.1、实验一：Hello World

3.1.1、实验目的及要求

3.1.2、实验要求

第二章：Vue 语言基础——ECMAScript 6.0

1、选择题

2、简答题

3、实验题

3.1、实验一：猜数游戏

3.1.1、实验目的

3.1.2、实验内容

3.1.3、实验要求

第三章：Vue 的常用指令

1、选择题

2、简答题

3、程序分析

4、程序设计

3、实验题

3.1、实验一：Vue 3.0 基础

3.1.2、实验目的及要求

3.2.2、实验要求

第四章：计算属性与侦听属性

1、程序分析题

2、实验题

2.1、实验一：使用Vue.js制作购物车

2.1.1、实验目的及要求

2.1.2、实验要求

第五章：综合实战案例——制作影院订票系统前端页面

5.1、实验题

5.1.1、实验一：实现影院订票系统前端页面

5.1.1.1、实验目的及要求

5.1.1.2、实验要求

第六章：路由配置

1、选择题

2、简答题

3、程序阅读

4、编程题

5、实验题

5.1、实验一：路由综合案例

5.1.1、实验目的及要求

5.1.2、实验要求

第七章：组件与过渡

1、选择题

2、程序分析

3、实验题

3.1、实验一：使用组件实现简易轮播图

3.1.1、实验目的及要求

3.1.2、实验要求

第八章：生命周期

1、选择题

2、简答题

3、程序分析

3、实验题

3.1、实验一：使用自定义指令实现全选和取消全选

3.1.1、实验目的及要求

3.1.2、实验要求

第九章：组合式API

1、选择题

2、程序分析

3、实验题

3.1、实验一：响应式数据

3.1.1、实验目的及要求

3.1.2、实验要求

第十章：第三方插件

1、简答题

2、程序分析

3、实验题

3.1、实验一：数据交互

3.1.1、实验目的及要求

3.1.2、实验要求