v-model
在vue的指令中,v-bind
只能实现数据的单向绑定,也就是从M(model)自动绑定到V(view),无法实现双向绑定。
使用v-model
,可以实现表单元素和model中数据的双向绑定。
注意:v-model只能运用在表单元素中。
<body>
<!-- v-bind 指令 只能实现数据的单向绑定 从M自动绑定到V 无法实现双向绑定 -->
<!-- v-model 指令 可以实现表单元素和Model中数据的双向绑定 -->
<!-- v-model只能运用在表单元素中 -->
<div id="app">
<!-- <input type="text" v-bind:value='msg'>; -->
<input type="text" v-model:value='msg'>;
<p>
{{msg}}
</p>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:'Good good study ,day day up'
},
methods:{
}
})
</script>
</body>
关于v-model的计算器小案例
<body>
<!-- 计算器小案列 -->
<div id="app">
<input type="text" v-model='n1'>
<select name="" id="" v-model='opt'>
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model='n2'>
<input type="button" value="=" @click='calc'>
<input type="text" v-model='result'>
</div>
<script>
new Vue({
el:'#app',
data:{
//传入初始的值
n1:0,
n2:0,
opt:'+',
result:0
},
methods:{
calc(){
switch(this.opt){
case '+':
this.result=parseInt(this.n1)+parseInt(this.n2);
break;
case '-':
this.result=parseInt(this.n1)-parseInt(this.n2);
break;
case '*':
this.result=parseInt(this.n1)*parseInt(this.n2);
break;
case '/':
this.result=parseInt(this.n1)/parseInt(this.n2);
break;
default:
break;
}
}
}
})
</script>
</body>
给元素设置样式
在vue中给元素设置样式有两种方式。
:class
(需要用v-bind做数据绑定)
<body>
<!-- vue 给元素设置样式 -->
<div id="app">
<h1 class="red thin">标题标签,功能强大</h1>
<!-- 第一种方法直接传递一个数组 注意:这里的class需要用v-bind做数据绑定 -->
<h1 :class='["red","italic"]'> Food Food Good</h1>
<!--在数组中 使用三元表达式 -->
<h1 :class="['thin','italic',flag?'active':'']">Good Day</h1>
<!-- 在数组中 使用对象代替三元表达式 提高代码的可读性 -->
<h1 :class="['red','italic',{'active':flag}]">SN Win!!</h1>
<!-- 在为class对象使用v-bind绑定对象的时候,对象的属性是类名 -->
<!-- 对象的属性可以带引号 也可以不带引号 -->
<h1 :class="classObj">DWG win? NO SN win!</h1>
</div>
<script>
new Vue({
el:'#app',
data:{
flag:true,
classObj:{
red:true,
thin:false,
italic:false,
active:true
}
},
methods:{
}
})
</script>
</body>
:style
(需要用v-bind做数据绑定)
<body>
<!-- :style -->
<div id="app">
<h1 :style='styleObj1'>冠军留在LPL</h1>
<h1 :style="[styleObj1,styleObj2]">艾欧尼亚昂扬不灭</h1>
</div>
<script>
new Vue({
el:'#app',
data:{
styleObj1:{
color:'green',
fontWeight:800
},
styleObj2:{
fontStyle:'italic'
}
},
methods:{
}
})
</script>
</body>
v-for循环
用法:
基于源数据多次渲染元素或模板块。此指令之值,必须使用特定语法 alias in expression
,为当前遍历的元素提供别名:
<div v-for="item in items">
{{ item.text }}
</div>
另外也可以为数组索引指定别名 (或者用于对象的键):
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>
v-for
的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素,你需要用特殊 attribute key 来提供一个排序提示:
<div v-for="item in items" :key="item.id">
{{ item.text }}
</div>
<body>
<!-- v-for 循环 -->
<div id="app">
<!-- <p>{{list[0]}}</p>
<p>{{list[1]}}</p>
<p>{{list[2]}}</p>
<p>{{list[3]}}</p> -->
<p v-for='(item,index) in list'>
索引值:{{index}}------每一项:{{item}}
</p>
<p v-for='(use,i) in list'>
id:{{use.id}}==姓名:{{use.name}}---索引:{{i}}
</p>
</div>
<script>
new Vue({
el:'#app',
data:{
// list:[1,2,3,4],
list:[
{id:1,name:'zs1'},
{id:2,name:'zs2'},
{id:3,name:'zs3'}
]
},
methods:{
}
})
</script>
</body>
<body>
<!-- :style -->
<div id="app">
<h1 :style='styleObj1'>冠军留在LPL</h1>
<h1 :style="[styleObj1,styleObj2]">艾欧尼亚昂扬不灭</h1>
</div>
<script>
new Vue({
el:'#app',
data:{
styleObj1:{
color:'green',
fontWeight:800
},
styleObj2:{
fontStyle:'italic'
}
},
methods:{
}
})
</script>
</body>
<body>
<div id="app">
<label for="">ID:
<input type="text" v-model="id">
</label>
<label for="">Name:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click='add'>
<!-- 注意:v-for循环时,key属性只能使用number或者string -->
<!-- 注意:key在使用的时候 必须使用v-bind属性绑定的形式 指定key值 -->
<!-- 如果 v-for有问题在使用v-for的同时,指定唯一的字符串/数字 类型:key值 -->
<p v-for='item in list' :key='item.id'>
<input type="checkbox">{{item.id}}---{{item.name}}
</p>
</div>
<script>
new Vue({
el:'#app',
data:{
id:'',
name:'',
list:[
{id:1,name:'李斯'},
{id:2,name:'赵高'},
{id:3,name:'嬴政'},
{id:4,name:'韩非子'},
{id:5,name:'荀子'}
]
},
methods:{
add(){
this.list.unshift({id:this.id,name:this.name})
}
}
})
</script>
</body>
v-if与v-show
v-if
的特点:
每次都会重新删除或者创建元素。
v-show
的特点:每次不会重新进行DOM的删除和创建操作。只是切换了元素的display:none
的样式。
使用场景:
若元素涉及频繁的切换 最好不要使用v-if
,推荐v-show
。
若元素可能永远也不会显示出来被用户看到 则推荐v-if
。
<body>
<div id="app">
<!-- 两种写法都可以 -->
<input type="button" value="toggle" @click="toggle">
<input type="button" value="toggle" @click='flag=!flag'>
<h1 v-if="flag">这是使用v-if控制的元素</h1>
<h1 v-show="flag">这是使用v-show控制的元素</h1>
</div>
<script>
new Vue({
el:'#app',
data:{
flag:false
},
methods:{
toggle(){
this.flag=!this.flag
}
}
})
</script>
</body>
员工管理系统小demo
实现功能:
1、录入员工
2、删除员工
3、根据条件筛选员工
4、展示所有员工
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo9</title>
<script src="./lib/vue-2.4.0.js"></script>
<link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
<script src="./lib/vue-2.4.0.js"></script>
<link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加员工</h3>
</div>
<div class="panel-body form-inline">
<label>
Id:
<input type="text" class="form-control" v-model="id">
</label>
<label>
Name:
<input type="text" class="form-control" v-model="name">
</label>
<!-- 在Vue中,使用事件绑定机制,为元素指定处理函数的时候,如果加了小括号,就可以给函数传参了 -->
<input type="button" value="添加" class="btn btn-primary" @click='add'>
<label>
搜索名称关键字:
<input type="text" class="form-control" v-model='keywords'>
</label>
</div>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<!-- 现在,我们自己定义个search方法,同时, 把所以的关键字, 通过传参的形式, 传递给search方法 -->
<tr v-for='item in search(keywords)' :key='item.id'>
<td>{{item.id}}</td>
<td v-text='item.name'></td>
<td>{{item.ctime | dateFormat('yyyy-MM-DD')}}</td>
<td>
<a href="" @click.prevent='del(item.id)'>删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
//定义全局过滤器 放在实例上面
Vue.filter('dateFormat',(dateStr,pattern='')=>{
//根据给定的时间字符串,得到特定的时间
// console.log(dateStr);
var dt=new Date(dateStr);
// console.log(dt);
//yyy-mm-dd
var y=dt.getFullYear();
var m=dt.getMonth()+1;
var d=dt.getDate();
if(pattern.toLowerCase()=='yyyy-mm-dd'){
return`${y}年${m}月${d}日`
}else{
var hh=dt.getHours();
var mm=dt.getMinutes();
var ss=dt.getSeconds();
return`${y}年${m}月${d}日${hh}时${mm}分${ss}秒`
}
})
new Vue({
el:'#app',
data:{
id:'',
name:'',
keywords:'',
list:[
{id:1,name:'张无忌',ctime:new Date()},
{id:2,name:'周芷若',ctime:new Date()}
]
},
methods:{
add(){
var car={id:this.id,name:this.name,ctime:new Date()}
this.list.push(car)
},
del(id){
// console.log(id+'===');
//分析:根据传递的id 在list中找到 从而实现删除
//如果找到了索引,直接调用数组的splice方法
//第一种删除方式
// this.list.some((item,i)=>{
// if(item.id==id){
// this.list.splice(i,1);
// return true;
// }
// })
//第二种删除方式
var index=this.list.findIndex((item)=>{
if(item.id==id){
return true;
}
});
console.log(index);
this.list.splice(index,1)
},
//筛选方法
search(key){
// var name='fzh';
// console.log(name.indexOf(''));
// var newList=[];
// this.list.forEach(item => {
// //判断传递进来的key是否在每个对象的name中存在
// //如果不存在则返回-1
// console.log(item.name.indexOf(key));
// if(item.name.indexOf(key)!=-1){
// newList.push(item);
// }
// });
// console.log(newList);
// return newList;
//第二种方法
return this.list.filter(item=>{
//filter()方法创建一个新数组,其包含通过所提供的函数实现的测试的所有元素
if(item.name.includes(key)){
return item;
}
})
}
}
})
</script>
</body>
</html>
定义全局过滤器
vue中可以自定义过滤器,过滤器可以对一些常见的文本进行格式化的处理,还可以对敏感词汇进行过滤等等。
过滤器可以用在两个地方:
mustache
插值表达式和v-bind
表达式。
过滤器应该添加在js表达式中,由管道符 |
指示。
定义全局过滤器的语法结构:
Vue.filter('过滤器的名称',function(){})
过滤器中function第一个参数已经规定死了,永远都是过滤器管道符前面传递过来的数据。
注意:全局过滤器写在Vue实例的外部。
<body>
<div id="app">
<p>{{msg | msgFormat('gg','jj') | test}}</p>
</div>
<script >
//定义全局过滤器的语法结构
//Vue.filter('过滤器的名称',function(){})
//过滤器中function第一个参数已经规定死了,永远都是过滤器管道符前面传递过来的数据
Vue.filter('msgFormat',(msg,arg,arg1)=>{
console.log(msg);
//替换字符串中的 字符 replace
//还可以定义正则表达式
// return msg.replace('大家','特朗普');
// return msg.replace(/大家/g,'特朗普');
return msg.replace(/大家/g,arg+arg1)
})
Vue.filter('test',(msg)=>{
return msg+'====='
})
new Vue({
el:'#app',
data:{
msg:'大家好才是真的好大家快乐才是真的快乐'
},
methods:{
}
})
</script>
</body>
时间过滤器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>时间过滤器</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p>
{{msg | dateFormat}}
</p>
</div>
<div id="app1">
{{msg | dateFormat}}
</div>
<script >
//定义全局过滤器 放在实例上面
Vue.filter('dateFormat',(dateStr)=>{
//根据给定的时间字符串,得到特定的时间
// console.log(dateStr);
var dt=new Date(dateStr);
// console.log(dt);
//yyy-mm-dd
var y=dt.getFullYear();
var m=dt.getMonth()+1;
var d=dt.getDate();
return`${y}年${m}月${d}日`
})
var vm = new Vue({
el:'#app',
data:{
msg:new Date(),
},
methods:{
}
})
var vm1= new Vue({
el:'#app1',
data:{
msg:new Date(),
},
})
</script>
</body>
</html>
定义私有过滤器
filters
属性。定义私有过滤器。
过滤器有两个条件:过滤器名称和处理函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>私有过滤器</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p>{{dt | dateFormat}}</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
dt:new Date()
},
methods:{
},
filters:{
dateFormat:(dateStr,pattern)=>{
var dt=new Date(dateStr);
// console.log(dt);
//yyy-mm-dd
var y=dt.getFullYear();
var m=(dt.getMonth()+1).toString().padStart(2,'0');
var d=dt.getDate().toString().padStart(2,'0');
var hh=dt.getHours().toString().padStart(2,'0');
var mm=dt.getMinutes().toString().padStart(2,'0');
var ss=dt.getSeconds().toString().padStart(2,'0');
return `${y}年${m}月${d}日 ${hh}:${mm}:${ss}`
}
}
})
</script>
</body>
</html>
自定义指令
除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。
下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定义全局指令</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p>页面载入时,input 元素自动获取焦点:</p>
<input v-focus>
</div>
<script>
// 注册一个全局自定义指令 v-focus
// 注意: 在每个 函数中 第一个参数 永远都是el,表示 被绑定了指令的那个元素,这个el参数 是一个原生的JS对象
// 在元素 刚绑定了指令的时候 还没有插入到DOM中去,这时候, 调用focus方法 没有作用
// 因为一个元素 只有插入DOM 之后才能 获取焦点
Vue.directive('focus', {
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
// 创建根实例
new Vue({
el: '#app'
})
</script>
</body>
</html>
我们也可以在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义私有指令</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p v-fontweight='900' v-fontsize=50>
这是一个段落标签
</p>
</div>
<script >
new Vue({
el:'#app',
data:{
},
methods:{
},
//自定义私有过滤器
filters:{},
//自定义私有指令
directives:{
'fontweight':{
bind:(el,binding)=>{
el.style.fontWeight=binding.value;
},
},
'fontsize':{
bind:(el,binding)=>{
console.log(binding);
el.style.fontSize=binding.value+'px';
}
}
}
})
</script>
</body>
</html>