一:常用特性
1.表单操作
Input 单行文本
textarea 多行文本
select 下拉多选
radio 单选框
checkbox 多选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
form div {
height: 40px;
line-height: 40px;
}
form div:nth-child(4) {
height: auto;
}
form div span:first-child {
display: inline-block;
width: 100px;
}
</style>
</head>
<body>
<div id="app">
<form action="http://itcast.cn">
<div>
<span>姓名:</span>
<span>
<input type="text" v-model='uname'>
</span>
</div>
<div>
<span>性别:</span>
<span>
<input type="radio" id="male" value="1" v-model='gender'>
<label for="male">男</label>
<input type="radio" id="female" value="2" v-model='gender'>
<label for="female">女</label>
</span>
</div>
<div>
<span>爱好:</span>
<input type="checkbox" id="ball" value="1" v-model='hobby'>
<label for="ball">篮球</label>
<input type="checkbox" id="sing" value="2" v-model='hobby'>
<label for="sing">唱歌</label>
<input type="checkbox" id="code" value="3" v-model='hobby'>
<label for="code">写代码</label>
</div>
<div>
<span>职业:</span>
<select v-model='occupation' multiple>
<option value="0">请选择职业...</option>
<option value="1">教师</option>
<option value="2">软件工程师</option>
<option value="3">律师</option>
</select>
</div>
<div>
<span>个人简介:</span>
<textarea v-model='desc'></textarea>
</div>
<div>
<input type="submit" value="提交" @click.prevent='handle'>
</div>
</form>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
表单基本操作
*/
var vm = new Vue({
el: '#app',
data: {
uname: 'lisi',
gender: 2,
hobby: ['2','3'],
// occupation: 3
occupation: ['2','3'],
desc: 'nihao'
},
methods: {
handle: function(){
// console.log(this.uname)
// console.log(this.gender)
// console.log(this.hobby.toString())
// console.log(this.occupation)
console.log(this.desc)
}
}
});
</script>
</body>
</html>
表单域修饰符
number:转化为数值
<input v-model.number="age" type="number">
trim:去掉开始和结尾的空格
lazy:将input事件切换为change事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.number='age'>
<input type="text" v-model.trim='info'>
<input type="text" v-model.lazy='msg'>
<div>{{msg}}</div>
<button @click='handle'>点击</button>
</div>
<script type="text/javascript">
/*
表单域修饰符
*/
var vm =new Vue({
el:'#app',
data:{
age:'',
info:'',
msg:''
},
methods:{
handle:function () {
console.log(this.age+13);
console.log(this.info.length);
}
}
});
</script>
</body>
</html>
1:自定义指令:
自定义指令的语法规则(获取元素焦点)
Vue.directive('focus'{
inserted:function(el){
//获取元素的焦点
el.focus();
}
})
自定义指令用法:
<input type="type" v-focus>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-focus>
<input type="text" v-focus>
</div>
<script type="text/javascript">
/*
自定义指令
*/
Vue.directive('focus',{
inserted:function (el) {
//el表示指令所绑定的元素
el.focus();
}
});
var vm =new Vue({
el:'#app',
data:{
},
methods:{
handle:function () {
}
}
})
</script>
</body>
</html>
2:自定义指令
1):带参数的自定义指令(改变元素背景色)
Vue.directive('color',{
inserted:function(el,binding){
el.style.backgroundColor=binding.value.color;
}
})
指令用法:
<input type="text" v-color='{color:"orange")'>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-color="msg">
</div>
<script type="text/javascript">
/*
自定义指令--带参数
*/
Vue.directive('color',{
bind:function (el,bining) {
console.log(bining.value.color)
//根据指令的参数设置背景色
el.style.backgroundColor=bining.value.color;
}
});
var vm =new Vue({
el:'#app',
data:{
msg:{
color:'blue'
}
},
methods:{
handle:function () {
}
}
});
</script>
</body>
</html>
3:局部指令
directives:(
focus:{
//指令的定义
inserted:function(el){
el.focus();
}
}
)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-color="msg">
<input type="text" v-focus>
</div>
<!--
自定义指令---局部指令,只能在本组件中使用。
-->
<script type="text/javascript">
var vm =new Vue({
el:'#app',
data:{
msg:{
color:'red'
}
},
methods:{
handle:function () {
}
},
directives:{
color:{
bind:function (el,binding) {
el.style.backgroundColor =binding.value.color;
}
},
focus:{
inserted:function (el) {
el.focus();
}
}
}
});
</script>
</body>
</html>
4:计算属性
1):为何需要计算属性?
表达式的计算逻可能会比较复杂,使用计算属性可以使用模板内容更加简洁。
2):计算属性的用法:
computed:{
reversedMessage:function(){
return this.msg.split('').reverse().join('')
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<div>{{msg.split('')}}</div>
<div>{{msg.split('').reverse().join('')}}</div>
<div>{{reverseStrring}}</div>
</div>
<script type="text/javascript">
/*
计算属性
join() 方法用于把数组中的所有元素放入一个字符串。
*/
var vm =new Vue({
el:'#app',
data:{
msg:'hello'
},
computed:{
reverseStrring:function () {
return this.msg.split('').reverse().join('');
}
}
});
</script>
</body>
</html>
计算属性与方法的区别
1):计算属性是基于它们的依赖进行缓存的。
2):方法不存在缓存的。
二:侦听器
1):应用场景:
数据变化时执行异步或开销较大的操作。
2):侦听器的用法:
watch:{
firstName:function(val){
//val表示变化之后的值。
this.fullName=val+this.lastName;
},
lastName:function(val){
this.fullName=this.firstName+val;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<span>名:</span>
<sapn>
<input type="text" v-model='firstName'>
</sapn>
</div>
<div>
<span>姓::</span>
<sapn>
<input type="text" v-model='lastName'>
</sapn>
</div>
<div>{{fullName}}</div>
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
firstName:'Jim',
lastName:'Green',
fullName:'Jim Green'
},
watch:{
firstName:function(val){
this.fullName=val+''+this.lastName;
//属性名称与方法名称一致。
},
lastName:function (val) {
this.fullName=this.firstName+''+val;
}
}
});
</script>
</body>
</html>
案例:验证用户名是否可用
需求:输入框中输入姓名,失去焦点时验证是否存在,如果已经存在,提示重新输入,如果不存在,提示可以使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<span>用户名</span>
<span>
<input type="text" v-model.lazy='uname'>
</span>
<span>{{tip}}</span>
</div>
</div>
<script type="text/javascript">
/*
侦听器:
1:采用侦听器监听用户名的变化。
2:调用后台接口进行验证。
3:根据验证的结果调整提示信息。
*/
var vm =new Vue({
el:'#app',
data:{
uname:'',
tip:''
},
methods:{
checkName:function (uname) {
var that=this;
setTimeout(function () {
//模拟接口调用
if(uname=='admin'){
that.tip='错误'
}else{
that.tip='错误';
}
},2000);
}
},
watch:{
uname:function (val) {
//调用后台接口验证。
this.checkName(val);
//修改提示信息。
this.tip='正在验证';
}
}
});
</script>
</body>
</html>
,三:过滤器
1.过滤器的作用是什么?
格式化数据,比如将字符串格式化为首字母大写,将日期格式化为指定的格式等。
自定义过滤器
Vue.filter('过滤器名称',function(value){
//过滤业务逻辑
});
过滤器的使用
<div> {{msg |upper}}</div>
<div> {{msg |lower}}</div>
<div v-bind:id="id |formatId"></div>
局部过滤器
filters:{
capitalize:function(){}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model='msg'>
<div>{{msg | upper}}</div>
<div>{{msg | upper | lower}}</div>
<div :abc='msg'>测试</div>
</div>
<script type="text/javascript">
/*
过滤器
*/
/* Vue.filter('upper',function (val) {
return val.charAt(0).toUpperCase()+ val.slice(1);
});*/
Vue.filter('lower',function (val) {
return val.charAt(0).toLowerCase()+ val.slice(1);
});
var vm =new Vue({
el:'#app',
data:{
msg:''
},
filters:{
upper:function (val) {
return val.charAt(0).toUpperCase()+ val.slice(1);
}
}
});
</script>
</body>
</html>
2:带参数的过滤器
Vue.filter('format',function(value,arg1){
//value就是过滤器传递过来的参数
});
过滤器的使用
<div>{{date |format('yyyy-MM-DD'}}</div>
案例:使用过滤器格式化日期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{date | format('yyyy-MM-dd hh:mm:ss')}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
过滤器案例:格式化日期
*/
// Vue.filter('format', function(value, arg) {
// if(arg == 'yyyy-MM-dd') {
// var ret = '';
// ret += value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate();
// return ret;
// }
// return value;
// })
Vue.filter('format', function(value, arg) {
function dateFormat(date, format) {
if (typeof date === "string") {
var mts = date.match(/(\/Date\((\d+)\)\/)/);
if (mts && mts.length >= 3) {
date = parseInt(mts[2]);
}
}
date = new Date(date);
if (!date || date.toUTCString() == "Invalid Date") {
return "";
}
var map = {
"M": date.getMonth() + 1, //月份
"d": date.getDate(), //日
"h": date.getHours(), //小时
"m": date.getMinutes(), //分
"s": date.getSeconds(), //秒
"q": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒
};
format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
var v = map[t];
if (v !== undefined) {
if (all.length > 1) {
v = '0' + v;
v = v.substr(v.length - 2);
}
return v;
} else if (t === 'y') {
return (date.getFullYear() + '').substr(4 - all.length);
}
return all;
});
return format;
}
return dateFormat(value, arg);
})
var vm = new Vue({
el: '#app',
data: {
date: new Date()
}
});
</script>
</body>
</html>
四:Vue生命周期
1.主要阶段
挂载(初始化相关属性)
1):beforeCreate
2):created
3):beforeMount
4):mounted
更新(元素或组件的变更操作)
1):beforeUpdate
2):updated
销毁(销毁相关属性)
1):beforeDestory
2):destoryed
五:综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<span>
<input type="text" v-model='fname'>
<button @click='add'>添加</button>
<button @click='del'>删除</button>
<button @click='change'>替换</button>
</span>
</div>
<ul>
<li :key='index' v-for='(item,index) in list'>{{item}}</li>
</ul>
</div>
<script type="text/javascript">
/*
Vue数组操作
*/
var vm =new Vue({
el:'#app',
data:{
fname:'',
list:['apple','orange','banana']
},
methods:{
add:function () {
this.list.push(this.fname);
},
del:function () {
this.list.pop(); },
change:function () {
this.list=this.list.slice(0,2);
}
}
});
</script>
</body>
</html>
修改响应式数据
Vue.set(vm.items,indexOfItem,newValue)
vm.$set(vm.items,indexOfItem,newValu)
1)参数一表示要处理的数组名称
2)参数二表示要处理的数组的索引
3)参数三表示要处理的数组的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for='item in list'>{{item}}</li>
</ul>
<div>{{info.gender}}</div>
</div>
<script type="text/javascript">
/*
动态处理响应式数据
*/
var vm =new Vue({
el:'#app',
data:{
list:['apple','orange','banana'],
info:{
name:'lisi',
age:12
}
}
});
//Vue.set(vm.list,2,'lemon');
vm.$set(vm.list,1,'lemon'),
vm.$set(vm.info,'gender','female');
</script>
</body>
</html>
图书列表:
1):实现静态列表效果
2):基于数据实现模拟效果
3):处理每行的操作按钮。
添加图书
1):实现表单的静态效果
2):添加图书表单域数据绑定
3):添加按钮事件绑定
4):实现添加业务逻辑
修改图书
1):修改信息填充到表单
2):修改后重新提交表单
3):
重新添加和修改的方法
删除图书
删除按钮绑定事件处理方法
实现删除业务逻辑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.grid {
margin: auto;
width: 530px;
text-align: center;
}
.grid table {
border-top: 1px solid #C2D89A;
width: 100%;
border-collapse: collapse;
}
.grid th,td {
padding: 10px;
border: 1px dashed #F3DCAB;
height: 35px;
line-height: 35px;
}
.grid th {
background-color: #F3DCAB;
}
.grid .book {
padding-bottom: 10px;
padding-top: 5px;
background-color: #F3DCAB;
}
.grid .total {
height: 30px;
line-height: 30px;
background-color: #F3DCAB;
border-top: 1px solid #C2D89A;
}
</style>
</head>
<body>
<div id="app">
<div class="grid">
<div>
<h1>图书管理</h1>
<div class="book">
<div>
<label for="id">
编号:
</label>
<input type="text" id="id" v-model='id' :disabled="flag" v-focus>
<label for="name">
名称:
</label>
<input type="text" id="name" v-model='name'>
<button @click='handle' :disabled="submitFlag">提交</button>
</div>
</div>
</div>
<div class="total">
<span>图书总数</span>
<span>{{total}}</span>
</div>
<table>
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr :key='item.id' v-for='item in books'>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td>
<td>
<a href="" @click.prevent='toEdit(item.id)'>修改</a>
<span>|</span>
<a href="" @click.prevent='deleteBook(item.id)'>删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
图书管理-添加图书
*/
Vue.directive('focus',{
inserted:function (el) {
el.focus();
}
});
Vue.filter('format', function(value, arg) {
function dateFormat(date, format) {
if (typeof date === "string") {
var mts = date.match(/(\/Date\((\d+)\)\/)/);
if (mts && mts.length >= 3) {
date = parseInt(mts[2]);
}
}
date = new Date(date);
if (!date || date.toUTCString() == "Invalid Date") {
return "";
}
var map = {
"M": date.getMonth() + 1, //月份
"d": date.getDate(), //日
"h": date.getHours(), //小时
"m": date.getMinutes(), //分
"s": date.getSeconds(), //秒
"q": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒
};
format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
var v = map[t];
if (v !== undefined) {
if (all.length > 1) {
v = '0' + v;
v = v.substr(v.length - 2);
}
return v;
} else if (t === 'y') {
return (date.getFullYear() + '').substr(4 - all.length);
}
return all;
});
return format;
}
return dateFormat(value, arg);
});
var vm = new Vue({
el: '#app',
data: {
flag:false,
submitFlag:false,
id: '',
name: '',
books: []
},
methods: {
handle: function(){
if(this.flag){
//编辑操作
//就是根据当前的ID去更新数组中对应的数据。
this.books.some((item) =>{
if(item.id==this.id){
item.name=this.name;
//完成更新操作之后,需要终止操作。
return true;
}
});
this.flag=false;
}else{
//添加
// 添加图书
var book = {};
book.id = this.id;
book.name = this.name;
book.date = '';
this.books.push(book);
// 清空表单
this.id = '';
this.name = '';
}
// 清空表单
this.id = '';
this.name = '';
},
toEdit:function (id) {
//禁止修改ID
this.flag=true;
//根据ID查询出要编辑的数据。
var book=this.books.filter(function (item) {
return item.id==id;
});
console.log(book)
//把获取到信息填充到表单
this.id=book[0].id;
this.name=book[0].name;
},
deleteBook:function (id) {
/* //删除图书
//根据id从数组中查找元素的索引
var index= this.books.findIndex(function (item) {
return item.id==id;
});
//根据索引删除数组元素
this.books.splice(index,1);*/
//方法二:通过filter方法进行删除
this.books=this.books.filter(function (item) {
return item.id!=id;
});
}
},
computed:{
total:function () {
//计算图书总数。
return this.books.length;
}
},
watch: {
name: function(val) {
// 验证图书名称是否已经存在
var flag = this.books.some(function(item){
return item.name == val;
});
if(flag) {
// 图书名称存在
this.submitFlag = true;
}else{
// 图书名称不存在
this.submitFlag = false;
}
}
},
mounted:function () {
//该生命周期钩子函数被触发的时候,模板已经可以使用。
//一般此时用来获取后台数据,然后填充数据到模板。
var data = [{
id: 1,
name: '三国演义',
date: 2525609975000
},{
id: 2,
name: '水浒传',
date: 2525609975000
},{
id: 3,
name: '红楼梦',
date: 2525609975000
},{
id: 4,
name: '西游记',
date: 2525609975000
}];
this.books = data;
}
});
</script>
</body>
</html>