什么是Vue？
Vue 是一個構建用戶界面的JavaScript框架。
Vue 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。
Vue基本指令
v-text
/插入一段文本
<div id="app">
<p v-text="message"></p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
message:'hello world !'
}
})
</script>
v-html:
//既可以插入一段文本也可以插入html標簽
<div id="app">
<p v-html="message"></p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
message:"<input type='button'>"
}
})
</script>
v-bind:
v-bind 指令可以更新 HTML 屬性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
.bk_1{
background-color: cornflowerblue;
width: 200px;
height: 200px;
}
.bk_2{
background-color: red;
width: 200px;
height: 200px;
}
.bk_3{
border: 5px solid #000;
}
</style>
</head>
<body>
<div id="app">
<a v-bind:title="msg">疼迅</a>
<div :class="bk"></div>
<div :class="bk2"></div>
<div :class="{bk_2:temp}">aaaa</div>
<div :class="[bk2,bk3]">bbbb</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:"I wanna work for you!",
bk:'bk_1',
bk2:"bk_2",
bk3:'bk_3',
temp:true
}
})
</script>
</body>
</html>
v-for
列表渲染
我們用 v-for 指令根據一組數組的選項列表進行渲染。v-for 指令需要使用item in items 形式的特殊語法，items 是源數據數組并且 item 是數組元素迭代的別名。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
ul li{
list-style-type: none;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index1) in arr">
{{index1}} : {{item}}
</li>
</ul>
<ul>
<li v-for="(item,key,index) in obj1">
{{index}}:{{key}}:{{item}}
</li>
</ul>
<ul>
<li v-for="item in obj2">
{{item.username}}
{{item.age}}
{{item.sex}}
</li>
</ul>
<input type="button" value="hit me" @click = 'show()'>
</div>
<script>
new Vue({
el:'#app',
data:{
arr:[11,22,33,44,55],
obj1:{a:'Parker',b:'Alice',c:'Luke',d:'Scoot'},
obj2:[
{username:'Jack'},
{age:20},
{sex:'male'}
]
},
methods:{
show:function () {
this.arr.pop();
}
}
})
</script>
</body>
</html>
v-on
監聽事件
事件:click\keydown
<button v-on:click="greet"></button>
可以簡寫為 <button @click="greet"></button>
v-on 可以接收一個定義的方法來調用。
示例：
<div id="example-2">
<!-- `greet` 是在下面定義的方法名 -->
<button v-on:click="greet">Greet</button>
</div>
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// 在 `methods` 對象中定義方法
methods: {
greet: function (event) {
// `this` 在方法里指當前 Vue 實例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
// 也可以用 JavaScript 直接調用方法
example2.greet() // => 'Hello Vue.js!'
v-if
條件判斷(v-if\v-else)
v-if 指令將根據表達式的真假值(true 或 false )來決定是否插入 元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p v-if="pick">I am the boss</p>
<p v-else>I am the man!</p>
<p v-show="temp">Come to daddy</p>
<p v-show="ok">Will you love me?</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
pick:false,
temp:true,
ok:true
}
});
window.setInterval(function () {
vm.ok = !vm.ok
},1000)
</script>
</body>
</html>
v-show
根據表達式的真假值來渲染元素
用法大致一樣：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p v-if="pick">I am the boss</p>
<p v-else>I am the man!</p>
<p v-show="temp">Come to daddy</p>
<p v-show="ok">Will you love me?</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
pick:false,
temp:true,
ok:true
}
});
window.setInterval(function () {
vm.ok = !vm.ok
},1000)
</script>
</body>
</html>
v-model
可以用 v-model 指令在表單控件元素上創建雙向數據綁定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<input v-model="msg">
<p>{{msg}}</p>
<input type="button"value="變化"@click="change">
</div>
<script>
new Vue({
el:'#app',
data:{
msg:'aaaaaa'
},
methods:{
change:function () {
this.msg = 'Ghosted';
}
}
//
})
</script>
</body>
</html>
