推薦文章Vue.js——60分鐘快速入門
官網(wǎng)手冊
Vue.js是數(shù)據(jù)驅(qū)動的近零，你無需手動操作DOM。它通過一些特殊的HTML語法抄肖，將DOM和數(shù)據(jù)綁定起來久信。一旦你創(chuàng)建了綁定，DOM將和數(shù)據(jù)保持同步漓摩，每當(dāng)變更了數(shù)據(jù)裙士，DOM也會相應(yīng)地更新
- 本文代碼可以直接復(fù)制粘貼出效果
注意點，vue的代碼必須寫在底部管毙。
el: ----------對應(yīng)選擇的標(biāo)簽
data : {} ---- 對應(yīng)數(shù)據(jù)
methods :{} ---對應(yīng)函數(shù)
1腿椎、 首先我們打印Hello Vue!
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!--這是我們的View-->
<div id="app">
{{ message }}
</div>
</body>
<script>
// 這是我們的Model
var app = new Vue({
el: '#app', //此處關(guān)聯(lián)的是要綁定數(shù)據(jù)的元素
data: {
message: 'Hello Vue!'
}
})
/*或者
// 這是我們的Model
var exampleData = {
message: 'Hello Vue!'
}
// 創(chuàng)建一個 Vue 實例或 "ViewModel"
// 它連接 View 與 Model
new Vue({
el: '#app',
data: exampleData
})
*/
</script>
</html>
2、我們在原代碼基礎(chǔ)上稍作修改
v-model指令
使表單輸入和應(yīng)用狀態(tài)間的雙向綁定變得輕而易舉夭咬。
<div id="app">
<p>{{ message }}</p>
<input type="text" v-model="message"/>
</div>
這個時候啃炸，我們會發(fā)現(xiàn)我們在輸入框李敏啊輸入什么，p標(biāo)簽就會顯示什么
3.
v-bind指令
v-bind指令可以在其名稱后面帶一個參數(shù)卓舵，中間放一個冒號隔開南用，這個參數(shù)通常是HTML元素的特性（attribute），例如：v-bind:class,
v-bind:argument="expression"
<html>
<head>
<meta charset="UTF-8">
<title>input輸入框</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-2">
<span v-bind:title="message">
鼠標(biāo)懸停幾秒鐘查看此處動態(tài)綁定的提示信息！
</span>
</div>
</body>
<script>
var app2 = new Vue({
el: '#app-2',
data: {
message: '頁面加載于 ' + new Date()
}
})
</script>
</html>
4.
v-if條件與循環(huán)
<body>
<div id="app-3">
<p v-if="seen">現(xiàn)在你看到我了</p>
</div>
</body>
<script>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true //此處若為false裹虫，則不顯示p標(biāo)簽中的內(nèi)容
}
})
</script>
5.
v-for循環(huán)
<body>
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
</body>
<script>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '學(xué)習(xí) JavaScript' },
{ text: '學(xué)習(xí) Vue' },
{ text: '整個牛項目' }
]
}
})
</script>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul class="pagination">
<li v-for="n in pageCount">
<a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>
</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
activeNumber: 1,
pageCount: 10
}
})
</script>
</html>
- 注意
v-for="n in pageCount"這行代碼肿嘲，pageCount是一個整數(shù)，遍歷時n從0開始筑公，然后遍歷到pageCount –1結(jié)束睦刃。 - 在控制臺里，輸入
app4.todos.push({ text: '新項目' })十酣，你會發(fā)現(xiàn)列表中添加了一個新項涩拙。
圖片.png
組件化應(yīng)用構(gòu)建
<html>
<head>
<meta charset="UTF-8">
<title>組建</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-7">
<ol>
<!-- 現(xiàn)在我們?yōu)槊總€todo-item提供待辦項對象 -->
<!-- 待辦項對象是變量，即其內(nèi)容可以是動態(tài)的 -->
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ol>
</div>
</body>
<script>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ text: '蔬菜' },
{ text: '奶酪' },
{ text: '隨便其他什么人吃的東西' }
]
}
})
</script>
</html>
