2021-06-30 山东大学软件学院暑期项目实训-day2&day3

最新推荐文章于 2024-09-07 15:49:58 发布

布鲁布鲁ฅ

最新推荐文章于 2024-09-07 15:49:58 发布

阅读量132

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/m121388/article/details/118367725

版权

学习目标：

昨天主要进行了VUE的入门，看书和博客了解了VUE的一些基本语法，今天主要是进行了小组内的需求分析和部分设计。
其中教材参考：《Vue.js实战》
博客链接：添加链接描述

学习内容：

VUE基础知识入门：

el用于指定一个页面中已存在的DOM元素来挂载VUE实例，可以是HTMLElement也可以是CSS选择器。除了下面用简写，也可以写为document.getElementById(‘app’)
v-model指令，它的值对应于我们创建的Vue实例中data选项中的Name字段，这就是VUE的数据绑定。
{{}}是最基本的文本插值方法，它会自动将我们的双向绑定的数据实时显示出来，但是Vue.js只支持单个表达式，不支持语句和流控制。

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head lang="en">
    <meta charset="UTF-8">
    <title>hello</title>
    <!--1.引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="name" placeholder="你的名字">
    <h1>hello,{{name}}</h1>
</div>
<script>
    const app = new Vue({
        el:"#app",
        data:{name:'' },
    });
</script>
</body>
</html>

v-bind的用法
（1）v-bind的基本用法，v-bind后面是：属性名=，是表示绑定这个属性，绑定之后，对应的值要去vue的数据里面找。当我们在控制台改变url时，对应也会变化。相同的，我们还可以绑定图片src属性、超链接的class。
（通常我们可以将v-bind简写成<a :href="url">click me</a>）

 <body>
    <div class="app">
        <a v-bind:href="url">点我</a>
        <img v-bind:src="imgsrc" width="200px"/>
    </div>
 <script>
     var app = new Vue({
         el:'.app',
         data:{
             url:"https://www.baidu.com",
             imgsrc:"https://cn.vuejs.org/images/logo.png"
         }
     });
 </script>
</body>

（2）v-bind的动态绑定，有对象语法，数组语法，在组件上使用三种方式，最常见的是元素样式名称class和内联样式style的动态绑定。
对象语法简单示例：

<div id="app">
    <div class="static" :class="{'active':isActive,'error':isError}"></div>
</div>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            isActive:true,//class内的表达式每项为真时，对应的class类名就会加载
            isError:false
        }
    });
</script>

v-on，用来绑定事件监听器，这样我们可以做一些交互，可以用缩写：
<button @click="handleClose">点击隐藏</button>

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head lang="en">
    <meta charset="UTF-8">
    <title>hello</title>
    <!--1.引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <p v-if="show">这是一段文本</p>
    <button v-on:click="handleClose">点击隐藏</button>
</div>
<script>
    const app = new Vue({
        el:"#app",
        data:{show:true },
        methods:{
            handleClose:function (){
                this.close();
            },
            close:function(){
                this.show=false;
            }
        }
    });
</script>
</body>
</html>

6.内置指令

（1）v-cloak，解决初始化慢导致页面闪动的最佳实践，简单项目实用
（2）v-once，作用是定义它的元素或组件只渲染一次，首次渲染后，不再重新渲染，被视为静态内容。

（3）v-if，v-else-if,v-else

<body>
    <div id="app">
        <div v-if="role=='hello'|| role=='admin'">您好，admin</div>
        <div v-else-if="role=='hi'">嗨</div>
        <div v-else>您无权访问！</div>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                 role:"admin",
             }
         });
     </script>
</body>

（4）v-show，与v-if基本一致，不过它改变元素的CSS属性display，当v-show表达式的值是false时，元素会隐藏，查看DOM结构看到元素上加载了内联样式display：none。
（5）v-for

<body>
    <div id="app">
        <p v-for="(user,index) in list">{{user.id}},{{user.name}},索引:{{index}}</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                list:[
                    {id:1,name:'user1'},
                    {id:2,name:'user2'},
                    {id:3,name:'user3'}
                ],
             }
         });
     </script>
</body>

需求讨论：

小组需求分析结果如下：
创建教室模板/类型：大教室，小教室，机房教室。创建教室模板，名字，详细介绍。
创建具体教室：教室模板类型，教室位置，大小＊×＊。
教室管理：座位管理，增加删除，编辑改名。
维修申请：申请表信息管理。
学生管理：查看所有小程序用户的信息。学生选座记录。违约记录。超过三次违约设置一个月不可选座的惩罚。
教学活动：学生提起教学活动。提前2天预约活动教室，提前1天申请自习座位。
留言功能：学生提起留言建议。

学习时间：

第二天上午有会所以从下午开始
第三天上午下午

学习产出：

博客一篇简易需求说明书一篇

布鲁布鲁ฅ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-06-30 山东大学软件学院暑期项目实训-day2&day3

学习目标：今天主要是进行了小组内的需求分析和部分设计学习内容：小组需求分析结果如下：创建教室模板/类型：大教室，小教室，机房教室。创建教室模板，名字，详细介绍。创建具体教室：教室模板类型，教室位置，大小＊×＊。教室管理：座位管理，增加删除，编辑改名。维修申请：申请表信息管理。学生管理：查看所有小程序用户的信息。学生选座记录。违约记录。超过三次违约设置一个月不可选座的惩罚。教学活动：学生提起教学活动。提前2天预约活动教室，提前1天申请自习座位。留言功能：学生提起留言建议。学习产出：
复制链接

扫一扫