Vue复习

最新推荐文章于 2024-10-27 11:25:22 发布
最新推荐文章于 2024-10-27 11:25:22 发布
阅读量375 收藏 6
点赞数 10
文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1833919188/article/details/135316164
版权
本文介绍了Vue的基本概念，包括HTML模板中的v-model指令、条件渲染(v-if,v-else-if,v-else)以及v-for循环用于列表渲染。还展示了如何在Vue项目中创建导航、表单和处理数据绑定。
摘要由CSDN通过智能技术生成

 Vue入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <h1>上下文背景</h1>
    <p>请使用上下文背景类来提供“由颜色表达的某种意义”。</p>
    <p>请注意，如果您想要不同的文本颜色，您还可以添加 .text-* 类：</p>
    <p class="bg-primary text-white">此文本很重要。</p>
    <p class="bg-success text-white">此文本表示成功。</p>
    <p class="bg-info text-white">此文本代表了一些信息。</p>
    <p class="bg-warning text-white">此文本表示警告。</p>
    <p class="bg-danger text-white">此文本代表危险。</p>
    <p class="bg-secondary text-white">次要背景颜色。</p>
    <p class="bg-dark text-white">深灰色背景颜色。</p>
    <p class="bg-light text-dark">浅灰色背景色。</p>


</head>
<body>

<div class="container mt-3">
  <h2>导航</h2>
  <p>基础的水平菜单：</p>
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link" href="#">链接</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">链接</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">链接</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

 

VUE常见指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue基础代码/js/vue.js"></script>
</head>
<body>
    <!-- <div id="app">
        <a v-bind:href="url">链接1</a>
        <a :href="url">链接2</a>
        <input type="text" v-model="url">
        <br><br>
        <input type="button" value="按钮1" v-on:click="handle()">
        <input type="button" value="按钮2" @click="handle()">
    </div> -->
    <div id="app">
        年龄<input type="text" v-model="age">经判定，为：
        <span v-if="age <= 35">年轻人（35岁及以下）</span>
        <span v-else-if="age>35 && age<60">中年人（35-60）</span>
        <span v-else>老年人（60及以上）</span>
        <br><br>
        年龄<input type="text" v-model="age">经判定，为：
        <span v-show="age <= 35">年轻人（35岁及以下）</span>
        <span v-show="age>35 && age<60">中年人（35-60）</span>
        <span v-show>老年人（60及以上）</span>
        <br><br>
    </div>
    <div id="app1" ><!-- v-for="(遍历出来的元素，遍历的索引)in 遍历的元素" -->
        <div v-for="addr in addrs" >{{addr}}</div>
        <div v-for="(addr,index)in addrs" >{{index}}:{{addr}}</div>
    </div>
</body>
<script>
    /* new Vue({
        el:"#app",
        data:{
          url:"http://www.baidu.com"  
        }
    })
    new Vue({
        el:"#app",
        data:{
          
        },
        methods: {
            handle:function(){
                alert("你点我了一下");
            }
        }
    }) */
    new Vue({
        el:"#app",
        data:{
            age:20
        },
        methods:{

        }
    })
    new Vue({
        el:"#app1",
        data:{
            addrs:["北京","上海","西安","成都","深圳"]
        },
        methods:{

        }
    })
</script>
</html>

 

Vue 常见指令练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue基础代码/js/vue.js"></script>
</head>
<body>
    <div id="app">
        <table border="1px" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr >
            <tr align="center" v-for="(user, index) in users"  >
                <td>{{index+1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>
                    <span v-if="use.gender==1">男</span>
                    <span v-if="use.gender==2">女</span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score>=85">优秀</span> 
                    <span v-else-if="user.score<85">及格</span>
                    <span v-else style="color:red">不及格</span>
                </td>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            users:[{
                name:"Tom",
                age:20,
                gender:1,
                score:78,
            },{
                name:"Rose",
                age:18,
                gender:2,
                score:86,
            },{
                name:"Terry",
                age:26,
                gender:1,
                core:90,
            },{
                name:"Tony",
                age:30,
                gender:1,
                score:52,
            }]
    },
    methods: {
        
    },
    })
</script>
</html>

Vue-project练习

 

