过滤器使用
<!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.js"></script>
<link rel="stylesheet" href="../lib/bootstrap.min_3.3.7.css">
</head>
<body>
<div id="app">
<!-- 过滤器可以多次调用 -->
<p>{{msg | msgFormat('疯狂+1')|test }}</p>
</div>
</body>
<script>
//创建一个Vue全局的过滤器，名字叫做msgFormat
Vue.filter('msgFormat',function(msg,arg){
//字符串的replace方法第一个参数，除了可以写一个字符串之外，还可以定义一个正则
return msg.replace(/好/g,'坏'+arg)
})
Vue.filter('test',function(msg){
return msg+'======='
})
var vm = new Vue({
el:'#app',
data:{
msg:"你好，你好吗，你好好啊",
},
methods:{
}
})
//过滤器的定义语法
//Vue.filter('过滤器名称'，function(管道符前面的数据){})
//过滤器中function，第一个参数已经被规定死了，永远都是过滤器管道符前面传递过来的数据。
</script>
</html>
品牌管理案例
<!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.js"></script>
<link rel="stylesheet" href="../lib/bootstrap.min_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 for="">
Id:
<input type="text" class="form-control" v-model="id">
</label>
<label for="" >
name:
<!-- @keyup绑定键盘抬起触发事件，.enter指定按回车建抬起之后触发
vue提供了若干按键修饰符.enter,.tab,.delete,.esc,.space,.up,.down,.left,.right等
可以通过Vue.config.keyCodes.** = 键盘码值
例如：Vue.config.keyCodes.f2 = 113
-->
<input type="text" name="" id="" class="form-control" v-model="name" @keyup.enter="add">
</label>
<input type="button" value="添加" class="btn btn-primary" @click="add">
<label for="" >
搜索名称关键字:
<input type="text" name="" id="" class="form-control" v-model="keywords" v-focus v-color="'blue'">
</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中的数据，都是直接弄个从data上的list直接渲染过来的 -->
<!-- <tr v-for="item in list" :key="item.id"> -->
<!-- 现在，我们定义了一个search方法，同时把所有的关键字，通过传参数的形式，传递给了search方法
在search方法中，通过执行for循环遍历list，把符合搜索关键字的数组保存到一个新的数组并返回
-->
<tr v-for="item in search(keywords)" :key="item.id">
<td>{{item.id}}</td>
<td v-text="item.name"></td>
<td>{{item.ctime|dataFormat}}</td>
<td><a href="" @click.prevent="del(item.id)">删除</a></td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
//全局过滤器，进行时间格式化
Vue.filter('dataFormat',function(dateSet){
//根据给定的时间字符串，得到特定的时间
var dt = new Date(dateSet);
//获取到年月日
var y = dt.getFullYear();
var m = dt.getMonth()+1;
var d = dt.getDate();
return `${y}-${m}-${d}`;
})
//使用 Vue.directive() 定义全局的指令 v-focus
//其中：参数1：指令的名称，注意，在定义的时候，指令的名称前面不需要 v- 前缀
//但是在调用的时候，必须在指令名称前面加上 v- 前缀
//参数2：是一个对象，这个对象上，有一些指令相关的函数，这些函数可以在特定的阶段执行相关的操作
Vue.directive('focus',{
bind:function(el){//每当指令绑定到元素上的时候，会立即执行bind函数【只执行一次】
//注意：在每个函数中，第一个参数永远都是el，表示被绑定了该指令的那个元素，这个el参数是一个原声的js对象
//在元素刚刚绑定了指令的时候，还没有插入到dom中去，这时候，调用focus方法没有作用
//因为，一个元素，只有插入DOM之后才能获取焦点
// el.focus();
},
inserted:function(el){//inserted 表示元素插入到DOM中的时候，会立即执行inserted函数【只触发一次】
//和js行为有关的操作，最好在inserted中去执行，防止js行为不生效
el.focus();
},
updated:function(el){//当VNode更新的时候，会执行updated函数，可能会触发多次
}
})
Vue.directive('color',{
//样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联样式
//将来元素肯定会显示到页面中，这时候，浏览器的渲染殷勤必然会解析样式，应用给这个元素
bind:function(el,binding){
//和样式相关的操作一般都在bind中执行
el.style.color=binding.value;
}
})
var vm = new Vue({
el:'#app',
data:{
id:'',
name:'',
keywords:'',
list:[
{id:1,name:"宝马",ctime:new Date()},
{id:2,name:"奔驰",ctime:new Date()}
],
},
methods:{
add(){//添加品牌方法
//分析：
//1.获取id和那么，直接从data上获取
//2.组织出一个对象
//3.调用数组方法，把这个对象添加到list中去
//4.注意：在vue中，已经实现了数据的双向绑定，每当我们修改了data中的数据Vue会默认监听到数据的改动，自动把最新的数据应用到页面上
console.log("sfasfsafa");
var car = {id: this.id,name: this.name,ctime:new Date()};
this.list.push(car);
},
del(id){
//方法一
// this.list.some((item,i)=>{
// if(item.id===id){
// this.list.splice(i,1);
// return true;//再数组some方法中，如果return ture，就会l立即终止后续的循环。
// }
// })
//方法二
var index = this.list.findIndex((item)=>{
if(item.id===id)
return true;
})
this.list.splice(index);
},
search(keywords){
// //方法一，传统方法
// var newList = [];
// this.list.forEach(item=>{
// if(item.name.indexOf(keywords)!=-1){
// newList.push(item);
// }
// })
// return newList;
//方法二
return this.list.filter(item=>{
// 注意：ES6中，为字符串提供了一个新方法，叫做，String.prototype.includes('要包含的字符串')
// 如果包含，则返回true，否则返回false
if(item.name.includes(keywords)){
return item;
}
})
}
},
filters:{//定义私有过滤器，vue在就近原则的选择过滤器，则在全局过滤器和局部过滤器同时存在的时候会优先选择私有过滤器
dataFormat:function(dateSet){
//根据给定的时间字符串，得到特定的时间
var dt = new Date(dateSet);
//获取到年月日
var y = dt.getFullYear();
var m = (dt.getMonth()+1).toString().padStart(2,'0');//自动补0
var d = (dt.getDate()).toString().padStart(2,'0');
return `${y}-${m}-${d}====`;
}
},
directives:{//自定义私有指令
'fontweight':{//设置字体粗细
bind:function(el,binding){
el.style.fontweight = binding.value
}
},
'fontsize':function(el,binding){//注意：这个 functuon等同于把代码写到了bind和updae中去
el.style.fontsize = parseInt(binding.value) + 'px'
}
}
})
//过滤器的定义语法
//Vue.filter('过滤器名称'，function(管道符前面的数据){})
//过滤器中function，第一个参数已经被规定死了，永远都是过滤器管道符前面传递过来的数据。
</script>
</html>
Vue生命周期
<!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.js"></script>
</head>
<body>
<div id="app">
<input type="button" @click="msg='no'">
<p>{{msg}}</p>
</div>
<script>
var vm = new Vue({
el:'app',
data:{
msg:'ok'
},
methods: {
},
//创建阶段的函数
beforeCreate() {//初始化了一个vue的空实例
//生命周期函数，实例在完全创建出来之前执行，执行该方法时，data和methods中的数据都未初始化
},
created() {//初始化了data和methods
},
beforeMount() {//表示模板已经在内存中编译完成，但还为渲染到页面中去
},
mounted() {//表示内存中的模板已经挂载到了页面中，用户已经可以看到渲染好的页面
},
//运行阶段的函数
beforeUpdate() {
//当执行 beforeUpdate 的时候，data中的数据已经改变，但还为更新到页面中去，页面中的数据还是原来的数据，还没发生改变
},
updated() {
//update 执行的时候，data上的数据和页面上的数据都已经发生改变，已经保持同步，都是最新的数据
},
//销毁阶段的函数
beforeDestroy() {
//Vue实例销毁前，Vue实例从运行阶段进入到了销毁阶段，此时 数据，方法，指令，过滤器等都还处于可用状态
},
destroyed() {
//Vue实例销毁完成后执行，此时，数据，方法，指令，过滤器等都不可用。
},
})
</script>
</body>
</html>
Vue-resource基本用法
<!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.js"></script>
<!-- 注意：vue-resource 依赖于vue，所以要先导入vue。js然后再导入vue-resource.js -->
<script src="../lib/vue-resource.js "></script>
</head>
<body>
<!-- vue-resource /axios 等第三方包实现数据请求 -->
<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>
var vm = new Vue({
el:"#app",
data:{
},
methods:{
getInfo(){//发起get请求
//通过.then获取回调数据
this.$http.get('htttp://vue.studyit.io/api/getlunbo').then(result=>{
console.log(result.body);
})
},
postInfo(){//发起post请求
//手动发起 Post 请求，默认没有表单格式，所以，有的服务器处理不了，通过post方法的第三个参数，设置提交参数emulateJSON:true，为普通表单数据格式
this.$http.post('htttp://vue.studyit.io/api/post',{},{emulateJSON:true}).then(result=>{
console.log(result.body);
})
},
jsonpInfo(){
this.$http.jsonp('htttp://vue.studyit.io/api/jsonp').then(result=>{
console.log(result.body);
})
}
},
})
</script>
</body>
</html>
170
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
