Vue第二天学习内容
1.一个具有增删改查的页面（用了bootstrap）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<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:
<!--v-model 和vue中的数据进行双向绑定-->
<input type="text" class="form-control" v-model="id">
</label>
<label>
Name:
<input type="text" class="form-control" v-model="name">
</label>
<!--add为有参函数-->
<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>
<!--冒号表示属性的绑定 之前v-for中的数据都是来自list 现在是来自search方法中-->
<tr v-for="item in search(keywords)" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td v-text="item.ctime"></td>
<td>
<!--prevent事件修饰符 不刷新界面-->
<a href="" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
id:'',
name:'',
ctime:'',
keywords:'', //搜索的关键字
list:[
{id:1,name:'奔驰',ctime:new Date()},
{id:2,name:'宝马',ctime:new Date()}
]
},
methods:{
add(){//添加方法
// console.log('aaa'); clg
var car = { id:this.id,name:this.name,ctime:new Date()} //创建新对象
this.list.push(car) //传给list
this.id = this.name = '' //赋为空值
},
del(id){//根据id删除数据
// this.list.some((item,i)=>{
// if(item.id=id){ //说明找到了 在some方法中如果返回true了 就会立即阻止数组的后续循环
// this.list.splice(i,1) //删除
// return true;
// }
// })
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){ //indexOf判断是否包含字符串
// newList.push(item)
// }
// });
// return newList
// 注意： forEach some filter findIndex 这些都属于数组的新方法，
// 都会对数组中的每一项，进行遍历，执行相关的操作；
var newList = this.list.filter(item=>{
// 注意 ： ES6中，为字符串提供了一个新方法，叫做 String.prototype.includes('要包含的字符串')
// 如果包含，则返回 true ，否则返回 false
// contain
if (item.name.includes(keywords)) {
return item
}
})
return newList
}
}
});
</script>
</body>
</html>
2.升级版本加了过滤器
1>.在vue中定义过滤器
全局过滤器
Vue.filter('dateFormat',function(datestr,pattern){
var dt = new Date(datestr)
var y = dt.getFullYear()
var m = dt.getMonth()+1
var d = dt.getDay()
//用的~键的下面那个符号！
// return `${y}-${m}-${d}`
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}`
}
})
局部过滤器
var vm = new Vue({
el:'#app2',
data:{
dt:new Date()
},
filters:{
dateFormat:function(datestr,pattern){
var dt = new Date(datestr)
var y = dt.getFullYear()
var m = dt.getMonth()+1
var d = dt.getDay()
//用的~键的下面那个符号！
// return `${y}-${m}-${d}`
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}~~~~~~~`
}
}
}
})
2>.使用过滤器
<td>{{item.ctime | dateFormat('yyyy-mm-d')}}</td>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<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:
<!--v-model 和vue中的数据进行双向绑定-->
<input type="text" class="form-control" v-model="id">
</label>
<label>
Name:
<input type="text" class="form-control" v-model="name">
</label>
<!--add为有参函数-->
<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>
<!--冒号表示属性的绑定 之前v-for中的数据都是来自list 现在是来自search方法中-->
<tr v-for="item in search(keywords)" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime | dateFormat('yyyy-mm-d')}}</td>
<td>
<!--prevent事件修饰符 不刷新界面-->
<a href="" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
Vue.filter('dateFormat',function(datestr,pattern){
var dt = new Date(datestr)
var y = dt.getFullYear()
var m = dt.getMonth()+1
var d = dt.getDay()
//用的~键的下面那个符号！
// return `${y}-${m}-${d}`
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}`
}
})
var vm = new Vue({
el:'#app',
data:{
id:'',
name:'',
ctime:'',
keywords:'', //搜索的关键字
list:[
{id:1,name:'奔驰',ctime:new Date()},
{id:2,name:'宝马',ctime:new Date()}
]
},
methods:{
add(){//添加方法
// console.log('aaa'); clg
var car = { id:this.id,name:this.name,ctime:new Date()} //创建新对象
this.list.push(car) //传给list
this.id = this.name = '' //赋为空值
},
del(id){//根据id删除数据
// this.list.some((item,i)=>{
// if(item.id=id){ //说明找到了 在some方法中如果返回true了 就会立即阻止数组的后续循环
// this.list.splice(i,1) //删除
// return true;
// }
// })
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){ //indexOf判断是否包含字符串
// newList.push(item)
// }
// });
// return newList
// 注意： forEach some filter findIndex 这些都属于数组的新方法，
// 都会对数组中的每一项，进行遍历，执行相关的操作；
var newList = this.list.filter(item=>{
// 注意 ： ES6中，为字符串提供了一个新方法，叫做 String.prototype.includes('要包含的字符串')
// 如果包含，则返回 true ，否则返回 false
// contain
if (item.name.includes(keywords)) {
return item
}
})
return newList
}
}
});
</script>
</body>
</html>
3>.过滤器调用的时候采用的是就近原则
名字相同的时候优先于局部过滤器
3.padStart（让时间显示为1月变成01月）
var y = dt.getFullYear().toString().padStart(2,'0')
var m = (dt.getMonth()+1).toString().padStart(2,'0')
var d = dt.getDay().toString().padStart(2,'0')
var vm = new Vue({
el:'#app2',
data:{
dt:new Date()
},
filters:{
dateFormat:function(datestr,pattern){
var dt = new Date(datestr)
var y = dt.getFullYear().toString().padStart(2,'0')
var m = (dt.getMonth()+1).toString().padStart(2,'0')
var d = dt.getDay().toString().padStart(2,'0')
//用的~键的下面那个符号！
// return `${y}-${m}-${d}`
if (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}~~~~~~~`
}
}
}
})
4.键盘自定义修饰符
vue自带的
1.>基本使用
当Enter键盘抬起的时候调用自定义的add方法
<input type="text" class="form-control" v-model="name" @keyup.enter="add()">
enter对应13
<input type="text" class="form-control" v-model="name" @keyup.13="add()">
也能去查键盘的码值
例如F2 对应的113
<input type="text" class="form-control" v-model="name" @keyup.113="add()">
2.>起别名
<input type="text" class="form-control" v-model="name" @keyup.ff="add()">
在vue中
Vue.config.keyCodes.ff=13
5.自定义指令
使用：
<input type="text" class="form-control" v-model="keywords" v-focus>
功能：
使改文本框获得页面焦点
定义：
//自定义Vue指令,使用的时候需要加 v-
Vue.directive('focus',{
bind:function(){ //只执行一次 用于初始化
},
inserted:function(el){//表示插入 插入到DOM中 只执行一次
//js行为用inserted
el.focus()
},
updated:function(){ //表示更新 可执行多次
}
})
<input type="text" class="form-control" v-model="keywords" v-focus v-color>
Vue.directive('color',{
bind:function(el){ //只执行一次 用于初始化
//样式用bind
el.style.color='red'
},
inserted:function(el){//表示插入 插入到DOM中 只执行一次
// el.focus()
},
updated:function(){ //表示更新 可执行多次
}
})
应用
自己选择颜色
<input type="text" class="form-control" v-model="keywords" v-focus v-color="'blue'">
Vue.directive('color',{
bind:function(el,binding){ //只执行一次 用于初始化
el.style.color=binding.value
},
inserted:function(el){//表示插入 插入到DOM中 只执行一次
// el.focus()
},
updated:function(){ //表示更新 可执行多次
}
})
自定义字体
<h3 v-color="'pink'" v-fontWeight="900" v-fontSize="30">{{dt | dateFormat("")}}</h3>
directives:{
// 自定义指令
'fontweight': { //加粗字体
bind:function(el,binding){ //只执行一次 用于初始化
el.style.fontWeight=binding.value
}
},
'fontsize': function (el, binding) { // 注意：这个 function 等同于 把 代码写到了 bind 和 update 中去
el.style.fontSize = parseInt(binding.value) + 'px'
}
6.vue实例的生命周期
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'OK'
},
methods:{
show(){
console.log('执行了show方法')
}
},
beforeCreate(){ //遇到的第一个生命周期函数 此时vm中的data和methods还没有初始化 只是一些默认的事件和生命周期函数初始化了
console.log(this.msg) //都找不到
this.show()
},
created(){//遇到的第二个生命周期函数 此时的data和methods已经初始化了
console.log(this.msg)
this.show()
},
beforeMount(){//遇到的第三个生命周期函数 表示app的模板已经在内存中加载完毕 但是在页面中还没有渲染
console.log(document.getElementById('h3').innerText)
},
mounted(){//遇到的第四个生命周期函数 页面已经渲染完毕了
console.log(document.getElementById('h3').innerText)
}
});
</script>
运行结果
//此时Vue初始化完毕了
//下面是运行阶段了
//数据一定要更新才能进行下面的函数
beforeUpdate(){
console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
console.log('data 中的 msg 数据是：' + this.msg)
// updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
//数据还未渲染到页面上
},
updated(){
console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
console.log('data 中的 msg 数据是：' + this.msg)
// updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
}
beforeUpdate 多次点击按钮不同步
updated 多次点击按钮同步
beforeDestroy
destroy
7.Vue发送数据（Ajax）请求(Vue-resource)
导包
<script src="./lib/vue-2.4.0.js"></script>
<!-- 注意：vue-resource 依赖于 Vue，所以先后顺序要注意 -->
<!-- this.$http.jsonp 可以理解成在vue中添加一个属性-->
<script src="./lib/vue-resource-1.3.4.js"></script>
<div id="app">
<input type="button" value="get请求" @click="getInfo">
<input type="button" value="post请求" @click="postInfo">
<input type="button" value="jsonp请求" @click="jsonpInfo">
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
getInfo() { // 发起get请求
// 当发起get请求之后， 通过 .then 来设置成功的回调函数
this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {
// 通过 result.body 拿到服务器返回的成功的数据
// console.log(result.body)
})
},
postInfo() { // 发起 post 请求 application/x-wwww-form-urlencoded
// 手动发起的 Post 请求，默认没有表单格式，所以，有的服务器处理不了
// 通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式
this.$http.post('http://vue.studyit.io/api/post', {}, { emulateJSON: true }).then(result => {
console.log(result.body)
})
},
jsonpInfo() { // 发起JSONP 请求
this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
console.log(result.body)
})
}
}
});
</script>
181
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