<template>
    <div>
        <el-container style="height: 700px; border: 1px solid #eee">
            <el-header style="font-size:40px;background-color: rgb(238, 241, 246)">tlias智能学习辅助系统</el-header>
            <el-container>
              <el-aside width="230px" style="border: 1px solid #eee">
                <el-menu :default-opends="['1','3']">
                  <el-submenu index="1">
                    <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
                    <el-menu-item index="1-1">
                      <router-link to="/dept">部门管理</router-link>
                    </el-menu-item>
                    <el-menu-item index="1-2">
                      <router-link to="/emp">员工管理</router-link>
                    </el-menu-item>
                    
                  </el-submenu>
                  </el-menu>
            </el-aside> 
          <el-main>
            <!-- from表单 -->
            <el-form :inline="true" :model="searchFrom" class="demo-form-inline">
              <el-form-item label="姓名">
                <el-input v-model="searchFrom.name" placeholder="姓名"></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-select v-model="searchFrom.region" placeholder="性别">
                  <el-option label="男" value="1"></el-option>
                  <el-option label="女" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="入职日期">
                <!-- 日期选择器 -->
                <el-date-picker
                  v-model="searchFrom"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
              </el-form-item>
            </el-form>
            <el-table :data="tableData" border>
              <el-table-column prop="name" label="姓名" width="180">
              </el-table-column>
              <el-table-column prop="image" label="图像" width="180">
                <template slot-scope="scope">
                  <img :src="scope.row.image" width="100px" height="70px">
                </template>
              </el-table-column>
              <el-table-column prop="gender" label="性别" width="140">
                <template slot-scope="scope">
                  {{ scope.row.gender==1?'男':'女' }}
                </template>
              </el-table-column>
              <el-table-column prop="job" label="职位" width="140">
              </el-table-column>
              <el-table-column prop="entrydate" label="入职日期" width="180">
              </el-table-column>
              <el-table-column prop="updatetime" label="最后操作时间" width="230">
              </el-table-column>
              <el-table-column  label="操作">
                <el-button type="primary" size="mini">编辑</el-button>
                <el-button type="danger" size="mini">删除</el-button>
              </el-table-column>
            </el-table> 
            <br><br>
            <el-pagination 
              background 
              layout="sizes,prev, pager, next,jumper,total" 
              @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
              :total="1000">
            </el-pagination>
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>
<script>
 /* import axios from 'axios';  */

export default {
    data() {
      return {
        tableData:[],
        searchFrom:{
          name:"",
          gender:"",
          entrydata:[]
        }
      }
    },
    methods:{
      onSubmit:function(){
        alert("查询数据");
      },
      handleSizeChange:function(val){
        alert("每页记录变化"+val)
      },
      handleCurrentChange:function(val){
        alert("页码发生变化"+val)
      }

    }
   /*  mounted() {
      //发送异步请求，获取数据
      axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result)=>{
        this.tableData=result.data.data;
      })
    },  */
}
</script>
<style>

</style>

 

