vue篇:组件间通信、ref属性、slot插槽、数据总线
- 计算属性和监听属性
- 组件化开发之局部和全局组件
- 组件间通信之父传子
- 组件间通信之子传父
- ref属性
- 数据总线
- 动态组件
- slot插槽
1 计算属性和监听属性
1.1 计算属性
1 computed 对象写函数,函数就可以当属性使用
{{getName}}
computed:{
getName(){
return this.myText3.substr(0,1).toUpperCase()+this.myText3.substr(1)
}
2 计算属性只有在它的相关依赖发生改变时才会重新求值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="myText"> --->{{myText.substr(0,1).toUpperCase()+myText.substr(1)}}
<hr>
<input type="text" v-model="myText2"> --->{{getText()}}
<hr>
<input type="text" v-model="myText3"> --->{{getName}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
myText: '',
myText2:'',
myText3:'',
},
methods:{
getText(){
console.log('函数执行了')
return this.myText2.substr(0,1).toUpperCase()+this.myText2.substr(1)
}
},
computed:{ // 计算属性
getName(){
console.log('计算属性执行了')
return this.myText3.substr(0,1).toUpperCase()+this.myText3.substr(1)
}
},
})
</script>
</html>
重写过滤案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1>过滤案例</h1>
<input type="text" v-model="myText">
<hr>
<p v-for="item in newList">{{item}}</p>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
myText: '',
dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
},
methods: {
},
computed:{
newList(){
return this.dataList.filter(item=> {
return item.indexOf(this.myText) >= 0
})
}
}
})
</script>
</html>
1.2 监听属性
1 watch对象中写函数---》函数名就是data中得变量名,只要这个“变量发生变化”,就会“触发该函数的执行”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="myText"> --->{{myText}}
<hr>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
myText: '',
},
watch:{
myText(val){
console.log('执行了',val)
}
}
})
</script>
</html>
2 组件化开发之局部和全局组件
# 组件是什么?有什么用
扩展 HTML 元素,封装可重用的代码,目的是复用
-例如:有一个轮播,可以在很多页面中使用,一个轮播有js,css,html
-组件把js,css,html放到一起,有逻辑,有样式,有html
# 定义全局组件
Vue.component('Child', {
template: `
<div>
<h1>我是一个组件--{{ myText }}</h1>
<button @click="handleClick">点我看美女</button>
<br>
<input type="text" v-model="myText">
<Jason></Jason>
</div>`,
data() {
return {
myText: '',
}
},
methods: {
handleClick() {
alert('美女')
}
},
components: {
Jason: {
template: `
<div>
<h1>我是局部组件--jason</h1>
</div>`,
}
}
})
# 局部组件,写在Vue实力或者组件实例中
components: {
Lqz: {
template: `
<div>
<h1>我是局部组件</h1>
</div>`,
}
}
注意
# 1 自定义组件需要有一个root element(根标签),一般包裹在一个div中
# 2 父子组件的data,methods是无法共享
# 3 组件可以有data,methods,computed....,但是data 必须是一个函数
3 组件间通信之父传子(自定义属性)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
自定义属性: myname
<Child :myname="name"></Child>
</div>
</body>
<script>
//全局组件
Vue.component('Child', {
template: `
<div>
<h1>我是一个组件--{{ myText }}--{{myname}}</h1>
<button @click="handleClick">点我看美女</button>
<br>
<input type="text" v-model="myText">
</div>`,
data() {
return {
myText: '',
}
},
methods: {
handleClick() {
alert('美女')
}
},
props:['myname',]
})
// 局部组件只能在局部使用
var vm = new Vue({
el: '#app',
data: {
name:'lqz'
},
})
</script>
</html>
3.1 属性验证
<!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="name">
<br>
年龄:<input type="text" v-model.number="age">
<h1>子组件中显示</h1>
<hr>
<Child :myname="name" :myage="age"></Child>
</div>
</body>
<script>
//全局组件
Vue.component('Child', {
template: `
<div>
名字是:{{ myname }}
<br>
年龄是:{{ myage }}
</div>`,
// props:['myname',]
props: {
'myname': String,
myage: Number
}
})
// 局部组件只能在局部使用
var vm = new Vue({
el: '#app',
data: {
name: 'lqz',
age:19
},
})
</script>
</html>
4 组件间通信之子传父(自定义事件)
<!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>子组件中myText的数据是:{{name}}</h1>
<hr>
<Child @myevent="handleEvent"></Child>
</div>
</body>
<script>
//全局组件
Vue.component('Child', {
template: `
<div>
<input type="text" v-model="myText">
<button @click="handleClick">点我把数据传给父亲</button>
<br>
</div>`,
data() {
return {
myText: '',
}
},
methods: {
handleClick() {
// 触发自定义事件myevent,后面有几个参数,就传几个参数,这样就会执行myevent绑定的函数,handleEvent
this.$emit('myevent', this.myText)
}
},
})
// 局部组件只能在局部使用
var vm = new Vue({
el: '#app',
data: {
name:''
},
methods: {
handleEvent(myText) {
// console.log('我执行了')
// console.log(myText)
this.name=myText
}
}
})
</script>
</html>
5 ref属性
# ref 属性是什么
ref放在普通标签上,拿到的是原生节点,原生dom操作
ref放在组件上,拿到的是组件对象,
通过这种方式实现子传父(this.$refs.mychild.text)
通过这种方式实现父传子(调用子组件方法传参数)
<p ref='pp'></p>
<Child ref='cc'></Child>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- <input type="text" ref="pp">-->
<p ref="pp">我是个p</p>
<button @click="handleClick">点我执行函数</button>
<hr>
<Child ref="cc"></Child>
</div>
</body>
<script>
Vue.component('Child',{
template:`<div>
<h1>我是组件</h1>
名字:{{name}}
<br>
年龄:{{age}}
</div>`,
data(){
return {
name:'彭于晏',
age:37
}
},
methods:{
handleClick(aaa){
console.log(this.name,this.age)
}
}
})
var vm = new Vue({
el: '#app',
data: {
},
methods:{
handleClick(){
console.log(this.$refs)
// this.$refs['pp'].value='lqz is handsome'
// this.$refs['pp'].innerText='xxxx'
// alert(this.$refs['cc'].name)
// alert(this.$refs['cc'].age)
//调用子组件的方法
this.$refs['cc'].handleClick('asdfasdfasdfasdf')
}
}
})
</script>
</html>
6 数据总线
# 不同层级的不通组件通信
-数据总线
-vuex--->状态管理器---》
-cookie,localStorage,sessionStorage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<child1></child1>
<hr>
<child2></child2>
</div>
</body>
<script>
// 1 定义一个数据总线----》本质就是一个vue对象
var bus = new Vue() //new一个vue的实例,就是中央事件总线
// 2 定义两个全局组件
Vue.component('child1', {
template: `
<div>
<input type="text" v-model="myText">
<button @click="handleClick">点我</button>
</div>`,
data() {
return {
myText: ''
}
},
methods: {
handleClick() {
bus.$emit('suibian',this.myText)
}
}
})
Vue.component('child2', {
template: `
<div>
接受到的数据是:{{ myText }}
</div>`,
data() {
return {
myText: ''
}
},
mounted(){
// 等着,监听,如果谁触发我,我就执行
bus.$on('suibian',(name)=>{
this.myText=name
})
}
})
var vm = new Vue({
el: '#app',
data: {},
})
</script>
</html>
7 动态组件
# 通过component配合is属性,决定显示的组件是哪个
# keep-alive 保证组件切换走后不被销毁
<keep-alive>
<component :is="who">
</component>
</keep-alive>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li @click="who='home'">首页</li>
<li @click="who='goods'">商品</li>
<li @click="who='order'">订单</li>
</ul>
<keep-alive>
<component :is="who">
</component>
</keep-alive>
</div>
</body>
<script>
Vue.component('home', {
template: `
<div>
首页
</div>`,
})
Vue.component('goods', {
template: `
<div>
商品
<input type="text">
</div>`,
})
Vue.component('order', {
template: `
<div>
订单
</div>`,
})
var vm = new Vue({
el: '#app',
data: {
who: 'home'
},
})
</script>
</html>
8 slot插槽
# 在组件标签中间加插槽的内容
<home>
<div><button>美女</button></div>
</home>
# slot决定插槽的位置
Vue.component('home', {
template: `
<div>
<input type="text">
<hr>
<slot></slot> # 插槽位置
<button>点我</button>
</div>`,
})
# 具名插槽
<home>
<div slot="a">我是div</div> # 参数slot=a决定插槽位置
<img src="https://tva1.sinaimg.cn/large/00831rSTly1gd1u0jw182j30u00u043b.jpg" alt="" slot="b"> # # 参数slot=b决定插槽位置
</home>
Vue.component('home', {
template: `
<div>
<input type="text">
<hr>
<slot name="a"></slot> # 按名字a作为插入位置
navbar
<slot name="b"></slot> # 按名字b作为插入位置
<button>点我</button>
</div>`,
})
无名插槽:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<home>
<div><button>美女</button></div>
</home>
</div>
</body>
<script>
Vue.component('home', {
template: `
<div>
<input type="text">
<hr>
<slot></slot>
<button>点我</button>
</div>`,
})
var vm = new Vue({
el: '#app',
data: {
},
})
</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">
<home>
<div slot="a">我是div</div>
<img src="https://tva1.sinaimg.cn/large/00831rSTly1gd1u0jw182j30u00u043b.jpg" alt="" slot="b">
</home>
</div>
</body>
<script>
Vue.component('home', {
template: `
<div>
<input type="text">
<hr>
<slot name="a"></slot>
navbar
<slot name="b"></slot>
<button>点我</button>
</div>`,
})
var vm = new Vue({
el: '#app',
data: {
},
})
</script>
</html>
vue cli 创建出一个vue项目
-先装nodejs,http://nodejs.cn/ 一路下一步
-node:就是python npm命令:就是pip
-npm install -g @vue/cli #装了vue脚手架 相当于 pip install django
-vue create hello-world #相当于 djagno-admin startproject 项目名
-选很多东西
-pycharm打开即可
-pycharm打开即可