计算属性
# 计算属性是基于它们的依赖进行缓存的
# 计算属性只有在它的相关依赖发生改变时才会重新求值
# 计算属性就像Python中的property,可以把方法/函数伪装成属性
# 计算属性必须要有返回值
基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="d1">
<h1>普通函数---其他数据变化---》函数会重写计算</h1>
年龄:<input type="text" v-model="age">
姓名:<input type="text" v-model="name">
<br>
{{getAge()}}
<br>
<h1>计算属性</h1>
年龄:<input type="text" v-model="age1">
姓名:<input type="text" v-model="name1">
<br>
{{newAge}}
<br>
</div>
</body>
<script>
var vm = new Vue({
el: '#d1',
data: {
age: '',
name: '',
age1: '',
name1: '',
},
methods: {
getAge() {
console.log('我执行了')
return Number(this.age) + 10
}
},
computed: {
newAge() {
console.log('我执行了--计算属性')
return Number(this.age1) + 20
}
}
})
</script>
</html>
首字母变大写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="d1">
<h1>首字母变大写</h1>
<input type="text" v-model="name"> ---》{{newName}}
</div>
</body>
<script>
var vm = new Vue({
el: '#d1',
data: {
name: ''
},
computed: {
newName() {
return this.name.substring(0, 1).toUpperCase() + this.name.substring(1)
}
}
})
</script>
</html>
通过计算属性,重写过滤案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>过滤案例</h1>
<input type="text" v-model="search">
<ul>
<li v-for="item in newDataList">{{item}}</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
search: '',
dataList: ['a', 'at', 'atom', 'be', 'beyond', 'bee', 'c', 'cs', 'csrf'],
},
computed:{
newDataList(){
return this.dataList.filter(item => item.indexOf(this.search) >= 0)
}
}
})
</script>
</html>
监听属性
只要属性发生变化,就会执行 函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>监听属性</h1>
<button @click="ordering='id'">按id排序</button>
<button @click="ordering='price'">按价格排序</button>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
ordering: ''
},
watch: {
ordering() {
console.log('我变了,向后端发送请求')
console.log(this.ordering)
}
}
})
</script>
</html>
生命周期钩子
# vue 组件的生命周期钩子函数
一个vue的组件,从创建开始---》到最后销毁---》经历一些过程---》每个过程都绑定了一个函数--》当到这个过程的时候,这个函数就会执行
面向切面编程:AOP
# 8个生命周期钩子函数
1.beforeCreate: 组件创建之前实现这个:组件html,js--》html和js都是空的
2.created:组件创建完成后:js就有值了,html还是空的 (向后端发送ajax请求)
3.beforeMount:挂载模板之前,js有值,模板(html) 还是空的(向后端发送ajax请求)
4.mounted:挂载完成:js有值,模板有值
5.beforeUpdate:刷新之前执行:只要页面发送变化或js变量发生变化,就会触发它的执行
6.updated:刷新之后执行
7.beforeDestroy:被销毁之前执行 (资源清理性工作)
8.destroyed:被销毁之后执行
# 实际用途
1 页面加载完成,向后端发请求拿数据
写在create中
2 组件中有定时任务,组件销毁,要销毁定时任务、
# 补充:定时器和延时器
setTimeout( ()=>{
console.log('延时器,3s后执行')
},3000)
setInterval(()=>{
console.log('每隔3s执行')
},3000)
组件介绍
# 组件是:有模板,有js的 ,有方法的 对象 组件和组件直接的 变量,模板都是隔离的
# 定义组件
Vue.component('Child',{
template: `
<div>
<h1>我是组件</h1>
<button @click="haneleClick">点我看美女</button>
<p>年龄是:{{ age }}</p>
</div>`,
data() {
return {
age: 19
}
},
methods: {
haneleClick() {
alert('美女')
}
}
})
# 使组件,直接根据组件名使用即可
<Child></Child>
局部组件和全局组件
# 全局组件
- 定义:
Vue.component('Child',{})
- 使用,可以在任意位置使用
<Child></Child>
# 局部组件-->只能定义在组件内部,只能在当前组件中使用
-定义
var vm = new Vue({
el: '#app',
data: {},
components:{局部组件:{}}
})
-使用:只能用在被 当前组件管理的 html (#app) 中,放在别的位置找不到
全局组件使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="d1">
<h1>组件的使用</h1>
<button @click="handleClick">点我看美女</button>
<hr>
<lyz></lyz>
</div>
</body>
<script>
// 定义全局组件
Vue.component('lyz', {
template: `
<div>
<h1>{{ name }}</h1>
<button @click="handleClick">点我换名字</button>
</div>`,
data() {
return {
name: 'lyz'
}
},
methods: {
handleClick() {
this.name = '吴彦祖'
}
}
})
var vm = new Vue({
el: '#d1',
data: {},
methods: {
handleClick() {
alert('美女')
}
}
})
</script>
</html>
局部组件的使用
局部组件是定义在组件内部,只能在当前组件中使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>局部组件的使用</h1>
<Child></Child>
</div>
</body>
<script>
// 全局组件
Vue.component('Child', {
template: `
<div>
<lyz></lyz>
</div>
`,
// 局部组件
components: {
lyz: {
template: `
<div>
<h2>我是局部组件</h2>
</div>
`,
data() {
return {}
},
methods: {}
}
}
})
var vm = new Vue({
el: '#app',
data: {},
methods: {
handleClick() {
alert('美女')
}
},
})
</script>
</html>
组件间通信
父传子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="d1">
<h1>组件通信之父传子:自定义属性</h1>
<p>父组件中得名字:{{name}}</p>
<div style="background-color: #c0e9ff">
<child :nn="name" mm="lyz"></child>
</div>
</div>
</body>
<script>
Vue.component('child',{
template:`
<div>
<h2>我是Child组件</h2>
<p>{{nn}}==={{mm}}</p>
</div>
`,
props:['nn','mm']
})
var vm = new Vue({
el:'#d1',
data:{
name:'吴彦祖'
},
methods:{
}
})
</script>
</html>
子传父
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="d1">
<h1>组件通信之子传父:自定义事件</h1>
<p>子组件的值:{{p_name}}</p>
<child @mm="handleEvent"></child>
</div>
</body>
<script>
Vue.component('child', {
template: `
<div>
<h2>我是Child组件</h2>
<input type="text" v-model="name">---{{ name }}
<button @click="handleSend">传给父亲</button>
</div>
`,
data() {
return {
name: ''
}
},
methods: {
handleSend() {
this.$emit('mm', this.name)
}
}
})
var vm = new Vue({
el: '#d1',
data: {
p_name: ''
},
methods: {
handleEvent(name) {
this.p_name = name
}
}
})
</script>
</html>