什么是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 href="http://www.qq.com" 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>
