目标
钩子函数
自定义指令
自定义过滤器
计算属性
-
-
为了复用，为了代码的灵活
-
-
指令的分类：全局指令，局部指令
-
在vm外面创建的指令
-
通过Vue.directive来创建
-
-
如何定义自定义指令(不用赋值)
-
Vue.directive(名称，{inserted(el,binding){}})
-
-
如何使用自定义指令(不用赋值)
-
v-名称
-
-
如何定义带值的指令
-
Vue.directive(名称，{inserted(el,binding){binding.value}})
-
-
如何使用需要赋值的指令
-
v-名称='值'
-
需求：我们希望能够在页面加载完成的时候让id文本框获取焦点
-
页面加载完毕就触发：window.onload
-
获取焦点:dom.focus()
-
在vue中有一套完整的生命周期的钩子函数
-
mounted钩子函数，它是一个独立的结构，不要写在methods属性中
-
钩子函数：在某个场景会自动触发的函数
-
-
不建议使用原生dom的方式去获取元素，因为vue就是希望能够将我们从繁琐的dom操作中解脱
-
vue中标记元素可以通过ref （reference）
-
ref='标记值'
-
功能类似于之前的id设置
-
获取值通过this.$refs
-
-
-
指令：可以实现某种功能，用户可以选择使用
-
什么是全局自定义指令 ：在vue实例外创建的指令
-
如何创建全局自定义指令
-
Vue.directive(名称，{inserted钩子函数})
-
inserted钩子函数：在添加指令的元素插入到父节点时触发--说白了就是生成dom树
-
-
DOCTYPE html>
<html lang="en">
<head>
<title>title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#app {
width: 600px;
margin: 10px auto;
}
.tb {
border-collapse: collapse;
width: 100%;
}
.tb th {
background-color: #0094ff;
color: white;
}
.tb td,
.tb th {
padding: 5px;
border: 1px solid black;
text-align: center;
}
.add {
padding: 5px;
border: 1px solid black;
margin-bottom: 10px;
}
style>
<script src="./js/vue2.js">script>
head>
<body>
<div id="app">
<div class="add">
编号:
<input type="text" v-model='id' ref='bid'>
品牌名称:
<input type="text" v-model='brandname' ref='bname' v-focus>
<input type="button" value="添加" @click='add'>
div>
<div class="add">
品牌名称:
<input type="text" placeholder="请输入搜索条件" >
div>
<div>
<table class="tb">
<thead>
<tr>
<th>编号th>
<th>品牌名称th>
<th>创立时间th>
<th>操作th>
tr>
thead>
<tbody>
<tr v-for="(value,index) in brandList">
<td>{{value.id}}td>
<td>{{value.name}}td>
<td>{{value.time}}td>
<td>
<a href="#" @click='del(index)'>删除a>
td>
tr>
<tr v-show="brandList.length==0">
<td colspan="4">没有任何数据了，请先添加td>
tr>
tbody>
table>
div>
div>
<script>
// window.onload = function(){
// }
// 1.定义全局自定义指令：全局自定义是指在vm实例定义的指令
// 2.通过Vue.directive来创建自定义指令
// Vue.directive(指令名称,{配置})
Vue.directive('focus',{
inserted(el,binding,vNode){
// 我们需要获取元素并设置聚焦
console.log(el)
el.focus()
}
})
// 2.创建vm实例
var vm = new Vue({
// 3.添加配置
el: '#app',
data: {
// id号
id:'',
// 品牌名称
brandname:'',
brandList: [
{
"id": 1,
name: 'AA',
time: new Date()
},
{
"id": 2,
name: 'BB',
time: new Date()
}
]
},
methods:{
// 删除
del(index){
this.brandList.splice(index,1)
},
// 添加
add(){
// 生成对象
var newobj = {id:this.id,name:this.brandname,time:new Date()}
// 添加到数组
this.brandList.push(newobj)
}
},
// 添加一个生命周期钩子函数
mounted(){
// 实现元素的自动获取焦点
// document.querySelector('#bid').focus()
// console.log(this)
// this.$refs可以获取模板中所有拥有ref属性的元素，它是一个对象
// this.$refs.bid.focus()
}
})
script>
body>
html>
使用 “v-名称” 来调用全局自定义指令
新的需求：我们需要根据用户的喜好来修改文本颜色
-
-
通过Vue.directive(名称,{inserted(el,binding){}})
-
使用指令的时候：v-名称='值'
DOCTYPE html>
<html lang="en">
<head>
<title>title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#app {
width: 600px;
margin: 10px auto;
}
.tb {
border-collapse: collapse;
width: 100%;
}
.tb th {
background-color: #0094ff;
color: white;
}
.tb td,
.tb th {
padding: 5px;
border: 1px solid black;
text-align: center;
}
.add {
padding: 5px;
border: 1px solid black;
margin-bottom: 10px;
}
style>
<script src="./js/vue2.js">script>
head>
<body>
<div id="app">
<div class="add">
编号:
<input type="text" v-model='id' ref='bid' v-setcolor="color">
品牌名称:
<input type="text" v-model='brandname' ref='bname' v-focus >
<input type="button" value="添加" @click='add'>
div>
<div class="add">
品牌名称:
<input type="text" placeholder="请输入搜索条件" >
div>
<div>
<table class="tb">
<thead>
<tr>
<th>编号th>
<th>品牌名称th>
<th>创立时间th>
<th>操作th>
tr>
thead>
<tbody>
<tr v-for="(value,index) in brandList">
<td>{{value.id}}td>
<td>{{value.name}}td>
<td>{{value.time}}td>
<td>
<a href="#" @click='del(index)'>删除a>
td>
tr>
<tr v-show="brandList.length==0">
<td colspan="4">没有任何数据了，请先添加td>
tr>
tbody>
table>
<button @click='color="red"'>红色button>
<button @click='color="green"'>绿色button>
<button @click='color="yellow"'>黄色button>
div>
div>
<script>
// window.onload = function(){
// }
// 1.定义全局自定义指令：全局自定义是指在vm实例定义的指令
// 2.通过Vue.directive来创建自定义指令
// Vue.directive(指令名称,{配置})
Vue.directive('focus',{
inserted(el,binding,vNode){
// 我们需要获取元素并设置聚焦
console.log(el)
el.focus()
}
})
// 设置颜色的自定义指令
Vue.directive('setcolor',{
// el:当前使用这个指令的元素
// binding:它是一个对象，里面有一个属性value,就是当前指令所绑定的值
inserted(el,binding){
console.log(binding)
el.style.color = binding.value
},
// 添加update,监听指令的值的变化，以便页面进行刷新
update(el,binding){
console.log(el)
console.log(binding)
el.style.color = binding.value
}
})
// 2.创建vm实例
var vm = new Vue({
// 3.添加配置
el: '#app',
data: {
color:'yellow',
// id号
id:'',
// 品牌名称
brandname:'',
brandList: [
{
"id": 1,
name: 'AA',
time: new Date()
},
{
"id": 2,
name: 'BB',
time: new Date()
}
]
},
methods:{
// 删除
del(index){
this.brandList.splice(index,1)
},
// 添加
add(){
// 生成对象
var newobj = {id:this.id,name:this.brandname,time:new Date()}
// 添加到数组
this.brandList.push(newobj)
}
},
// 添加一个生命周期钩子函数
mounted(){
// 实现元素的自动获取焦点
// document.querySelector('#bid').focus()
// console.log(this)
// this.$refs可以获取模板中所有拥有ref属性的元素，它是一个对象
// this.$refs.bid.focus()
}
})
script>
body>
html>
命名细节：如果你使用cemal命名法，那么在使用指令的时候就需要将多个单词拆分开，使用-连接。所以建议定义指令的时候命名都是小写
update钩子函数可处理当数据或者模板内容发生变化的时候就自动的触发
// 添加update,监听指令的值的变化，以便页面进行刷新
update(el,binding){
console.log(el)
console.log(binding)
el.style.color = binding.value
}
-
-
种类：
-
全局过滤器：在vm实例之前(外面)创建的过滤器
-
局部过滤器：在组件内部创建的过滤器
-
-
如何定义
-
Vue.filter(名称，函数)
-
细节
-
过滤器会默认接收一个参数，这个参数就是当前调用过滤器的数据对象
-
如果你手动传递了参数，也不会影响默认参数的传递，意味着过滤器中直接在默认参数后添加新的接收形参就可以了
-
过滤器的函数“一定”要写return,因为过滤器一定要返回结果
-
-
-
如何调用
-
通过管道符|
-
格式：需要调用过滤器的数据 | 过滤器名称
-
DOCTYPE html>
<html lang="en">
<head>
<title>title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#app {
width: 600px;
margin: 10px auto;
}
.tb {
border-collapse: collapse;
width: 100%;
}
.tb th {
background-color: #0094ff;
color: white;
}
.tb td,
.tb th {
padding: 5px;
border: 1px solid black;
text-align: center;
}
.add {
padding: 5px;
border: 1px solid black;
margin-bottom: 10px;
}
style>
<script src="./js/vue2.js">script>
head>
<body>
<div id="app">
<div class="add">
编号:
<input type="text" v-model='id' ref='bid' v-setcolor="color">
品牌名称:
<input type="text" v-model='brandname' ref='bname' v-focus>
<input type="button" value="添加" @click='add'>
div>
<div class="add">
品牌名称:
<input type="text" placeholder="请输入搜索条件" @keyup='search'>
div>
<div>
<table class="tb">
<thead>
<tr>
<th>编号th>
<th>品牌名称th>
<th>创立时间th>
<th>操作th>
tr>
thead>
<tbody>
<tr v-for="(value,index) in brandList">
<td>{{value.id}}td>
<td>{{value.name}}td>
<td>{{value.time | timeForamt('~')}}td>
<td>
<a href="#" @click='del(index)'>删除a>
td>
tr>
<tr v-show="brandList.length==0">
<td colspan="4">没有任何数据了，请先添加td>
tr>
tbody>
table>
<button @click='color="red"'>红色button>
<button @click='color="green"'>绿色button>
<button @click='color="yellow"'>黄色button>
div>
div>
<script>
// window.onload = function(){
// }
// 1.定义全局自定义指令：全局自定义是指在vm实例定义的指令
// 2.通过Vue.directive来创建自定义指令
// Vue.directive(指令名称,{配置})
Vue.directive('focus', {
inserted(el, binding, vNode) {
// 我们需要获取元素并设置聚焦
console.log(el)
el.focus()
}
})
// 设置颜色的自定义指令
Vue.directive('setcolor', {
// el:当前使用这个指令的元素
// binding:它是一个对象，里面有一个属性value,就是当前指令所绑定的值
inserted(el, binding) {
console.log(binding)
el.style.color = binding.value
},
// 添加update,监听指令的值的变化，以便页面进行刷新
update(el, binding) {
console.log(el)
console.log(binding)
el.style.color = binding.value
}
})
// 添加全局的自定义过滤器
Vue.filter('timeForamt', (date,seperator1) => {
// var date = new Date();
// var seperator1 = "/";
var year = date.getFullYear();
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = year + seperator1 + month + seperator1 + strDate;
return currentdate;
})
// 2.创建vm实例
var vm = new Vue({
// 3.添加配置
el: '#app',
data: {
color: 'yellow',
// id号
id: '',
// 品牌名称
brandname: '',
brandList: [
{
"id": 1,
name: 'AA',
time: new Date()
},
{
"id": 2,
name: 'BB',
time: new Date()
}
]
},
methods: {
// 格式化日期
// timeFormat(time){
// return "2019-9-9 :9:9:9"
// },
// 删除
del(index) {
this.brandList.splice(index, 1)
},
// 添加
add() {
// 生成对象
var newobj = { id: this.id, name: this.brandname, time: new Date() }
// 添加到数组
this.brandList.push(newobj)
}
},
// 添加一个生命周期钩子函数
mounted() {
// 实现元素的自动获取焦点
// document.querySelector('#bid').focus()
// console.log(this)
// this.$refs可以获取模板中所有拥有ref属性的元素，它是一个对象
// this.$refs.bid.focus()
}
})
script>
body>
html>
什么场景使用计算属性：当你的模板中的业务比较复杂的时候就可以使用计算属性进行封装
当计算属性中依赖的数据发生变化的时候，这个计算属性就会被触发
所谓依赖的数据就是指里面所依赖的this的成员
它与普通方法的区别:
普通方法没有缓存机制，只要你使用到了方法，就必须进行方法的调用执行
而计算属性是基本依赖进行缓存的，意味着只要依赖项的值没有变化，那么计算属性不会再重新的调用，而是使用上一次的计算结果--提高效率
使用计算属性实现搜索功能
DOCTYPE html>
<html lang="en">
<head>
<title>title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#app {
width: 600px;
margin: 10px auto;
}
.tb {
border-collapse: collapse;
width: 100%;
}
.tb th {
background-color: #0094ff;
color: white;
}
.tb td,
.tb th {
padding: 5px;
border: 1px solid black;
text-align: center;
}
.add {
padding: 5px;
border: 1px solid black;
margin-bottom: 10px;
}
style>
<script src="./js/vue2.js">script>
head>
<body>
<div id="app">
<div class="add">
编号:
<input type="text" v-model='id' ref='bid' v-setcolor="color">
品牌名称:
<input type="text" v-model='brandname' ref='bname' v-focus>
<input type="button" value="添加" @click='add'>
div>
<div class="add">
品牌名称:
<input type="text" placeholder="请输入搜索条件" v-model='userKey'>
div>
<div>
<table class="tb">
<thead>
<tr>
<th>编号th>
<th>品牌名称th>
<th>创立时间th>
<th>操作th>
tr>
thead>
<tbody>
<tr v-for="(value,index) in search">
<td>{{value.id}}td>
<td>{{value.name}}td>
<td>{{value.time | timeForamt('~')}}td>
<td>
<a href="#" @click='del(index)'>删除a>
td>
tr>
<tr v-show="search.length==0">
<td colspan="4">没有任何数据了，请先添加td>
tr>
tbody>
table>
<button @click='color="red"'>红色button>
<button @click='color="green"'>绿色button>
<button @click='color="yellow"'>黄色button>
div>
div>
<script>
// window.onload = function(){
// }
// 1.定义全局自定义指令：全局自定义是指在vm实例定义的指令
// 2.通过Vue.directive来创建自定义指令
// Vue.directive(指令名称,{配置})
Vue.directive('focus', {
inserted(el, binding, vNode) {
// 我们需要获取元素并设置聚焦
// console.log(el)
el.focus()
}
})
// 设置颜色的自定义指令
Vue.directive('setcolor', {
// el:当前使用这个指令的元素
// binding:它是一个对象，里面有一个属性value,就是当前指令所绑定的值
inserted(el, binding) {
// console.log(binding)
el.style.color = binding.value
},
// 添加update,监听指令的值的变化，以便页面进行刷新
update(el, binding) {
// console.log(el)
// console.log(binding)
el.style.color = binding.value
}
})
// 添加全局的自定义过滤器
Vue.filter('timeForamt', (date,seperator1) => {
// var date = new Date();
// var seperator1 = "/";
var year = date.getFullYear();
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = year + seperator1 + month + seperator1 + strDate;
return currentdate;
})
// 2.创建vm实例
var vm = new Vue({
// 3.添加配置
el: '#app',
data: {
// 搜索关键字
userKey:'',
color: 'yellow',
// id号
id: '',
// 品牌名称
brandname: '',
brandList: [
{
"id": 1,
name: 'AA',
time: new Date()
},
{
"id": 2,
name: 'BB',
time: new Date()
}
]
},
methods: {
// 删除
del(index) {
this.brandList.splice(index, 1)
},
// 添加
add() {
// 生成对象
var newobj = { id: this.id, name: this.brandname, time: new Date() }
// 添加到数组
this.brandList.push(newobj)
}
},
computed: {
search(){
// 监听用户关键字的变化，只是用户输入有变化，就需要重新进行搜索
// 计算属性中的函数一般都会返回一个计算结果
// var result = []
// for(var i=0;i
// // 说明这个对象的name值中包含关键字，这就是我要找的记录之一
// // 如果没有输入任何的关键字，那么this.userKey默认就是""
// if(this.brandList[i].name.indexOf(this.userKey) != -1){
// result.push(this.brandList[i])
// }
// }
// return result
// 每次都会从数组中取出一个值，传递给回调函数中的参数value
// 在回调函数中对Value进行检测判断如果满足条件，那么就会将value值存储到filter方法内部创建的临时数组arr中，最终将这个数组arr返回
// forEach map filter
return this.brandList.filter((value) => {
return value.name.indexOf(this.userKey) != -1
})
}
}
})
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<title>title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./js/vue2.js">script>
head>
<body>
<div id="app">
<input type="text" v-model='first'>
<input type="text" v-model='second'>
<p>{{fullname}}p>
div>
<script>
var vm = new Vue({
el: '#app',
data: {
first:'',
second:'',
fullname:''
},
// 添加侦听器
watch:{
// 方法的名称必须和你想要侦听的data中的成员名称一致
first(newvalue,oldvalue){
setTimeout(() => {
console.log(newvalue,oldvalue)
this.fullname = newvalue.trim().toUpperCase() +":"+this.second
}, 100);
},
second(newvalue,oldvalue){
console.log(newvalue,oldvalue)
}
}
})
script>
body>
html>
watch监听如何实现深度监听
什么是深度：不再是this的直接成员，面是this的成员的成员
两种实现方式：
1.handler +deep
2.'对象.属性'(){}
深度监听Demo
DOCTYPE html>
<html lang="en">
<head>
<title>title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./js/vue2.js">script>
head>
<body>
<div id="app">
<input type="text" v-model='obj.name'>
<input type="text" v-model='obj.age'>
<p>{{obj.name+":"+obj.age}}p>
div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg:'',
obj:{
name:'',
age:''
}
},
// 添加侦听属性
watch:{
msg(){},
// 深度侦听：
// 为什么直接侦听obj，在修改数据的时候没有响应，是因为obj一个对象，你修改对象的属性值，并没有修改对象的的地址
// obj(){
// }
// obj:{
// // 通过handler函数进行侦听
// handler(nv,ov){
// console.log(nv.name,nv.age)
// },
// // 设置为深度侦听
// deep:true
// }
// 侦听指定的成员值的变化
'obj.name' (nv){
console.log(nv)
}
}
})
script>
body>
html>
什么时候使用侦听器？
当数据操作涉及到异步方式的时候，就需要使用侦听器
Vue学习文档：https://cn.vuejs.org/v2/guide/