学习目标:
昨天主要进行了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天申请自习座位。
留言功能:学生提起留言建议。
学习时间:
第二天上午有会所以从下午开始
第三天上午下午