1.Vue.js介绍
Vue.js官网
Vue.js 是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架。
Vue是三大最热前端框架之一（Vue、React、Angular）。
2.Vue.js起步练习
在开始使用Vue之前，我们需要在官网通过cdn引入html
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
示例一：实例一个Vue对象在界面输出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue.js起步</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: 'Vue.js',
}
})
</script>
</body>
</html>
示例1.png
其中el表示element,data用于数据的存储
示例二:v-model和v-blind绑定指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-model数据双向绑定练习</title>
<!--通过cdn引入Vue.js -->
<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">
//实例化一个Vue对象
var app = new Vue({
el: '#app',
data:{
name:'',
}
})
</script>
</body>
</html>
示例2.1.png
v-model为双向绑定，数据的双向绑定是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">
<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:'https://vn.vuejs.org/',
avatar:'https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=c08a0c60a844ad342ebf8081e8996bc9/4afbfbedab64034f29596c8ba6c379310b551da2.jpg'
}
})
</script>
</body>
</html>
示例2.2.png
v-blindwei单向绑定，也可以简写为：<img :src="" >
示例三：条件与循环渲染指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--通过cdn引入Vue.js -->
<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: 200px;
height: 200px;
margin-right: 30px;
border: 1px solid #EEE;
border-radius: 10px;
text-align: center;
}
.card img {
width: 100%;
height: 100%;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.like {
color: red;
}
.no-like {
color: aquamarine;
}
</style>
</head>
<body>
<!-- Vue-app的根容器 -->
<div id="app">
<h2 v-if="show">显示图书信息</h2>
<div class="container">
<!-- 通过循环book数组 -->
<div class="card" v-for="book in books">
<!-- 显示图书的名称 -->
<h4>{{book.name}}</h4>
<!-- 绑定图书的封面属性 -->
<img :src="book.cover">
<!-- 判定like的值，显示不同的文字 -->
<p class="like" v-if="book.like">喜欢</p>
<p class="no-like" v-else>不喜欢</p>
</div>
</div>
</div>
<script type="text/javascript">
//实例化一个Vue对象
var app = new Vue({
el: '#app',
data: {
show: false,
books: [{
name: '挪威的森林',
cover: 'https://img3.doubanio.com/view/subject/l/public/s28120600.jpg',
like: true
},
{
name: '人间失格',
cover: 'https://img3.doubanio.com/view/subject/l/public/s7003165.jpg',
like: true
},
{
name: '百年孤独',
cover: 'https://img3.doubanio.com/view/subject/l/public/s6384944.jpg',
like: false
},
{
name: '青春咖啡馆',
cover: 'https://img3.doubanio.com/view/subject/l/public/s4227361.jpg',
like: false
}
]
}
})
</script>
</body>
</html>
示例3.png
Vue中循环指令为v-for,条件指令有v-if ,v-else,v-else-if,v-show,其中v-show只是简单的css属性切换，适合频繁切换条件
网友评论