发布时间:2014年2月开源的一个前端开发库
1 官网介绍
1 是一套构建用户界面的渐进式框架
2 采用自底向上增量开发的设计
3 Vue只关注视图层,使其容易和其他的第三方库或者项目整合
4 当单文件组件和Vue生态系统支持的库结合使用时,能给为复杂的单页面程序提供驱动
2 版本下载
http://v1-cn.vuejs.org/guide/installation.html
(提供了开发版本和生产版本)
3 基本指令起步
3.1 构造器
- 每一个Vue.js都是通过构造函数Vue创建一个Vue的实例来进行启动
var vm = new Vue({//变量名vm 表示Vue实例
//代码
})
3.2 属性与方法
- Vue实例会代理data对象里面的所有属性
var data = { a : 1}
var vm = new Vue({
data:data
})
vm.a == data.a //=>true
vm.a = 2 //修改属性也会影响到原始的数据
data.a // a=>2
data.a = 3 //同理
vm.a //a=>3
小结:代理的属性是响应的,在实例创建之后添加新的属性到实例上,是不会触发视图更新
3.3 常见指令
指定(directive)是带有v- 前缀的的特殊属性,指令的作用就是当其表达式的值改变时相应的将某些行为应用到DOM上
1 数据绑定指令
- v-model
双向数据绑定,只能在表单元素中使用,修改当前的数据则会影响相对应的数据值(使用v-model必须要赋初始值) - v-text
可以直接渲染data里面的数据,只能输出文本,不能输出元素标签 - v-html
可以直接输出html字符串和文本内容
2 指令接受参数(接受一个参数,用冒号来指明即可)
- v-bind:src
- v-bind:class
- v-bind:href
- v-bind:id
- v-html:
3 条件指令(作为一个自定义的属性来使用)
- v-if(背景图的颜色改变)//控制多个兄弟元素 可以使用template元素
- v-else
- v-else-if(2.0新增)
- v-show
4 循环指令
v-for(value in array)//数组遍历
v-for((val,index) in array)//获取每个索引值,从零开始
v-for(val in obj)//对象遍历
v-for((val,key) in obj)//获取键和值
<template v-for="(val ,key) in obj">
<h2>{{val}}</h2>
<p>{{key}}</p>
</template>
- v-for(val in 10)//整数循环 ,从零开始
5 计算属性(声明式的描述一个值依赖了其他的值)
- data:数据存放
- methods:方法和事件的操作
<h2>{{getAge(birthday)}}</h2>
data:{
birthday:"1996-10-21"
}
//计算年龄
methods:{
getAge:function(birthday){
var d1 = new Date(birthday);
var d2 = new Date();
return d2.getFullYear() - d1.getFullYear();//
}
}
//计算属性方法
<h2>{{age}}</h2>
computed:{
age:function(){
var d1 = new Date(this.birthday);//this 代表当前
var d2 = new Date();
return d2.getFullYear() - d1.getFullYear();
}
}
//理解:就是属性加方法的合体
1 计算属性的两大特征
- 缓存性能(和调用methods函数之间的区别)
使用计算属性的时候,依赖的值如果没有发生变化的时候(相互有依赖的关系),则当前的计算属性就会使用缓存,不会重新执代码(如果是普通方法,则会重新执行代码) - get特征
//方法中设置和修改
age:{
get : function(){
return new Date().getFullYear() - this.birthday
},
set:function(val){//birthday
this.birthday = new Date().getFulYeatr() - val;
}
}
6 过滤器
对数据的进行不同的处理,在不同需求下,对数据,文本进行不同的格式化
- 使用格式{{变量 | 过滤器名称*(参数1,参数2,参数3)}} //版本1之后都放弃了过滤器
7 事件
1 点击事件
- v-on:click="方法名()";
- 简写 @click="方法名"
2 操作DOM
- v-on:click = "方法名($event)"//获取当前的元素
3 停止冒泡 - v-on:click.stop = "方法名"//阻止事件进行冒泡
事件注意事项 - 绑定事件没有on ,
- 事件名称都是小写
8 表单处理
- 数据双向绑定
- 模型的变化 ---> 视图的更新
- 视图的变换 ---> 模型的更新
- 指令 v-model(只能应用表单输入框中)
9 修饰符
10 样式操作(class和style)
- 是对元素的属性操作(v-bind:)
- 通过表达式的值来增添元素类
- 表达式的结果类型除了字符串,还支持对对象和数组的操作
1 对象语法
//案例一
isActive:为true的时候,添加active类
<div v-bind:class='{active:isActive}'>Test</div>
//案例二
isActive的值大于2的时候,添加active类
<div v-bind:class='{active:isActive>2}'>Test</div>
//案例三
多个条件同时判断,满足则添加相对应的类,多个类用逗号进行分隔
<div v-bind:class='{activea:isActive,activeb:isActive==10}'>Test</div>
案例四:通过计算属性来绑定样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>对象语法</title>
<!-- js -->
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="vue.min.js"></script>
<!-- js -->
<script type="text/javascript">
$(function(){
var vm = new Vue({
el:".body",
data:{
isActive: true,
hasError: false
},
computed:{
classObject:function(){
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal',
}
}
}
})
})
</script>
</head>
<body>
<div class="body">
<div v-bind:class="classObject"></div>
</div>
</body>
</html>
*methods只是提供数据逻辑,而不是DOM的细节处理
网友评论