Vue 04——计算属性与监听属性、局部和全局组件、父子组件通信、ref属性、数据总线、动态组件
作者：互联网
目录
计算属性和监听属性
计算属性
1 computed 对象写函数，函数就可以当属性使用
2 计算属性只有在它的相关依赖发生改变时才会重新求值
监听属性
1 watch对象中写函数---》函数名就是data中得变量名，只要这个变量发生变化，就会触发该函数的执行
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<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"> ----->{{getText2}}
<hr>
<hr>
<hr>
<hr>
<h1>重写过滤</h1>
<input type="text" v-model="myText4">
<hr>
<p v-for="item in newList">{{item}}</p>
<hr>
<hr>
<hr>
<h1>监听属性</h1>
<input type="text" v-model="myText5">----->{{myText5}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
myText: '',
myText2: '',
myText3: '',
myText4: '',
dataList: ['a', 'ab', 'abc', 'aa', 'aaa', 'abaaa'],
myText5: ''
},
methods: {
getText() {
return this.myText2.substr(0, 1).toUpperCase() + this.myText2.substr(1)
}
},
computed: { // 计算属性
getText2() {
return this.myText3.substr(0, 1).toUpperCase() + this.myText3.substr(1)
},
newList() {
return this.dataList.filter(item => {
return item.indexOf(this.myText4) >= 0
})
}
},
watch: { // 监听属性 watch对象中写函数---》函数名就是data中得变量名，只要这个变量发生变化，就会触发该函数的执行
myText5(val){
console.log('执行了', val)
}
}
})
</script>
</html>
组件化开发之局部和全局组件
# 组件是什么？有什么用
扩展 HTML 元素，封装可重用的代码，目的是复用
-例如：有一个轮播，可以在很多页面中使用，一个轮播有js，css，html
-组件把js，css，html放到一起，有逻辑，有样式，有html
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<Child></Child>
</div>
</body>
<script>
// 定义全局组件
Vue.component('Child', {
template: `
<div>
<h1>我是一个组件--{{ myText }}</h1>
<button @click="handleClick">点我看美女</button>
<br>
<input type="text" v-model="myText">
<bigSon></bigSon>
</div>`,
data() {
return {
myText: '',
}
},
methods: {
handleClick() {
alert('打咩哟打咩打咩')
}
},
// 局部组件，写在Vue实力或者组件实例中
// Child的子组件
components: {
bigSon: {
template: `
<div>
<h1>我是全局Child的好大儿bigSon</h1>
</div>
`
}
}
})
var vm = new Vue({
el: '#app',
data: {
myText: '',
},
methods: {}
})
</script>
</html>
组件间通信之父传子（自定义属性）
只能相对的父子之间传 不能子孙传
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<Child :myname="name"></Child>
<hr>
<hr>
<hr>
<hr>
<jubu :myname="name"></jubu>
</div>
</body>
<script>
// 定义全局组件
Vue.component('Child', {
template: `
<div>
<h1>我是全局组件Child---- {{myname}}---来自实例 实例就是我爹 </h1>
<bigSon :myname="name" :myage="age"></bigSon>
</div>`,
data(){
return{
age: 18
}
},
components: {
bigSon: {
template: `
<div>
<h1>我是全局Child的好大儿bigSon {{myname}}----来自实例 实例是我爷 </h1> <!--不可行-->
<h1>我是全局Child的好大儿bigSon {{myage}}----来自Child Child就是我爹 </h1>
</div>
<hr>
`,
props: ['myname','myage']
}
},
props:['myname',]
})
var vm = new Vue({
el: '#app',
data: {
myText: '',
name: 'little chicky chicky'
},
components: {
jubu: {
template: `
<div>
<h1>我是局部组件jubu------{{myname}}----来自实例 实例也是我爹</h1>
<jubuSon :myname="name" :mysex="sex"> </jubuSon>
</div>
<hr>
`,
data(){
return {
sex: '男'
}
},
props:['myname',],
components: {
jubuSon: {
template: `
<div>
<h1>我是局部组件jubu的儿子------{{myname}}----来自实例 实例是我爷</h1> <!--不可行-->
<h1>我是局部组件jubu的儿子------{{mysex}}----来自jubu jubu是我爹</h1>
</div>
<hr>
`,
props:['myname', 'mysex'],
}
}
}
}
})
</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="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>
组件间通信之子传父（自定义事件）
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<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) {
alert('爸爸收到啦 乖儿子')
this.name = myText
}
}
})
</script>
</html>
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">
<p ref="impp">我是pp</p>
<br>
<button @click="handleClick">click me</button>
<br>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
handleClick() {
console.log(this.$refs)
this.$refs['impp'].innerText='你喜欢pp吗'
}
}
})
</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">
<Child ref="xdxe"></Child>
<br>
<button @click="handleClick">click me</button>
<br>
<p>sex是：{{sex}}</p>
</div>
</body>
<script>
// 定义全局组件
Vue.component('Child', {
template: `
<div>
<h1>我是组件</h1>
名字：{{name}}
<br>
年龄：{{age}}
</div>`,
data() {
return {
name: '熊大熊二',
age: 10，
sex: 'male'
}
},
methods: {
handleClick(){
console.log(this.name, this.age)
}
}
})
var vm = new Vue({
el: '#app',
data: {
sex: ''
},
methods: {
handleClick() {
console.log(this.$refs)
alert(this.$refs['xdxe'].name)
alert(this.$refs['xdxe'].age)
this.$refs['xdxe'].handleClick() // 调用子组件的方法
this.sex = this.$refs['xdxe'].sex // 获取子组件属性
}
}
})
</script>
</html>
数据总线
# 不同层级的不同组件通信
-数据总线
-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>
// 定义一个数据总线 本质就是一个vue对象
var bus = new Vue() // new一个vue的实例 九四中央事件总线
// 组件1
Vue.component('child1', {
template: `
<div>
<input type="text" v-model="myText"> <!--1. 输入text-->
<button @click="handleClick">点我</button> <!--2. 点击触发函数-->
</div>`,
data() {
return {
myText: ''
}
},
methods: {
handleClick(){
bus.$emit('prpr', this.myText) // 3.触发prpr 同时传参this.myText
}
}
})
// 组件2
Vue.component('child2', {
template: `
<div>
接受到的数据是：{{ myText }}
</div>`,
data() {
return {
myText: ''
}
},
mounted() {
// 监听 被触发后执行
bus.$on('prpr', (name)=>{ // 4.监听 触发了prpr 执行函数
this.myText=name
})
}
})
var vm = new Vue({
el: '#app',
data: {},
})
</script>
</html>
动态组件
# 通过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">
<!--# 通过component配合is属性，决定显示的组件是哪个-->
<!--# keep-alive 保证组件切换走后不被销毁-->
<button @click="who='home'">首页</button>
<button @click="who='goods'">商品</button>
<button @click="who='order'">订单</button>
<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>
slot插槽
点击查看代码
<!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> <!--在home里插-->
<div><button>美女</button></div>
<div slot="aa">我指定插到aa这</div>
</home>
</div>
</body>
<script>
Vue.component('home', {
template: `
<div>
<input type="text">
<hr>
<p>没指定的默认插这：</p>
<slot></slot>
<hr>
<p>指定aa的插这：</p>
<slot name="aa"></slot>
<hr>
<button>点我</button>
</div>`,
})
var vm = new Vue({
el: '#app',
data: {
},
})
</script>
</html>
标签：Vue,myText,template,组件,data,属性 来源： https://www.cnblogs.com/run-fast-hit-fast-win-fast/p/16424733.html