a1833919188
关注
Vue复习1
08-08
Vue复习1
前端框架Vue期末复习资料
11-13
前端框架 Vue 期末复习资料 Vue 是一个前端框架，提供了许多强大且灵活的功能，以下是 Vue 的一些重要知识点： 1. 生命周期钩子函数 * beforeCreate: 实例创建之前 * created: 实例创建完成后被调用 * ...
vue复习.docx
12-22
Vue.js是一个流行的前端JavaScript框架，用于构建用户界面。它的核心特性包括数据驱动和组件化，这使得开发更加高效和可维护。Vue.js采用MVVM（Model-View-ViewModel）设计模式，其中Model代表数据模型，View是用户...
vue复习课源码.rar
07-24
"Vue复习课源码.rar"这个压缩包很可能包含了某个Vue.js教程或课程的源代码，帮助学习者深入理解和实践Vue.js的关键概念。我们将通过章节4的源码来探讨一些重要的Vue知识点。 **1. 组件化开发** Vue.js的核心特性之...
vue的简单-复习文件
02-12
在这个“vue的简单-复习文件”中，我们将会深入探讨Vue的一些核心概念，包括表单处理、键值（key）的原理、列表渲染、事件处理、修饰符、数据代理以及MVVM模型和数据绑定。 1. **表单处理**：Vue提供了便捷的双向...
vue3中toRef和toRefs的用法以及使用场景
涂涂
10-25 439
toRef。
vue实现语音合成功能，Android和wap端
ahualong1的博客
10-25 933
vue项目需要实现小说朗读功能，wap端和Android APP端，wap端能使用的方法在Android端不能使用，需要使用原生Android的方法实现小说朗读功能。
Vue3用户关注与粉丝列表展示
最新发布
m0_74963840的博客
10-27 414
粉丝列表小组件
【VUE点击父组件按钮，跳转到子组件】
weixin_44665318的博客
10-25 723
要实现在Vue中，父组件通过点击按钮进入子组件的弹窗，并在弹窗中嵌套<el-table></</</</</</</</</</exportdefaulttruedatareturn// 表格数据'张三'20'李四'25;this$emit;;</propsshowDialogshowDialog这样，当在父组件中点击按钮时，子组件的弹窗会显示出来，并在弹窗中展示表格内容。点击子组件中的关闭按钮或其他关闭逻辑时，弹窗会关闭。同时，确保tableData变量已经定义并包含正确的表格数据。
vue子组件修改父组件的值
Cosmic Lover
10-24 249
一般来说，子组件不应该直接修改父组件的 props，因为这会违背 Vue 的单向数据流原则。
input标签v-model属性失效
m0_53820941的博客
10-23 413
疑惑： 很奇怪的一点是，nextTick()前边再加一句ans.value=""就又失效了，真离谱，如下。问题：input标签v-model属性失效，清空ans, 但是ui上依然显示。解决方案： 使用nextTike, 注意要import。
在vue中 如何实现跨域
Sherry Tian的博客
10-26 1535
跨域问题是Web开发中常见的挑战，那么如何解决跨域呢，我们一起来看看吧！
Vue中的过渡与动画：提升用户体验的秘籍
x15514104477的博客
10-22 954
此文章详细讲解了Vue中的各种过渡知识的方法以及动画的各种方法，以及两种结合。本文章使用大量的代码演示详细使读者理解更加透彻
vue使用xlsx以及file-saver进行下载xlsx文件以及Unit8Array、ArrayBuffer、charCodeAt的使用
lixu_boke的博客
10-24 360
对象的一个方法，它用于返回给定位置的字符的 Unicode 编码值（整数）。Unicode 编码是一个标识字符的数字，它包含了世界上几乎所有字符的映射，包括常见字符、特殊字符和表情符号。代表内存之中的一段二进制数据，可以通过“视图”进行操作。创建完后，可以以对象的方式或使用数组下标索引的方式引用数组中的元素。charCodeAt：方法通常用于处理字符串中的字符，以便执行各种文本操作，比如排序、查找、比较等。对象来操作，它们会将缓冲区中的数据表示为特定的格式，并通过这些格式来读写缓冲区的内容。
【Vue】audio标签播放amr音频文件
weixin_47375144的博客
10-24 885
前端播放 amr 音频文件，想使用 audio标签（该标签支持 mp3、ogg 和 wav格式）少了将 链接转File的步骤，直接传文件即可。
vue渲染数据出现TypeError: Cannot read properties of undefined (reading ‘key‘)
寂寥之秋
10-23 226
我这里是因为使用了iview的table，其中某一列需要树形控制展开，所以使用了tree的功能（组件功能链接：https://www.iviewui.com/view-ui-plus/component/form/table#tree），问题就出在rowKey上，我这里的rowKey字段是sn，然后children的数据因为和父级行数据是同一个数据的不同形式，所以也有相同的sn字段，所以造成了重复的rowKey，导致二次渲染数据时发生异常。
vue2.x 的依赖收集通知更新
weixin_46074818的博客
10-23 765
Vue 的响应式系统是基于设计的。当某些数据（状态）发生变化时，依赖这些数据的视图或计算属性会自动更新。为了实现这一点，Vue 会对数据进行 “劫持”（通过 Object.defineProperty 或 Proxy），并在读取数据时进行，在数据变化时通知所有依赖进行更新。在这个例子中，当组件被挂载时，访问 this.message 会建立一个依赖关系，将组件的 Watcher 与 message 属性关联起来。
vue3中button组件的开发与使用
涉及毕业论文、远程调试、网站、小程序、app、python、前端、pycharm、vscode等
10-26 250
vue中button组件的开发与引用
vue 项目i18n国际化，快速抽离中文，快速翻译
一休~的博客
10-22 377
在想要使用多语言的页面，用$t(‘属性名’)来生成标题。这里的t是引入了i18n之后，自动挂载在vue实例上的功能。在script上使用this.$t。在文件鼠标右键有个transformFile i18n的选项，点击之后就会自动抽离，自动追加到zh.json文件末尾，还会自动去重。在项目根目录创建vue-i18n-transform.config.js。在src目录下创建文件夹lang以及index.js。/src/lang/index.js文件内容如下。另外他也有一个node组件。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值