开始练习
品牌案例 品牌列表的添加和删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div id='app'>
<div class="panel panel-primary ">
<div class="panel-heading">
<h3 class="panel-title">add brand</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>
<input type="button" value="add" class="btn btn-primary" @click="add">
</div>
</div>
<table class="table table-bordered table-hover table-stripped" >
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<!-- :是属性的绑定 -->
<tr v-for="item in list" :key="item.id">
<td>{{item.id}}</td>
<td v-text="item.name"></td>
<td>{{item.ctime}}</td>
<td>
<a href="" @click.prevent="delete1(item.id)" >delete</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
// 指定要控制的元素
var vm=new Vue({
el: '#app',
data: {
id:'',
name:'',
list:[
{id:1,name:"Ferrari",ctime:new Date},
{id:2,name:"Mercedes",ctime:new Date},
{id:3,name:"Red Bull Racing",ctime:new Date},
{id:4,name:"McLaren",ctime:new Date},
{id:5,name:"Renault",ctime:new Date},
{id:6,name:"Alfa Romeo Racing",ctime:new Date},
]
},
methods:{
add(){
var car={id:this.id,name:this.name,ctime:new Date()}
this.list.push(car)
},
delete1(id){
// method 1
// this.list.some((item,i)=>{
// if(item.id==id){
// this.list.splice(i,1)
// return true
// }
// })
// method 2
var index=this.list.findIndex(item=>{
if(item.id==id){
return true
}
})
this.list.splice(index,1)
}
}
})
</script>
</body>
</html>
搜索功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div id='app'>
<div class="panel panel-primary ">
<div class="panel-heading">
<h3 class="panel-title">add search</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>
<input type="button" value="add" class="btn btn-primary" @click="add">
<label>
search for keywords
<input type="text" class="form-control" v-model="keywords">
</label>
</div>
</div>
<table class="table table-bordered table-hover table-stripped" >
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<!-- :是属性的绑定 -->
<!-- v-for data from the method search,and it has key "keywords" -->
<tr v-for="item in search(keywords)" :key="item.id">
<td>{{item.id}}</td>
<td v-text="item.name"></td>
<td>{{item.ctime}}</td>
<td>
<a href="" @click.prevent="delete1(item.id)" >delete</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
// 指定要控制的元素
var vm=new Vue({
el: '#app',
data: {
id:'',
name:'',
keywords:'',
list:[
{id:1,name:"Ferrari",ctime:new Date},
{id:2,name:"Mercedes",ctime:new Date},
{id:3,name:"Red Bull Racing",ctime:new Date},
{id:4,name:"McLaren",ctime:new Date},
{id:5,name:"Renault",ctime:new Date},
{id:6,name:"Alfa Romeo Racing",ctime:new Date},
]
},
methods:{
add(){
var car={id:this.id,name:this.name,ctime:new Date()}
this.list.push(car)
},
delete1(id){
// method 1
// this.list.some((item,i)=>{
// if(item.id==id){
// this.list.splice(i,1)
// return true
// }
// })
// method 2
var index=this.list.findIndex(item=>{
if(item.id==id){
return true
}
})
this.list.splice(index,1)
},
search(keywords){
var newList=[]
this.list.forEach(item => {
if(item.name.indexOf(keywords)!=-1)
{
newList.push(item)
}
});
return newList
}
}
})
</script>
</body>
</html>
另一个方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div id='app'>
<div class="panel panel-primary ">
<div class="panel-heading">
<h3 class="panel-title">add search</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>
<input type="button" value="add" class="btn btn-primary" @click="add">
<label>
search for keywords
<input type="text" class="form-control" v-model="keywords">
</label>
</div>
</div>
<table class="table table-bordered table-hover table-stripped" >
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<!-- :是属性的绑定 -->
<!-- v-for data from the method search,and it has key "keywords" -->
<tr v-for="item in search(keywords)" :key="item.id">
<td>{{item.id}}</td>
<td v-text="item.name"></td>
<td>{{item.ctime}}</td>
<td>
<a href="" @click.prevent="delete1(item.id)" >delete</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
// 指定要控制的元素
var vm=new Vue({
el: '#app',
data: {
id:'',
name:'',
keywords:'',
list:[
{id:1,name:"Ferrari",ctime:new Date},
{id:2,name:"Mercedes",ctime:new Date},
{id:3,name:"Red Bull Racing",ctime:new Date},
{id:4,name:"McLaren",ctime:new Date},
{id:5,name:"Renault",ctime:new Date},
{id:6,name:"Alfa Romeo Racing",ctime:new Date},
]
},
methods:{
add(){
var car={id:this.id,name:this.name,ctime:new Date()}
this.list.push(car)
},
delete1(id){
// method 1
// this.list.some((item,i)=>{
// if(item.id==id){
// this.list.splice(i,1)
// return true
// }
// })
// method 2
var index=this.list.findIndex(item=>{
if(item.id==id){
return true
}
})
this.list.splice(index,1)
},
search(keywords){
// var newList=[]
// this.list.forEach(item => {
// if(item.name.indexOf(keywords)!=-1)
// {
// newList.push(item)
// }
// });
// return newList
// forEach some filter findIndex 都是数组新方法
// var newList=this.list.filter(item=>{
// // if (item.name.indexOf(keywords)!==-1)
// // String.prototype new method
// if(item.name.includes(keywords)){
// return item
// }
// })
// return newList
return this.list.filter(item=>{
// if (item.name.indexOf(keywords)!==-1)
// String.prototype new method
if(item.name.includes(keywords)){
return item
}
})
}
}
})
</script>
</body>
</html>
过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id='app'>
<p>{{msg|msgFormat('qqq')|test}}</p>
</div>
<script>
Vue.filter('msgFormat',function(msg,arg){
return msg.replace(/you/g,arg)
})
Vue.filter('test',function(msg){
return msg+'==='
})
var vm=new Vue({
el: '#app',
data: {
msg:'what and who are you why are you here'
},
methods:{
}
});
</script>
</body>
</html>
过滤器实例
Vue.filter('dateFormat',function(dateStr){
var dt=new Date(dateStr)
var y=dt.getFullYear()
var m=dt.getMonth()+1
var d=dt.getDate()
// return y+'-'+m+'-'+d
return `${y}-${m}-${d}`
})
<td>{{item.ctime|dateFormat('')}}</td>
...
...
...
Vue.filter('dateFormat',function(dateStr,pattern){
var dt=new Date(dateStr)
var y=dt.getFullYear()
var m=dt.getMonth()+1
var d=dt.getDate()
// return y+'-'+m+'-'+d
// return `${y}-${m}-${d}`
if(pattern && 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}`
}
})
所谓全局实例就是所有vue实例都共享的
padStart方法
var vm2=new Vue({
el:'#app2',
data:{
dt:new Date()
},
methods:{},
filters:{
// 定义私有过滤器 两个条件 名称和处理函数
// 过滤器调用的时候采用就近原则
dateFormat:function(dateStr,pattern){
var dt=new Date(dateStr)
var y=dt.getFullYear()
var m=(dt.getMonth()+1).toString().padStart(2,'0')
var d=dt.getDate().toString().padStart(2,'0')
// return y+'-'+m+'-'+d
// return `${y}-${m}-${d}`
if(pattern && pattern.toLowerCase()==='yyyy-mm-dd'){
return `${y}-${m}-${d}`
}
else{
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}`
}
}
}
})
按键修饰符
<input type="text" class="form-control" v-model="name" @keyup.enter="add">
// 定义全局修饰符
Vue.config.keywords.f2=113
钩子函数
Vue.directive('color',{
bind:function(el){
el.style.color='red'
}
})
// 用binding 参数拿到传递的值
Vue.directive('color',{
bind:function(el,binding){
el.style.color=binding.value
}
})
私有指令
<div id="app2">
<h3 v-color="'blue'" v-fontweight="400">
{{dt|dateFormat('')}}
</h3>
</div>
var vm2=new Vue({
el:'#app2',
data:{
dt:new Date()
},
methods:{},
filters:{
// 定义私有过滤器 两个条件 名称和处理函数
// 过滤器调用的时候采用就近原则
dateFormat:function(dateStr,pattern){
var dt=new Date(dateStr)
var y=dt.getFullYear()
var m=(dt.getMonth()+1).toString().padStart(2,'0')
var d=dt.getDate().toString().padStart(2,'0')
// return y+'-'+m+'-'+d
// return `${y}-${m}-${d}`
if(pattern && pattern.toLowerCase()==='yyyy-mm-dd'){
return `${y}-${m}-${d}`
}
else{
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}`
}
}
},
// 私有指令
directive:{
'fontweight':{
bind:function(el,binding){
el.style.fontWeight=binding.value
}
}
}
})
生命周期函数
var vm=new Vue({
el: '#app',
data: {
msg:'what and who are you why are you here'
},
methods:{
show(){
console.log('show')
}
},
beforeCreate(){
// 生命周期函数
// 执行时候 data和methods都没被初始化
},
created(){
// data methods 已经初始化好了
},
mounted(){
// 表示内存中模板已经真实挂载到渲染好的页面中
},
// 运行中的事件
beforeUpdate(){
},
updated(){
},
beforeDestroy(){
}
});
9700
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
