1.Vue.js介紹
Vue.js官網(wǎng)
Vue.js 是一個JavaScriptMVVM庫，是一套構(gòu)建用戶界面的漸進(jìn)式框架辕狰。
Vue是三大最熱前端框架之一（Vue、React控漠、Angular）蔓倍。
2.Vue.js起步練習(xí)
在開始使用Vue之前，我們需要在官網(wǎng)通過cdn引入html
<!-- 開發(fā)環(huán)境版本盐捷，包含了有幫助的命令行警告 -->
<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用于數(shù)據(jù)的存儲
示例二:v-model和v-blind綁定指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-model數(shù)據(jù)雙向綁定練習(xí)</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為雙向綁定，數(shù)據(jù)的雙向綁定是Vue.js最核心的功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-bind練習(xí)</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的創(chuàng)立者',
website:'Vue.js官網(wǎng)',
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="" >
示例三：條件與循環(huán)渲染指令
<!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">
<!-- 通過循環(huán)book數(shù)組 -->
<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中循環(huán)指令為v-for,條件指令有v-if ,v-else,v-else-if,v-show,其中v-show只是簡單的css屬性切換，適合頻繁切換條件
