前端:Vue.js起步
2019-03-10 本文已影响0人
朱芮林
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
尝试 Vue.js 最简单的方法是使用 JSFiddle 上的 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个
.html文件，然后通过如下方式引入 Vue：
第一种：
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者：
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
第一个起步Vue.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-bind练习</title>
<!-- 通过CDN引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- vue-app的根容器 -->
<div id="app">
<h2>{{message}}</h2>
</div>
<script type="text/javascript">
// 实例化一个Vue对象
var app = new Vue({
el: '#app',
data:{
message:'hello Vue!'
}
})
</script>
</body>
</html>
效果图
v-bind：数据的双向绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-bind练习</title>
<!-- 通过CDN引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- vue-app的根容器 -->
<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 type="text/javascript">
// 实例化一个Vue对象
var app = new Vue({
el: '#app',
data:{
name:'尤雨溪',
description:'Vue.js的创立者',
website:'Vue.js官网',
url:'http://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来使用
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue.js条件和循环的综合练习</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;
}
.card{
width: 300px;
height: 300px;
margin-right: 30px;
border: 1px solid #EEEEEE;
border-radius: 10px;
}
.card img{
width:100%;
height: 100%;
border-bottom-left-radius: 10px;
border-bottom-right-radius:10px ;
}
.p1{
color: #00FFFF;
}
.p2{
color: crimson;
}
</style>
</head>
<body>
<div id="app">
<h2 v-show="show">显示图书信息</h2>
<div class="container">
<!-- 通过循环遍历books数组 -->
<div class="card" v-for="book in books">
<!-- 显示图书的名称 -->
<h4>{{book.name}}</h4>
<!-- 绑定图书的封面属性 -->
<img :src="book.cover" >
<!-- 判定like的值,显示不同的文字 -->
<p v-if="book.like" class="p1">喜欢</p>
<p v-else class="p2">不喜欢</p>
</div>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
show:true,
books:[
{
name:'玉森画廊的客人',
cover:'img/s29987299.jpg',
like:true
},
{
name:'南腔北调',
cover:'img/s29987983.jpg',
like:false
},
{
name:'沙丁鱼罐头之味',
cover:'img/s29998459.jpg',
like:false
},
{
name:'觉醒众神',
cover:'img/s30013784.jpg',
like:true
}
]
}
})
</script>
</body>
</html>
效果图
