VUE
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动，相比于jQuery关注DOM，Vue更关注于数据。
Vue的优点：
vue轻量级，使用熟悉的js语法，入门上手比较快
Vue对象介绍
el：Vue的作用域，即只有在这个作用域里面的dom受Vue控制
data：vue页面的数据模型，该数据模型为一个javascript对象，且在运行过程中该对象的属性不允许增加，因此页面数据模型必须提前定义好
methods：事件处理方法对象vue事件处理：v-on:<事件名>例如： v-on:click
绑定指令：
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" />
vue自定义组件：使用组件来减少代码的重复，即实现代码复用
下面使用例子来逐步讲解这些特性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>特性演示</title>
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="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="radio" v-model="fruit" value="苹果" name="rd">苹果
<input type="radio" v-model="fruit" value="香蕉" name="rd">香蕉
<input type="checkbox" v-model="fruits" value="吃饭" name="ck">吃饭
<input type="checkbox" v-model="fruits" value="睡觉" name="ck">睡觉
选择年级<select v-model="sel">
<option>大一</option>
<option>大二</option>
<option>大三</option>
<option>大四</option>
</select>
姓名<input type="text" v-model="name" placeholder="请输入姓名" name="text">
密码<input type="password" placeholder="请输入密码" name="psw"><br>
<div><!--省市级联-->
省份:<select name="shengfen" v-model="selshengfen">
<option v-for="item in shengfen" v-bind:value="item">{{item.name}}</option>
</select>
城市:<select name="city" v-model="city">
<option v-for="i in selshengfen.city" v-bind:value="i">{{i.name}}</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button type="button btn-default" v-on:click="sayhello()">sayhello</button>
<button type="button btn-default" v-on:click="showorhide()">showorhide</button>
<h3>{{time}}</h3><!--显示时间-->
<h3>{{time|gettime}}</h3><!--显示秒数-->
<h3 v-if="isshow">{{address.city}}{{address.street}}</h3>
<h3 v-else>地址被隐藏了</h3>
<p v-bind:title="name" v-show="isshow">{{time}}</p>
<ol>
<li v-for="(item,index) in items">{{item}},序号:{{index}}</li>
<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:'',
isshow:true,
time:new Date(),
sel:'',
fruits:[],
fruit:'',
items:[1,2,3,4,5,6,7,8,9],
address:{
city:'西安',
street:'长安街'
},
selshengfen:{
name:'',
city:[]
},
selcity:{
name:''
},
shengfen:[
{
name:'陕西省',
city:[
{
name:'西安',
},
{
name:'咸阳',
}
]
},
{
name:'河南省',
city:[
{
name:'郑州',
},
{
name:'洛阳',
}
]
},
]
},
methods:{
sayhello:function(){
alert(this.name+'~~~欢迎你')
},
updatetime:function(){
this.time=new Date();
},
showorhide:function(){
this.isshow=!this.isshow;
}
},
filters:{//过滤器
gettime:function(d){
return d.getSeconds();
}
},
mounted:function(){
setInterval(this.updatetime,1000);
}
});
</script>效果显示：
