02 . Vue入門基礎之條件渲染,列表渲染,事件處理器,表單控制元件繫結
vue基礎
宣告式渲染
Vue.js 的核心是一個允許採用簡潔的模板語法來宣告式地將資料渲染進 DOM 的系統
Example1
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <script type="text/javascript" src="lib/vue.js"></script> </head> <body> <div id="box"> {{ 10+203 }} <p>{{ myname }}</p> </div> <div> {{ 10+20 }} </div> <script> var vm = new Vue({ el:"#box", // vue 渲染開始的地方 data:{ myname:"kerwin" } // 狀態 }) </script> </body> </html>
我們已經成功建立了第一個 Vue 應用!看起來這跟渲染一個字串模板非常類似,但是 Vue 在背後做了大量工作。現在資料和 DOM 已經被建立了關聯,所有東西都是響應式的。我們要怎麼確認呢?開啟你的瀏覽器的 JavaScript 控制檯 (就在這個頁面開啟),並修改
app.message
的值,你將看到上例相應地更新。注意我們不再和 HTML 直接互動了。一個 Vue 應用會將其掛載到一個 DOM 元素上 (對於這個例子是
#app
) 然後對其進行完全控制。那個 HTML 是我們的入口,但其餘都會發生在新建立的 Vue 例項內部。
除了文字插值,我們還可以像這樣來繫結元素 attribute:
<div id="app-2">
<span v-bind:title="message">
滑鼠懸停幾秒鐘檢視此處動態繫結的提示資訊!
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '頁面加載於 ' + new Date().toLocaleString()
}
})
這裡我們遇到了一點新東西。你看到的
v-bind
attribute 被稱為指令。指令帶有字首v-
,以表示它們是 Vue 提供的特殊 attribute。可能你已經猜到了,它們會在渲染的 DOM 上應用特殊的響應式行為。在這裡,該指令的意思是:“將這個元素節點的title
attribute 和 Vue 例項的message
property 保持一致”。如果你再次開啟瀏覽器的 JavaScript 控制檯,輸入
app2.message = '新訊息'
,就會再一次看到這個綁定了title
attribute 的 HTML 已經進行了更新。
條件與迴圈
<div id="app-3">
<p v-if="seen">現在你看到我了</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
繼續在控制檯輸入
app3.seen = false
,你會發現之前顯示的訊息消失了。這個例子演示了我們不僅可以把資料繫結到 DOM 文字或 attribute,還可以繫結到 DOM 結構。此外,Vue 也提供一個強大的過渡效果系統,可以在 Vue 插入/更新/移除元素時自動應用過渡效果。
還有其它很多指令,每個都有特殊的功能。例如,
v-for
指令可以繫結陣列的資料來渲染一個專案列表:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
<div id=app-4>
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<script>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [{
text: '學習js'
},
{
text: '學習vue'
},
{
text: '整個厲害專案'
}
]
}
})
</script>
</body>
</html>
處理使用者輸入
為了讓使用者和你的應用進行互動,我們可以用
v-on
指令新增一個事件監聽器,通過它呼叫在 Vue 例項中定義的方法:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
<div id="app-5">
<p>{{ message}}</p>
<button v-on:click="reverseMessage">反轉訊息</button>
</div>
<script>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function() {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
模板語法
vue插值(v-if和v-show)
/*
文字{{}}
純HTML
v-html, 防止XSS,csrf (
(1)前端過濾
(2)後臺轉義(<> < >)
(3)給cookie加上屬性http
)
指令
v-html
v-show
*/
Example1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
<div id="box">
{{ 10+20 }}
{{ 10>20? 'aaa':'bbb' }}
{{ myname}}
<!-- 指令 -->
{{ myhtml }}
<div v-html="myhtml"></div>
</div>
<script type="text/javascript">
// console 中可以 vm.isShow=false隱藏
new Vue({
el: "#box",
data: {
myname: "youmen",
myhtml: "<b>11111</b>"
}
})
</script>
</body>
</html>
條件渲染
Vue-class繫結和Vue-style繫結
Example1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
<style>
.red {
background-color: red;
}
.yellow{
background-color: yellow;
}
.aaa{
}
.bbb{
}
</style>
</head>
<body>
<div id="box">
<button @click="handleClick()">click</button>
<div :class="isActive?'red':'yellow'">我是動態繫結class-三目寫法</div>
<div :class="classobj">我是動態繫結class-物件寫法</div>
<div :class="classarr">我是動態繫結class-陣列寫法</div>
<div :style="'background:'+(isActive?'red':'yellow')">我是動態繫結style-三目寫法</div>
<div :style="styleobj">我是動態繫結style-物件寫法</div>
<div :style="stylearr">我是動態繫結style-陣列寫法</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#box",
data: {
isActive: true,
classobj: {
a: true,
b: true
// a b, class名字
},
classarr: ["a", "b"],
styleobj: {
backgroundColor: "red"
},
stylearr: []
},
methods: {
handleClick() {
this.isActive = !this.isActive
}
}
})
</script>
</body>
</html>
條件渲染
Example1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
<div id="box">
<button @click="handleClick()">click</button>
<div v-if="isCreated">動態建立和刪除-1</div>
<div v-else>動態建立和刪除-2</div>
<ul v-if="datalist.length">
<li v-for="data in datalist">
{{ data }}
</li>
</ul>
<div v-else>
購物車空空如也
</div>
<div v-if="which==1">
111
</div>
<div v-else-if="which==2">
2222
</div>
<div v-else>
3333
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#box",
data:{
isCreated:false,
datalist:[],
which:1,
},
methods: {
handleClick(){
this.isCreated = !this.isCreated
this.datalist = ["111","222","333"]
}
}
})
</script>
</body>
</html>
列表渲染
我們可以用
v-for
指令基於一個數組來渲染一個列表。v-for
指令需要使用item in items
形式的特殊語法,其中items
是源資料陣列,而item
則是被迭代的陣列元素的別名。
v-for
還支援一個可選的第二個引數,即當前項的索引。也可以用of代替in作為分隔符,因為她更接近javascript迭代器的語法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
<style>
.active{
background-color: red;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li v-for="(data,index) in datalist">
{{ data }}--{{ index }}
</li>
</ul>
<ul>
<li v-for="(data,key) of obj">
{{ data }}--{{key}}
</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#box",
data:{
datalist:["111","222","333"],
obj:{
name:"youmen",
age:100,
location:"youmen"
}
}
})
</script>
</body>
</html>