day04 Vue.js初步学习
2019-03-06 本文已影响0人
黑桃_06ea
一、了解Vue.js
简单小巧的渐进式技术栈，可以一步一步、有阶段性地来使用Vue.js，不必一开始就使用所有的东西。使用Vue.js使得Web开发变得简单，同时也颠覆了传统的前端开发模式。
Vue.js官网
- MVVM模式
MVVM即：Model-View-View-Model模式。它由经典的软件架构MVC衍生而来。当View（视图层）变化时，会自动更新到ViewModel（视图模型），反之亦然。View和ViewModel之间通过双向绑定(data-binding)建立联系。
- 引入
引入CDN，只需要在创建的html文件中引入下图中的script代码，这样就成功地将Vue.js引入到我们的项目中并可以使用了。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- 简单练习
<html>
<head>
<meta charset="utf-8" />
<title>Vue.js快速起步</title>
<!-- 通过CDN引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<!-- vue-app根容器 -->
<div id="app">
<!-- 渲染显示HTML代码 -->
<h2>{{message}}</h2>
</div>
<script>
// 实例化Vue对象
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
二、数据绑定
- 双向绑定
<html>
<head>
<meta charset="utf-8" />
<title></title>
<title>book-bind练习</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- vue-app的根容器 -->
<div id="app">
<input type="text" v-model="name" placeholder="请输入"/>
<h2>你好，{{name}}</h2>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
name:''
}
})
</script>
</body>
</html>
day04-1.png
- 使用v-bind绑定data中的属性
<html>
<head>
<meta charset="utf-8">
<title>属性绑定练习</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>姓名：{{name}}</p>
<input type="text" v-bind:value="description" />
<a v-bind:href="url">{{website}}</a>
<img :src="avatar" />
</div>
<script>
var app = new Vue({
el: '#app',
data: {
name: '尤雨溪',
description:'Vue.js创立者',
website: 'Vue.js官网',
url: 'https://cn.vuejs.org/',
avatar: 'https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=c08a0c60a844ad342ebf8081e8996bc9/4afbfbedab64034f29596c8ba6c379310b551da2.jpg'
}
})
</script>
</body>
</html>
三、条件与循环
条件渲染指令： v-if、v-else-if、v-else：可以根据表达式的值在DOM中渲染或销毁元素/组件,与v-show不同的是，v-if是真正的条件渲染，适合条件不经常变更的场景；而v-show只是简单的CSS属性切换，使用于频繁切换条件。
- 列表渲染指令：v-for：当需要将一个数组遍历或枚举一个对象循环显示时，会用到列表渲染指令v-for，结合in来使用
- 仿蓝慕云实例
<html>
<head>
<meta charset="utf-8" />
<title></title>
<title>comdition练习</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
.container{
display: flex;
width:80%;
margin:0 auto;
}
.head{
border-bottom:2px solid #EEEEEE;
margin-bottom:30px; line-height:20px;
}
.card{
width:200px;
height:200px;
margin-right:30px;
border:3px solid #EEE;
border-radius:10px;
}
.card img{
width:100%;
height:100%;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.info{
line-height: 5px;
}
.p1{
font-size: 20px;
}
.p2{
font-size: 15px;
}
.p3{
font-size: 15px;
color:dodgerblue;
}
.p4{
font-size: 15px;
color:dodgerblue;
}
/* .p5{
font-size: 15px;
color: crimson;
margin-left:150px;
} */
</style>
</head>
<body>
<!-- vue-app的根容器 -->
<div id="app">
<h3 v-if="show" class="head">进行中的班课</h3>
<div class="container">
<div class="card" v-for="course in courses">
<img :src="course.cover" >
<div class="info">
<p class="p1">{{course.cnumber}}</p>
<p class="p2">{{course.name}}</p>
<p class="p3" v-if="course.partake">{{course.teacher}} {{course.cno}}</p>
<!-- <p v-if="course.partake" class="p4">{{course.cno}}</p> -->
<p v-else class="p4">{{course.teacher}}</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
show:true,
courses:[
{
cover:'img/vue.jpg',
cnumber:'软件1721',
name:'Web前端框架技术',
teacher:'许莫淇',
cno:'432135',
partake:true
},
{
cover:'img/spring.jpg',
cnumber:'软件1721',
name:'轻量级框架技术',
teacher:'许莫淇',
cno:'546553',
partake:true
},
{
cover:'img/java.jpg',
cnumber:'软件1721',
name:'Web应用开发',
teacher:'王萍',
cno:'741353',
partake:true
},
{
cover:'img/img5.png',
cnumber:'软件1721',
name:'程序设计基础',
teacher:'杨静丽',
cno:'747745',
partake:false
}
]
}
})
</script>
</body>
</html>
day04-2.png
- 作业练习
<html>
<head>
<meta charset="utf-8" />
<title></title>
<title>condition练习</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
.card{
width:400px;
height:110px;
border-radius:50% 50%;
/* overflow:hidden; */
}
.card img{
width:100%;
height:100%;
border-radius:50% 50%;
}
.card1{
height: 100px;
width: 100px;
float: left;
width: 25%;
}
.card2{
padding-top: 20px;
line-height: 5px;
float: right;
width: 70%;
}
.card3{
position: absolute;
padding-top: 20px;
padding-left:330px;
}
.p1{
font-size: 20px;
font-family: "黑体";
}
.p2{
font-size: 15px;
color: darkgrey;
}
.p3{
color: green;
}
.p4{
color:dimgray;
}
</style>
</head>
<body>
<!-- vue-app的根容器 -->
<div id="app">
<h4 v-if="show">推荐作者
换一批</h4>
<div class="container">
<div class="card" v-for="author in authors">
<div class="card1">
<img :src="author.face" >
</div>
<div class="card2">
<p class="p1">{{author.name}}</p>
<p class="p2">{{author.info}}</p>
</div>
<div class="card3">
<p v-if="author.attention" class="p3">√ 已关注</p>
<p v-else class="p4">+ 关注</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
show:true,
authors:[
{
face:'img/lufei04.jpg',
name:'胡七筒',
info:'写了325k子·11k喜欢',
attention:true
},
{
face:'img/jiuwei.jpg',
name:'汪波_偶遇科学',
info:'写了302.1k字·1.9k喜欢',
attention:true
},
{
face:'img/lufei01.jpg',
name:'梅拾璎',
info:'写了269.3字·23.4k喜欢',
attention:false
},
{
face:'img/qiaoba01.jpg',
name:'徐林Grace',
info:'写了677.9k字·5.5k喜欢',
attention:true
},
{
face:'img/lufei02.jpg',
name:'行距版君',
info:'写了535.1k字·51.8k喜欢',
attention:false
}
]
}
})
</script>
</body>
</html>
day04-3.png
