计算属性
# 计算属性是基于它们的依赖进行缓存的
# 计算属性只有在它的相关依赖发生改变时才会重新求值
# 计算属性就像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>