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