标签：el console log 通信 name 组件 data 属性
Ⅰ 计算属性-监听属性
【一】计算属性:computed
# 1 本质是一个函数，但是当属性用
计算属性是基于它们的依赖进行缓存的
计算属性只有在它的相关依赖发生改变时才会重新求值
计算属性就像Python中的property，可以把方法/函数伪装成属性
# 2 计算属性和普通函数的区别
-1 如果使用计算属性，只要 计算属性中使用的变量，发生变化时，计算属性才重新运算
-2 如果使用函数，只要页面发生变化，函数就会重新运算 # 别的输入框变化，函数就会重新运算
-3 计算属性当属性用，可以被for循环，可以被v-if判断
当属性用：
computed:{ //里面的值，当属性用
new_name(){
console.log('执行了')
return this.username.substring(0,1).toUpperCase()+this.username.substring(1)
}
}
【1】基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js2/vue.js"></script>
</head>
<body>
<div id="app">
<h1>用户输入英文名-首字母转大写</h1>
<input type="text" v-model="username">-->{{getUser()}}
<input type="text" v-model="username">--->{{this.username.substring(0,1).toUpperCase()+this.username.substring(1)}}
<input type="text" v-model="username">-->{{new_name}}
<hr>
<input type="text" v-model="age">-->{{age}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
username:'',
age:''
},
methods:{
getUser(){
console.log('-----执行了')
return this.username.substring(0,1).toUpperCase()+this.username.substring(1)
}
},
computed:{ //里面的值，当属性用
new_name(){
console.log('执行了')
return this.username.substring(0,1).toUpperCase()+this.username.substring(1)
}
}
})
</script>
</html>
【2】实用计算属性重写过滤案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤案例</title>
<script src="./js2/vue.js"></script>
</head>
<body>
<div class="app">
<input type="text" v-model="myText">
<ul>
<li v-for="item in newDataList">{{item}}</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
myText: '',
dataList: ['a', 'at', 'atom', 'atommon', 'be', 'beyond', 'cs', 'csrf'],
},
methods: {
},
computed: {
newDataList() {
return this.dataList.filter(item => {
if (item.indexOf(this.myText) >= 0) {
return true
} else {
return false
}
})
}
}
})
</script>
</html>
【二】监听属性:watch
# 1 监听一个属性的变化，只要属性发生了变化，就执行 xx代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>监听属性</title>
<script src="./js2/vue.js"></script>
</head>
<body>
<div class="app">
<h1>监听属性</h1>
<button @click="goods_type='食品'">食品</button>
<button @click="goods_type='蔬菜'">蔬菜</button>
<button @click="goods_type='冷藏'">冷藏</button>
<hr>
{{goods_type}}
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
goods_type: '所有数据'
},
watch: {
goods_type(new_val,old_val){
console.log(old_val)
console.log(new_val)
console.log('向后端发送请求，过滤数据了')
}
}
})
</script>
</html>
Ⅱ 生命周期
# 1 vue组件：从创建开始-->到被销毁经历了一个过程
-过程中会有一些函数-->到某个过程时，就会触发这个函数的执行
-8 个生命周期钩子函数
# 2 8个 （创建，挂在，更新，销毁）
beforeCreate 创建 Vue实例/组件之 前调用
created 创建Vue实例成功后调用（可以在此处发送异步请求后端数据）
beforeMount 渲染DOM之前调用
mounted 渲染DOM之后调用
beforeUpdate 重新渲染之前调用（数据更新等操作时，控制DOM重新渲染）
updated 重新渲染完成之后调用
beforeDestroy 销毁之前调用
destroyed 销毁之后调用
# 3 重点
-created会经常用：组件创建完成，就向后端发送ajax请求获取数据
-beforeDestroy 可能会用
【一】展示从创建开始到被销毁经历了一个过程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>生命周期钩子</title>
<script src="./js2/vue.js"></script>
</head>
<body>
<div class="app">
<h1>生命周期钩子</h1>
{{name}}
<br>
<button @click="name='跳大象舞'">点我换名字</button>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
name:'蜡笔小新'
},
beforeCreate() {
console.log('当前状态：beforeCreate')
},
created() {
console.log('当前状态：created')
},
beforeMount() {
console.log('当前状态：beforeMount')
},
mounted() {
console.log('当前状态：mounted')
},
beforeUpdate() {
console.log('当前状态：beforeUpdate')
},
updated() {
console.log('当前状态：updated')
},
beforeDestroy() {
console.log('当前状态：beforeDestroy')
},
destroyed() {
console.group('当前状态：destroyed')
},
})
</script>
</html>
【二】用一个组件展示从创建开始到被销毁经历了一个过程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>生命周期钩子</title>
<script src="./js2/vue.js"></script>
</head>
<body>
<div class="app">
<h1>组件生命周期</h1>
<hr>
<child v-if="show"></child>
<hr>
<button @click="handleShow">点我隐藏显示组件</button>
</div>
</body>
<script>
//1 组件是有自己的html，css和js的一个对象--》能放在其它组件中使用
Vue.component('child', {
template: `
<div>
<h1>{{ title }}</h1>
<button @click="handleChange">点我换标题</button>
</div>`,
data() {
return {
title: '我是child组件'
}
},
methods: {
handleChange() {
this.title = '变了'
}
},
beforeCreate() {
console.group('当前状态：beforeCreate')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状态：', this.title)
},
created() {
console.group('当前状态：created')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状态：', this.title)
},
beforeMount() {
console.group('当前状态：beforeMount')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状态：', this.title)
},
mounted() {
console.group('当前状态：mounted')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状态：', this.name)
},
beforeUpdate() {
console.group('当前状态：beforeUpdate')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状态：', this.title)
},
updated() {
console.group('当前状态：updated')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状态：', this.title)
},
beforeDestroy() {
console.group('当前状态：beforeDestroy')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状态：', this.title)
},
destroyed() {
console.group('当前状态：destroyed')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状态：', this.title)
},
})
var vm = new Vue({
el: '.app',
data: {
show: true
},
methods:{
handleShow(){
this.show=!this.show
}
}
})
</script>
</html>
【三】生命周期钩子-组件-案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>生命周期钩子</title>
<script src="./js2/vue.js"></script>
</head>
<body>
<div class="app">
<h1>组件生命周期</h1>
<hr>
<child v-if="show"></child>
<hr>
<button @click="handleShow">点我隐藏显示组件</button>
</div>
</body>
<script>
//1 组件是有自己的html，css和js的一个对象-->能放在其它组件中使用
Vue.component('child', {
template: `
<div>
<div style="height: 500px;width: 200px;background-color: pink">
<p>我说：你好</p>
<p v-for="item in data_list">客服说：{{ item }}</p>
</div>
</div>`,
data() {
return {
data_list: ['欢迎光临'],
t: null
}
},
created() {
// 启动定时器--》每隔3s中向data_list 追加一条记录
this.t = setInterval(() => {
console.log('开始追加拉')
this.data_list.push('下次再来！！')
}, 3000)
},
beforeDestroy() {
// 销毁定时器
clearInterval(this.t)
this.t = null
},
})
var vm = new Vue({
el: '.app',
data: {
show: true
},
methods: {
handleShow() {
this.show = !this.show
}
}
})
</script>
</html>
Ⅲ 组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件</title>
<script src="./js2/vue.js"></script>
</head>
<body>
<div class="app">
<h1>组件</h1>
<child></child>
<hr>
<!--<chile2></chile2> 是全局组件的子组件 所以放在这里 控制台会报错-->
<chile3></chile3>
</div>
</body>
<script>
//1 全局组件--->可以在其他组件中直接使用
// 组件有自己的 生命周期，数据，事件，计算属性，监听属性。。。
// 组件的data必须是个方法，返回对象
Vue.component('child', {
template: `
<div>
<div style="height: 200px;width: 100px;background-color: pink">
</div>
<chile2></chile2>
</div>`,
data() {
return {}
},
components: {
'chile2': {
template: `
<div>
<button>后退</button>
<div style="height: 200px;width: 100px;background-color: pink">
</div>
</div>`,
}
}
<!---->
})
// ('child',这里是个对象) 所以对象可以换种操作
// 还是全局组件 换了一种输出方式
var obj = {
template: `
<div>
<div style="height: 200px;width: 100px;background-color: pink">
</div>
<chile2></chile2>
</div>`,
data() {
return {}
},
components: {
'chile2': {
template: `
<div>
<button>后退</button>
<div style="height: 200px;width: 100px;background-color: pink">
</div>
</div>`,
}
}
<!---->
}
Vue.component('child', obj)
// 2 局部组件--->只能用在它父亲中,定义在组件的components 配置项上
var vm = new Vue({
el: '.app',
data: {},
methods: {},
components: {
'chile3': {
template: `
<div>
<button>前进</button>
<div style="height: 200px;width: 100px;background-color: pink">
</div>
</div>`,
} // 这样就能在上面展示 组件 <chile3></chile3>
}
})
// 局部操作中 也可以更换
var obj = {
template: `
<div>
<button>前进</button>
<div style="height: 200px;width: 100px;background-color: pink">
</div>
</div>`,
} // 这样就能在上面展示 组件 <chile3></chile3>
var vm = new Vue({
el: '.app',
data: {},
methods: {},
components: {
'chile3':obj
}
})
// 再或者是
var vm = new Vue({
el: '.app',
data: {},
methods: {},
components: {
obj
}
}) // 这里 的局部展示 再上面就要展示成 <obj></obj>
</script>
</html>
Ⅳ 组件通信之父传子
# 1 组件和组件之间数据隔离，但是有时候，我们想组件和组件之间通信
# 2 父传子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父传子---自定义属性</title>
<script src="./js2/vue.js"></script>
</head>
<body>
<div class="app">
<h1>父传子---自定义属性</h1>
<p>这是父组件</p>
<hr>
<child :mytitle="title" :aa="cc" :bb="true"></child>
<hr>
</div>
</body>
<script>
Vue.component('child', {
template: `
<div>
<div style="height: 200px;width: 100px;background-color: pink">
<p>这是子组件</p>
<p>{{mytitle}}</p>
<p>{{aa}}</p>
</div>
</div>`,
data() {
return {}
},
props:['mytitle','aa'],
})
var vm = new Vue({
el: '.app',
data: {
title:'给你的，儿子',
cc:'zyb'
},
})
</script>
</html>
Ⅴ 组件通信之子传父
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子传父--自定义事件</title>
<script src="./js2/vue.js"></script>
</head>
<body>
<div class="app">
<h1>子传父--自定义事件</h1>
<p>这是父组件,子组件传过来的值是：{{name}}</p>
<hr>
<child @send_data="handleA"></child>
<hr>
</div>
</body>
<script>
Vue.component('child', {
template: `
<div>
<div style="height: 200px;background-color: pink">
<input type="text" v-model="username"> <button @click="handleSend">点我传给父亲</button>
<br>
{{username}}
</div>
</div>`,
data() {
return {
username:''
}
},
methods:{
handleSend(){
//传给父亲
// this.$emit('自定义事件名字','参数')
this.$emit('send_data',this.username) // <child @send_data="handleA"></child>
}
}
})
var vm = new Vue({
el: '.app',
data: {
name:''
},
methods: {
handleA(name){
this.name=name
}
}
})
</script>
</html>
Ⅵ ref属性
# 1 ref 属性也可以做组件间通信
# 2 ref是vue提供的属性-->可以放在任意标签或组件上
-如果放在标签上
-通过 this.$refs.标签上的名字 拿到的值是 标签 对象
-我们可以通过标签对象，修改 标签的属性。。。src属性，value属性
-如果放在组件上
-通过 this.$refs.标签上的名字 拿到的值是 组件 对象
-我们可以通过 组件对象，直接修改对象中得数据，直接调用对象中得方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ref属性</title>
<script src="./js2/vue.js"></script>
</head>
<body>
<div class="app">
<h1>ref属性</h1>
<img src="./img/6.jpg" alt="" width="400px" height="400px" ref="myimg">
<br>
<input type="text" ref="myinput">
<button @click="handleClick">点我看控制台</button>
<hr>
<child ref="mychild"></child>
</div>
</body>
<script>
Vue.component('child', {
template: `
<div>
<div style="height: 200px;width: 100px;background-color: pink">
<p>这是子组件</p>
<p>{{name}}</p>
</div>
</div>`,
data(){
return {
name:"zyb"
}
},
methods:{
handleA(a){
console.log(a)
this.name=a
}
}
})
var vm = new Vue({
el: '.app',
data: {
name:'',
pice:'998'
},
methods:{
handleClick(){
console.log(this.$refs)
// 改图片地址
//console.log(this.$refs.myimg)
//this.$refs.myimg.src='./img/3.jpg'
//改input内容
// console.log( this.$refs.myinput)
// this.$refs.myinput.value='xxxx'
//拿到组件对象
//1 在父亲中，改了子的值
// this.$refs.mychild.name='xxxxxx'
//2 把子中得值，赋值给父亲
// this.name=this.$refs.mychild.name
// console.log(this.name)
//3 调用子的方法，传入父的参数
this.$refs.mychild.handleA(this.pice)
}
}
})
</script>
</html>
标签：el,
console,
log,
通信,
name,
组件,
data,
属性
From： https://www.cnblogs.com/zyb123/p/18351518