Vue.js是一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。
Vue.js简单实例:
<html>
<head>
<meta charset="utf-8">
<title>Vue.js实例</title>
</head>
<body>
<!-- View开始-->
<div id="msg">
{{message}}
</div>
<!-- View结束-->
</body>
<script type="text/javascript">
<!-- Model开始-->
var exampleData={
message:"panda"
}
<!-- Model结束-->
<!-- ViewModel开始-->
new Vue ({
el:"#msg",
data:exampleData
})
<!-- ViewModel结束-->
</script>
</html>
MVVM模式本身实现了双向绑定,在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。
<div id="msg">
<p>{{message}}</p>
<input type="text" v-model="message">
</div>
Vue.js提供了一些常用的内置指令
①v-if指令
是条件渲染指令,它根据表达式的真假来删除和插入元素,它的基本语法如下:
v-if=”expression”
expression是一个返回布尔值的表达式,表达式可以是一个bool属性,也可以是一个返回bool的运算式。如:
<html>
<head>
<meta charset="utf-8">
<title>Vue.js实例</title>
<script src="http://cdn.bootcss.com/vue/2.2.5/vue.js"></script>
</head>
<body>
<div id="msg">
<h1>hello,Vue.js</h1>
<h1 v-if="yes">yes!</h1>
<h1 v-if="no">no!</h1>
<h1 v-if="age >=18">age:{{age}}</h1>
<h1 v-if="name.indexOf('panda') >=0">name:{{name}}</h1>
</div>
<script type="text/javascript">
new Vue ({
el:'#msg',
data:{
yes:true,
no:false,
age:20;
name:'lidequan'
}
})
</script>
</body>
</html>
预览效果:
②v-show指令
是条件渲染指令,使用其指令的元素始终会被渲染到HTML,它只是简单的为元素设置CSS的style属性。
<html>
<head>
<meta charset="utf-8">
<title>Vue.js实例</title>
<script src="http://cdn.bootcss.com/vue/2.2.5/vue.js"></script>
</head>
<body>
<div id="msg">
<h1>hello,Vue.js</h1>
<h1 v-show="yes">yes!</h1>
<h1 v-show="no">no!</h1>
<h1 v-show="age >=18">age:{{age}}</h1>
<h1 v-show="name.indexOf('panda') >=0">name:{{name}}</h1>
</div>
<script type="text/javascript">
new Vue ({
el:'#msg',
data:{
yes:true,
no:false,
age:20,
name:'lidequan'
}
})
</script>
</body>
</html>
预览效果
③v-else指令
可以用v-else指令为v-if指令或者v-show指令添加一个“else”块,v-else元素必须立即跟在v-if或者v-show元素的后面,否则不能被识别。如
<html>
<head>
<meta charset="utf-8">
<title>Vue.js实例</title>
<script src="http://cdn.bootcss.com/vue/2.2.5/vue.js"></script>
</head>
<body>
<div id="msg">
<h1 v-if="age >=18">age:{{age}}</h1>
<h1 v-else>name:{{name}}</h1>
<h1>分割线</h1>
<h1 v-if="name.indexOf('panda') >=0">name:{{name}}</h1>
<h1 v-else>sex:{{sex}}</h1>
</div>
<script type="text/javascript">
new Vue ({
el:'#msg',
data:{
age:20,
name:'panda',
sex:'男'
}
})
</script>
</body>
</html>
预览效果:
注意:v-else元素是否渲染到HTML页面,取决于前面使用v-if还是v-show;如果v-if为ture,后面的v-else不会渲染到html;如果v-show为ture,后面的v-else还会渲染到html;
④v-for指令
基于一个数组渲染一个列表,它和JavaScript的遍历语法相似。如:
<html>
<head>
<meta charset="utf-8">
<title>Vue.js实例</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/vue/1.0.20/vue.js"></script>
</head>
<body>
<div id="msg">
<table class="table table-bordered">
<thead>
<tr>
<td>name</td>
<td>age</td>
</tr>
</thead>
<tbody>
<tr v-for="person in people">
<td>{{person.name}}</td>
<td>{{person.age}}</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
new Vue ({
el:'#msg',
data:{
people:[{
age:20,
name:'panda'
},
{
age:20,
name:'lidequan'
},
{
age:20,
name:'pps'
},
{
age:20,
name:'dqs'
},]
}
})
</script>
</body>
</html>
预览效果:
⑤v-bind指令可以缩写为冒号
v-bind指令可以在其名称后面带一个参数,中间放一个冒号隔开,这个参数通常是HTML元素的特性,如v-bind:class
v-bind:agruments=”expression”如:
<html>
<head>
<meta charset="utf-8">
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/vue/1.0.20/vue.js"></script>
</head>
<body>
<div id="msg">
<ul class="pagination">
<li v-for="n in pageCount" v-bind:class="activeNumber === n+1 ? 'active' : ''">
<a href="javasscript:;" >{{n+1}}</a>
</li>
</ul>
</div>
<script type="text/javascript">
new Vue ({
el:'#msg',
data:{
activeNumber:2,
pageCount:8
}
})
</script>
</body>
</html>
预览效果
⑥v-on指令 可以缩写为@
v-on指令用于监听DOM事件,用法与v-bind相似。如:
<html>
<head>
<meta charset="utf-8">
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/vue/1.0.20/vue.js"></script>
</head>
<body>
<div id="msg"style="width:300px;height:300px;margin:0 auto" >
<p><input type="text" v-model="message"></p>
<p>
<button v-on:click="greet" style="width:100px;height:40px"></button>
</p>
<p>
<button v-on:click="say('hi')">hi</button>
</p>
</div>
<script type="text/javascript">
new Vue ({
el:'#msg',
data:{
message:"hello vueJs"
},
methods:{
greet:function(){
alert(this.message)
},
say:function(msg){
alert(msg)
}
}
})
</script>
</body>
</html>
小例子,如下:
<html>
<head>
<meta charset="utf-8">
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/vue/1.0.20/vue.js"></script>
</head>
<body>
<div id="msg" style="width:600px;min-height:500px;margin:0 auto" >
<fieldset>
<legend>添加</legend>
<div class="form-group">
<label>姓名</label>
<input type="text" v-model="newPerson.name"/>
</div>
<div class="form-group">
<label>年龄</label>
<input type="text" v-model="newPerson.age"/>
</div>
<div class="form-group">
<label>性别</label>
<select v-model="newPerson.sex"/>
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<div class="form-group">
<label></label>
<button @click="createPerson" class="btn btn-info" style="width:100px;height:30px;" >添加</button>
</div>
</fieldset>
<table class="table table-striped">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>删除</th>
</tr>
</thead>
<tbody>
<tr v-for="person in people">
<td>{{person.name}}</td>
<td>{{person.age}}</td>
<td>{{person.sex}}</td>
<td :class="text-center"><button @click="deletePerson($index)" style="width:100px;height:30px;">删除</button></td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
new Vue ({
el:'#msg',
data:{
newPerson:{
name:"",
age:0,
sex:'男'
},
people:[{
name:'panda',
age:18,
sex:'女'
},
{
name:'pp',
age:12,
sex:'女'
},
{
name:'pps',
age:18,
sex:'女'
},
{
name:'dq',
age:18,
sex:'男'
}]
},
methods:{
createPerson:function(){
this.people.push(this.newPerson);
this.newPerson={name:'',age:0,sex:'男'}
},
deletePerson:function(index){
this.people.splice(index,1)
}
}
})
</script>
</body>
</html>
预览效果