品牌列表案例
<!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.css">
<!-- 需要用到Jquery吗？ -->
</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>Opration</th>
</tr>
</thead>
<tbody>
<!-- 之前，v-for中的数据，都是从data上的list中直接渲染过来的 -->
<!-- 现在，我们自定义了一个search方法，同时，把所有关键字，通过传参的形式，传递给了search方法 -->
<!-- 先search方法内部通过执行for循环，把所有符合搜索关键字的数据，保存到一个新数组中，返回 -->
<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="del(item.id)">删除</a></td>
</tr>
</tbody>
</table>
</div>
<script>
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和name,直接从 data 上面获取
//2、组织出一个对象
//3、把这个对象，调用数组的相关方法，添加到当前 data 上的 list 中
//4、注意：在Vue中，已经实现了数据的双向绑定，每当完美修改了 打他、 中的数据，Vue会默认监听到数据的改动，自动把最新的数据，应用到页面上；
//5、当我们意识到上面的第四步的时候，就证明大家已经入门Vue了，我们更多的是在进行 VM 中Model数据的操作，同时，在操作Model数据的时候，指定的业务逻辑操作；
var car = {id:this.id, name:this.name, ctime:new Date()};
this.list.push(car);
this.id = this.name = '';
},
del(id){//根据id删除数据
//分析：
//1、如何根据ID，找到要删除这一项的索引
//2、如果找到索引了，直接调用数组的splice方法
this.list.some((item,i)=>{
if(item.id == id){
this.list.splice(i,1);
//在数组的some方法中，如果return true ，就会立即终止这个数组的后续循环
return true;
}
})
},
search(keywords){//根据关键字进行数据的搜索
/*var newList =[];
this.list.forEach(item=>{
if(item.name.indexOf(keywords) != -1){
newList.push(item);
}
})
return newList;*/
//注意：forEach some filter findIndex 这些都属于数组的新方法 都会对数组中的每一项进行遍历 然后执行相关的操作
return this.list.filter(item=>{
// if(item.name.indexOf(keywords) != -1)
//注意：在ES6中，为字符串提供了一个新方法，叫做String.prototype.include('要包含的字符串')，如果包含，则返回true，否则返回false
if(item.name.includes(keywords)){
return item;
}
})
}
}
});
</script>
</body>
</html>
过滤器
Vue.js运行自定义过滤器，可悲用作一些常见的文本格式化。过滤器可以在两个地方使用：mustache插值和 v-bind 表达式。过滤器应该被添加在JavaScript的尾部，由“管道”符指示：
- html元素
<!-- 过滤器调用时候的格式 {{ name | 过滤器名称 }} -->
<td>{{ item.ctime | dataFormat('yyyy-m-dd') }}</td>
- 私有过滤器
<div id="app2">
<!-- 过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候优先调用私有过滤器 -->
<p>{{ msg | msgFormat }}</p>
</div>
<script>
//如何定义一个私有过滤器
var vm2 = new Vue({
el:'#app2',
data:{
msg:'谁是这个世界上最单纯的男人，单纯的我~~'
},
filters:{ // 定义私有过滤器 过滤器有两个条件 [ 过滤器名称 和 处理函数 ]
msgFormat:function(msg,partten){
return msg.replace(/单纯/g,'大方---');
}
}
})
</script>
- 全局过滤器
<div id="app">
<p>{{ msg | msgFormat }}</p>
<p>{{ msg | msgFormat2('疯狂+1') }}</p>
</div>
<script>
//定义一个Vue 全局的过滤器，名字叫 msgFormat
Vue.filter('msgFormat',function(msg){
// 字符串的 replace 方法，第一个参数，除了可以写一个字符串之外，还可以定义一个正则
return msg.replace(/单纯/g,'邪恶');
})
Vue.filter('msgFormat2',function(msg,arg){
// 字符串的 replace 方法，第一个参数，除了可以写一个字符串之外，还可以定义一个正则
return msg.replace(/单纯/g,arg);
})
var vm = new Vue({
el:'#app',
data:{
msg:'谁是这个世界上最单纯的男人，单纯的我~~'
}
});
</script>
注意：当有局部和全局两个名称相同的过滤器的时候，会采用就近原则调用，即：局部过滤器优先于全局过滤器被调用！
按键修饰符以及自定义键盘修饰符
在监听键盘事件时，我们如果需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
<!-- 当按键enter弹起时才调用submit函数 -->
<input v-on:keyup.enter="submit">
其中.enter是 Vue 提供的常见按键码别名，除此之外还有：
- .enter
- .tab
- .delete (捕获“删除”和“退格”键)
- .esc
- .space
- .up
- .down
- .left
- .right
除了 Vue 提供的常见按键别名，如果要使用其他的按键则可以 .按键码 （点击查看详细按键码）的方式：
<!-- 使用.按键码 -->
<input v-on:keyup.113="submit">
除了直接使用键盘码之外，还可以给键盘码起一个别名方便使用：
<script>
//其中f2是别名，113是键盘码
Vue.config.keyCode.f2 = 113
</script>
自定义指令
- 全局自定义指令
使用 Vue.directive() 定义全局指令；
其中：
参数1：指令的名称，注意，在定义的时候，指令的名称前面，不需要加 v- 前缀在调用的时候，必须在指令前 加上 v- 前缀；
参数2：是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以特定的阶段，执行相关的操作；
<script>
Vue.directive('focus',{
//bind inserted update 是钩子函数
bind: function(el){//每当指令绑定到元素上的时候，会执行这个bind函数，只执行一次
//注意：在每个元素中，第一个参数，永远是el，表示被绑定了指令的那个元素，这个el参数，是一个原生的js对象
//在元素刚绑定了指令的时候，还没有插入到DOM中去，这个时候，调用foucs方法没有用
//因为，一个元素，只有插入DOM之后，才能获取焦点
el.focus();//这个方法不会起作用
},
inserted: function(el){//表示元素插入到DOM中的时候会执行inserted函数
el.focus();
},
update: function(){//当VNode更新的时候，会执行update，可能会触发多次
}
})
</script>
- 自定义私有指令
<script>
var vm = new Vue({
el:'#app',
dirctives:{//自定义私有指令
'fontweight':{
bind: function(el,binding){
el.style.fontWeight = binding.value;
}
}
}
})
</script>
- 自定义指令函数的简写
在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。
<script>
Vue.directive('color-swatch', function (el, binding) {
el.style.backgroundColor = binding.value
})
</script>
钩子函数和钩子函数的属性
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
- bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
- inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
- update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
- componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
- unbind：只调用一次，指令与元素解绑时调用。
指令钩子函数会被传入以下参数：
-
el：指令所绑定的元素，可以用来直接操作 DOM。
-
binding：一个对象，包含以下属性：
- name：指令名，不包括 v- 前缀。
- value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
- oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
- expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
- arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
- modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
-
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
-
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
Vue实例的生命周期
- 什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
- 生命周期钩子：就是生命周期事件的别名而已；
- 主要生命周期函数分类
- 创建期间的生命周期函数：
- beforeCreate：实例刚再内存中被创建出来，此时，还没有初始化好 data 和 methods 属性；
- created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始编译模板；
- beforMount：此时已经完成了模板的编译，但是还没有挂载到网页中；
- mounted：此时，已经将编译好的模板，挂载到了网页的指定容器中显示；
- 运行期间的生命周期函数：
- beforUpdate：状态更新之前执行此函数，此时 data 中的状态值还是最新的，但是界面上显示的数据还是旧的，因此此时还没有开始渲染DOM节点；
- update：实例更新完毕之后调用此函数，此时 data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了；
- 销毁期间的生命周期：
- beforDestroy：实例销毁之前调用。在这一步，实例仍然完全可用；
- destroyed：Vue实例销毁后调用。调用后，Vue实例显示的所有东西都会解绑定，所有事件监听器会被移除，所有子实例也会被销毁。
- 创建期间的生命周期函数：
过程图：
扫一扫
1511
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
