vue介绍
Vue是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,易于上手,便于与第三方库或既有项目整合,另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue也能够为复杂的单页应用提供驱动。
特点:轻量级、js语法、入门及上手快
vue与jQuery比较:
jQuery关注dom;vue关注数据,不关注dom
vue初步使用介绍
1、引入外部文件
2、构造Vue对象
3、使用{{}}将数据和DOM对象绑定
4、改变数据即可查看结果
eg:用Vue在浏览器页面显示"Hello World"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VUE</title>
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" cintent="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div class="container" id="app">
<div class="row">
<div class="col-md-12">
<p>{{content}}</p>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var vue = new Vue({
el:"#app",
data:{
content:'Hello World'
}
});
</script>
显示结果:
Vue对象介绍
el:Vue的作用域,即只有在这个作用域里面的dom受Vue控制
data:vue界面的数据模型,该数据模型为一个javascript对象,且在运行过程中该对象属性不允许增加,因此页面数据模型必须提前定义好
methods:事件处理方法对象
eg:使用vue实现checkbox、radio、password、select
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VUE</title>
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" cintent="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div class="container" id="app">
<div class="row">
<div class="col-md-12">
<input type="checkbox" value="apple" v-model="fruits" name="ck1" />苹果
<input type="checkbox" value="banana" v-model="fruits" name="ck1" />香蕉
{{fruits}}
<input type="password" v-model="name" />
{{name}}
<input type="radio" value="apple" v-model="fruit" name="rd1" />苹果
<input type="radio" value="banana" v-model="fruit" name="rd1" />香蕉
{{fruit}}
<select v-model="sel" name="sel">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
{{sel}}
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var vue = new Vue({
el:"#app",
data:{
fruits:'',
name:'',
fruit:'',
sel:''
}
});
</script>
显示结果:
vue事件处理
v-on:<事件名>
v-on:click
eg:点击按钮在文本框中显示信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VUE</title>
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" cintent="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div class="container" id="app">
<div class="row">
<div class="col-md-4">
姓名:<input type="text" v-model="name" />
<button type="button" class="btn btn-default" v-on:click="sayhi()">Say Hi</button>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var vue = new Vue({
el:"#app",
data:{
name:''
},
methods:{
sayhi:function () {
this.name="World";
}
}
});
</script>
显示结果:
数据绑定
绑定指令
v-bind、{{}}、v-html:以原始数据方式绑定
绑定位置
文本:文本可以出现的地方
属性:dom对象的属性,如title,src等
css:包括style和class绑定
vue常用指令
条件指令
v-if、<p v-if="true">显示</p>、v-else-if、v-else、v-show
循环指令
v-for、<li v-for="todo in todos">、<li v-for="(todo,index) in todos">、<li v-for="(value,key,index) in object">
表单绑定
v-model
<input v-model="name" />
eg1:常用指令的演示,其中通过点击按钮会控制地址的显示与隐藏,隐藏的结果就是被其他字取代
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VUE</title>
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" cintent="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div class="container" id="app">
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-default" v-on:click="showhide()">showhide</button>
<h3 v-if="isshow">{{addr.city}},{{addr.street}}</h3>
<h4 v-else>地址被隐藏了</h4>
<p :title="name" v-show="isshow">{{showtime()}}</p>
<ul>
<li v-for="(item,index) in items">{{item}},序号:{{index}}</li>
<li v-for="(value,key,index) in addr">{{key}}={{value}},序号:{{index}}</li>
</ul>
<template v-for="(item,index) in items">
<ol>
<li>列表{{item}}</li>
</ol>
<button class="btn btn-default">{{item}}</button>
</template>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var vue = new Vue({
el:"#app",
data:{
name:'World',
isshow:true,
addr:{
city:'北京',
street:'王府井'
},
items:[1,2,3,4,5]
},
methods:{
showhide:function () {
this.isshow=!this.isshow;
},
showtime:function () {
return new Date();
}
}
});
</script>
显示结果:
eg2:省市联动:默认显示第一条数据
过滤器:将时间中的秒过滤出来以及定义人民币符号"¥"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VUE</title>
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" cintent="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div class="container" id="app">
<div class="row">
<div class="col-md-12">
省份:<select name="shengfen" v-model="selshengfen">
<option v-for="item in shengfen" :value="item">{{item.name}}</option>
</select>
城市:<select name="chengshi">
<option v-for="item in selshengfen.city">{{item.name}}</option>
</select>
<h3>{{time | formatdate}}</h3>
<h4>{{100 | currency}}</h4>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var vue = new Vue({
el:"#app",
data:{
name:'',
time:new Date(),
selshengfen:{
name:'',
city:[]
},
shengfen:[{
name:'陕西省',
city:[
{
name:'西安市'
},
{
name:'咸阳市'
}
]
},
{
name:'河南省',
city:[
{
name:'郑州市'
},
{
name:'洛阳市'
}
]
}
]
},
methods:{
updatetime:function () {
this.time = new Date();
}
},
filters:{
formatdate:function(d){
return d.getSeconds();
},
currency:function(m){
return "¥"+m;
}
},
mounted:function(){
this.selshengfen=this.shengfen[0];
}
});
</script>
显示效果:
vue自定义组件
组件:页面中完成某个特定功能的模块
使用组件的原因:代码复用。DRY(Don't Repeat Yourself)原则
结构:
Vue.component('组件名',{props:['属性名'],template:'模板内容'})
自定义组件使用
<组件名>
自定义组件属性绑定
v-bind:属性名='实际对象'
eg:一个简单的组件演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VUE</title>
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" cintent="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div class="container" id="app">
<div class="row">
<div class="col-md-12">
<mycomponent v-bind:message="amsg" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<mycity v-bind:shengfen="shengfen" />
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
Vue.component('mycomponent',{
props:['message'],
template:'<h3>{{message}}</h3>'
});
Vue.component('mycity',{
props:['shengfen'],
template:'<div>省份:<select name="shengfen" v-model="selshengfen"><option v-for="item in shengfen" :value="item">{{item.name}}</option></select>城市:<select name="chengshi"><option v-for="item in selshengfen.city">{{item.name}}</option></select></div>',
data:function () {
return {
selshengfen:{
name:'',
city:[]
}
}
},
mounted:function(){
this.selshengfen=this.shengfen[0];
}
});
var vue = new Vue({
el:"#app",
data:{
amsg:'这是一个模板',
shengfen:
[
{
name:'陕西省',
city:[
{
name:'西安市',
},
{
name:'商洛市'
}
]
},
{
name:'河南省',
city:[
{
name:'郑州市',
},
{
name:'洛阳市'
}
]
},
]
},
methods:{
}
});
</script>
显示结果: