【一】 补充:nodejs
# 1 javascript:ECMA+bom+dom--->浏览器中执行的
# 2 ECMA
# 3 TypeScript:微软
-js:弱类型动态语言
-强类型语言:类型---》编译成js在浏览器中允许
-ts是js的超集:ts完全兼容js的语法
-闭包函数是装饰器的超集
# 4 后端:go,python,c,java,php
-谷歌浏览器的v8引擎:js解释器
-使用c重写了--》能够运行在操作系统上--》文件处理,数据操作,网络
-在这个环境中写js语法了
-nodejs:后端语言,运行在解释器之上
-node python
-npm pip
-vue+nodejs 全站
-vue+python 全站
【二】计算属性-监听属性
2.1计算属性
类似python的把函数包装成数据用的装饰器
# 1 本质是一个函数,但是当属性用
# 2 计算属性和普通函数的区别
-1 如果使用计算属性,只要 计算属性中使用的变量,发生变化时,计算属性才重新运算
-2 如果使用函数,只要页面发生变化,函数就会重新运算
-3 计算属性当属性用,可以被for循环,可以被v-if判断
2.1.1 基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue2/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="username" >-->{{uppername}}
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
username:"",
},
computed:{
uppername(){
console.log(this.username.substring(0,1).toUpperCase()+this.username.substring(1))
return this.username.substring(0,1).toUpperCase()+this.username.substring(1)
}
}
})
</script>
</html>
2.1.2 使用计算属性重写过滤案例-->就不用一个新数组存,也不用输入事件了,计算属性,只要检测到变量改变就会重新计算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue2/vue.js"></script>
<!-- <script src="./vue3/vue.js"></script>-->
</head>
<body>
<div id="app">
<input type="text" v-model="inputtext" @input="handleinput">
<p v-for="item in get_list">{{item}}</p>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
inputtext:'',
data_list:['a','bbbb','abcd','shahi','sahk','oiqru3','dhaihyd9qhfigpb','138907409','am','amm','ammo'],
},
computed:{
get_list(){
return this.data_list.filter(item=>item.indexOf(this.inputtext)>=0)
}
}
})
</script>
</html>
2.2 监听属性
# 1 监听一个属性的变化,只要属性发生了变化,就执行 xx代码watch
以下案例先点的水果,那么旧值是all,新值水果
下一次点旧值就是水果了
2.2.1监听你点击了什么显示的内容就是什么
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue2/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="type_good='水果'">水果</button>
<button @click="type_good='蔬菜'">蔬菜</button>
<button @click="type_good='鲜肉'">鲜肉</button>
<p>{{type_good}}</p>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
type_good:'all'
},
watch:{
// 以变量属性命名的函数
type_good(new_data,old_data){
console.log(new_data,old_data)
console.log("换楼")
}
}
})
</script>
</html>
【三】生命周期
# 1 vue组件:从创建开始--》到被销毁经历了一个过程
-过程中会有一些函数--》到某个过程时,就会触发这个函数的执行
-8 个生命周期钩子函数
"""在创建前肯定是什么都没有,然后再创建和挂载前是没组件el的,挂载后都有"""
# 2 8个 (创建,挂载,更新,销毁)
beforeCreate 创建 Vue实例/组件之 前调用
created 创建Vue实例成功后调用(可以在此处发送异步请求后端数据)
beforeMount 渲染DOM之前调用
mounted 渲染DOM之后调用
beforeUpdate 重新渲染之前调用(数据更新等操作时,控制DOM重新渲染)
updated 重新渲染完成之后调用
beforeDestroy 销毁之前调用
destroyed 销毁之后调用
# 3 重点
-created会经常用:组件创建完成,就向后端发送ajax请求获取数据
-beforeDestroy 可能会用
# 4 案例
console.group是把打印变成组
3.1案例信息交互定时器的开启与销毁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue2/vue.js"></script>
</head>
<body>
<div id="app">
<div style="width:220px;height: 400px;background: paleturquoise;margin: auto">
<p>我:你好</p>
<child v-if="show"></child>
<div style="margin-top: 350px" ><input type="text" v-model="msg"><button >发送</button></div>
</div>
<button @click="handleShow">点我隐藏显示组件</button>
</div>
</body>
<script>
Vue.component('child', {
template: `
<div>---》一定要写个盒子否则会出错,确保模板有一个根元素。这是因为Vue在将组件的模板渲染到DOM时,需要有一个单一的根节点来挂载和更新组件的内容
<p v-for="item in data_list">客服说:{{ item }}</p>
</div>`,
data(){
return {
data_list:["hello啊"],
t:null
}},
created(){
this.t=setInterval(()=>{
console.log('开始追加拉')
this.data_list.push("下次再来")
},2000)
},
beforeDestroy(){
console.log("摧毁拉")
clearInterval(this.t)
this.t=null
}
})
new Vue({
el:'#app',
data:{
msg:'',
show:true
},
methods:{
handleShow(){
this.show=!this.show
}
}
})
</script>
</html>
【四】组件
# 1 组件:有自己的html,css,js
# 2 后面我们写组件,就是写一个 xx.vue
在指定的位置写html,css,js
# 3 局部组件和全局组件
1 全局组件---》可以在其他组件中直接使用"""意思为在vue实例里不用写了,这里不需要在components选项中再次声明, 因为它已经是全局可用的了 """
// 组件有自己的 生命周期,数据,事件,计算属性,监听属性等--》"""另外写一个Vue.component"""
// 组件的data必须是个方法,返回对象
2 局部组件--->只能用在它父亲中,定义在组件的components 配置项上"""写在vue实例里,键是components"""
#4data的写法与vue实例不同原因
组件内的 data 属性名称(如 myname)可以与外部 Vue 实例中的 data 属性名称不同,也可以相同,但这并不意味着它们之间有直接的关联或共享。它们各自维护着自己的状态。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue2/vue.js"></script>
</head>
<body>
<div id="app">
<h1>组件</h1>
<p>全局</p>
<child></child>
<p>局部</p>
<child2>
</child2>
</div>
</body>
<script>
Vue.component('child',{
template: `
<div>
<p>hhhhhhhhhajaiodjoaij</p>
</div>`,
})
var vm=new Vue({
el:'#app',
components:{
'child2':{
template:`<div>
<button>后退</button>
<span style="font-size: 30px">标题</span>
<button>前进</button>
</div>`,
}
}
})
</script>
</html>
【五】组件通信之父传子
# 1 组件和组件之间数据隔离,但是有时候,我们想组件和组件之间通信
# 2 父传子
由于这个子组件是写在父上,我们自定义个属性对应父的属性名---》在子组件中写props:[注册自定义的属性名]--》在模板里就可以直接用插值了--》如果data中有同名变量用data中的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue2/vue.js"></script>
</head>
<body>
<div id="app">
<h1>组件</h1>
<p>全局</p>
<child :myname="name"></child>
</div>
</body>
<script>
Vue.component('child',{
template: `
<div>
<p>{{ myname }}</p>
</div>`,
data(){
return{
}
},
props:['myname','aa'],
})
var vm=new Vue({
el:'#app',
data:{
name:'llh'
}
})
</script>
</html>
【六】组件通信之子传父
1.子组件中有name这个值,
2.我们设置一个按钮会触发某个函数
senddata(){ this.$emit('send_myname',this.myname)
}
3.在子组件上写自定义绑定事件对应父组件中的方法
<child @send_myname="handlesend">
4.父组件中的方法会对应的赋值
handlesend(a){
this.name=a
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue2/vue.js"></script>
</head>
<body>
<div id="app">
<h1 >父组件,子传父的值{{name}}</h1>
<hr>
<p>全局</p>
<child @send_myname="handlesend"></child>
</div>
</body>
<script>
Vue.component('child',{
template: `
<div>
<input v-model="myname">
{{myname}}
<button @click="senddata">点击子传父</button>
</div>`,
data(){
return{
myname:''
}
},
methods:{
senddata(){
//会触发send_myname事件绑定的函数this.$emit('自定义事件',函数所要传的参数)
this.$emit('send_myname',this.myname)
}
}
})
var vm=new Vue({
el:'#app',
data:{
name:''
},
methods: {
handlesend(a){
this.name=a
}
}
})
</script>
</html>
【七】ref属性
1.在标签里写上ref="xx"
2.那么在vue实例中获取就是this.$refs.xx,那个dom对象
3.就能对这个对象进行操作
"""联想到可以进行子传父"""
1.给子组件标签里写上ref="xx",--》在父组件获取子组件对象,调用子组件的方法给父组件的变量赋值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue2/vue.js"></script>
</head>
<body>
<div id="app">
<img src="./img/1.jpg" width="200px" height="200px" ref="myimg">
<input type="text" ref="myinput">{{name}}
<button @click="see">点我看</button>
<child ref="mychild"></child>
</div>
</body>
<script>
Vue.component('child', {
template: `
<div>
<p>{{ myname }}</p>
</div>`,
data() {
return {
myname: 'llh'
}
},
methods: {
senddata(a) {
this.name = a
}
}
})
new Vue({
el: '#app',
data:{
name:''
},
methods: {
see() {
//拿到ref为myimg的那个html语句--》可以直接点他有的属性进行修改
console.log(this.$refs.myimg)//<img src="./img/1.jpg" width="200px" height="200px">
this.$refs.myimg.src = './img/2.jpg'
this.$refs.myinput.value = 'ajehqkh'
// 也可以实现子传父-->获取到该子组件对象后去调用子组件对象的赋值方法,
this.$refs.mychild.senddata('llh')
}
}
})
</script>
</html>