day42 vue基础04 插槽表达式和组件化
1 VUE 全貌的模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
props: [],
created() {},
components:{
},
beforeMount() {},
mounted() {},
beforeUpdate() {},
updated() {},
beforeDestroy() {},
destroyed() {},
data: {
name: "Vue.js",
},
methods: {
bbb() {},
aaa() {},
},
computed: {},
watch: {},
filters: {},
});
</script>
</body>
</html>
2 全局组件以及局部组件
1 组件化开发优点1 非常适合多人开发 每个同事开发不同的模块
2 代码的复用性 2 有些相同模块甚至不同项目都可用用 举例相同项目的不同页面都可以用header模块 但是header模块只开发一次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<aaa></aaa>
<bbb></bbb>
</div>
</div>
<script>
Vue.component('aaa',{
data:function(){
return {
name:'hello wolrd'
}
},
template:'<div>{{name}}</div>'
})
var bbb = {
template:'<div>我是局部组件</div>'
}
var app = new Vue({
el: "#app",
props: [],
created() {},
components:{
bbb
},
beforeMount() {},
mounted() {},
beforeUpdate() {},
updated() {},
beforeDestroy() {},
destroyed() {},
data: {
name: "Vue.js",
},
methods: {
bbb() {},
aaa() {},
},
computed: {},
watch: {},
filters: {},
});
</script>
</body>
</html>
2 模板中为什么要return data数据
为了解释这个谜题 我们看下面这段代码
第一种是 vue里面 尤雨溪设计的用法
function a() { return { name:'cluo', age:18 } } let vuecomponent1 = a () let vuecomponent2 = a () let vuecomponent3 = a () vuecomponent1.name = '梅西' console.log(vuecomponent1) console.log(vuecomponent2) console.log(vuecomponent3)
第二种是我们想试验的是否可行的用法
const obj = { name:'cluo', age:18 } function a(){ return obj } let vuecomponent1 = a() let vuecomponent2 = a() let vuecomponent3 = a() vuecomponent1.name ='梅西' console.log(vuecomponent1) console.log(vuecomponent2) console.log(vuecomponent3)
防止变量污染,形成独立的对象
3 父子组件传值之父传子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<child :dfdfdf="day"></child>
</div>
</div>
<script>
//局部组件
var child = {
props:['dfdfdf'],
template:'<p>{{dfdfdf}}</p>'
}
var app = new Vue({
el: "#app",
props: [],
created() {},
components:{
child
},
beforeMount() {},
mounted() {},
beforeUpdate() {},
updated() {},
beforeDestroy() {},
destroyed() {},
data: {
name: "Vue.js",
day:'星期12345我都给你零花钱'
},
methods: {
bbb() {},
aaa() {},
},
computed: {},
watch: {},
filters: {},
});
</script>
</body>
</html>
4 父子组件传值之子传父
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<child @anlarge-text='bigger'>
</child>
<p :style="{fontSize:fontSize+'px'}">
aaa
</p>
</div>
<script>
// 子组件
var child = {
template:`<button @click="$emit('anlarge-text',9)">我是一个子组件</button>`
}
// 父组件
var app = new Vue({
el: "#app",
props: [],
created() {},
components:{
child
},
beforeMount() {},
mounted() {},
beforeUpdate() {},
updated() {},
beforeDestroy() {},
destroyed() {},
data: {
msg:'hello vue',
fontSize:24
},
methods: {
bbb() {},
aaa() {},
bigger(n){
console.log('进入bigger里面了')
this.fontSize +=n
}
},
computed: {},
watch: {},
filters: {},
});
</script>
</body>
</html>
5 vue中dom操作的超好用的语法糖ref
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<p ref='p'>
我是p标签
</p>
<h1 ref='fdfdfdfe'>
fdfsdfsdfsdf
</h1>
<aaa ref='aaa'></aaa>
</div>
</div>
<script>
Vue.component('aaa', {
data: function () {
return {
name: 'hello wolrd'
}
},
template: '<h1>{{name}}</h1>'
})
var app = new Vue({
el: "#app",
props: [],
created() { },
components: {
},
beforeMount() { },
//页面渲染完成之后
mounted() {
console.log(this.$refs.p)
console.log(this.$refs.fdfdfdfe)
this.$refs.aaa.name ='你好世界'
console.log(this.$refs.aaa.name )
},
beforeUpdate() { },
updated() { },
beforeDestroy() { },
destroyed() { },
data: {
name: "Vue.js",
},
methods: {
bbb() { },
aaa() { },
},
computed: {},
watch: {},
filters: {},
});
</script>
</body>
</html>
新增两个 新生命周期
activated(){
},
deactivated(){},
7 插槽1 匿名插槽
<header1>共享单车后台管理</header1> <header1>小米手机后台管理</header1> <h1>我是主页面的东西 pro商品页面</h1>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<div>
<aaaa> fgdgfdfg dfg fgd d</aaaa>
</div>
</div>
<script>
Vue.component('aaaa',{
template:`
<div>
<h1>我是上面</h1>
<slot></slot>
</div>
`
})
var app = new Vue({
el: "#app",
props: [],
created() {},
components:{
},
beforeMount() {},
mounted() {},
beforeUpdate() {},
updated() {},
beforeDestroy() {},
destroyed() {},
data: {
name: "Vue.js",
},
methods: {
bbb() {},
aaa() {},
},
computed: {},
watch: {},
filters: {},
});
</script>
</body>
</html>
8 具体名字的插槽
实际用法 可用锁死页面的格式 然后传入不同的数据 可用得到完全不同的页面 极大的复用了代码 并且
还可以锁死格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<aaa>
<h1 slot='header'>slot=header我要往这个里面跳</h1>
<p>
没人要的我要跳
</p>
<h1 slot='footer'>slot=footer我要往这个里面跳</h1>
</aaa>
</div>
</div>
<script>
Vue.component('aaa',{
template:`
<div>
<header>
<slot name='header'></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name='footer'></slot>
</footer>
</div>
`
})
var app = new Vue({
el: "#app",
props: [],
created() {},
components:{
},
beforeMount() {},
mounted() {},
beforeUpdate() {},
updated() {},
beforeDestroy() {},
destroyed() {},
data: {
name: "Vue.js",
},
methods: {
bbb() {},
aaa() {},
},
computed: {},
watch: {},
filters: {},
});
</script>
</body>
</html>
9 作用域插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<aaa>
<div slot-scope='props'>
<h1>dfdfdfdfdfdfdfdfdfdf {{props.text}}</h1>
</div>
</aaa>
</div>
</div>
<script>
Vue.component('aaa',{
template:`
<div>
<slot text='我有个文本 想传给你'></slot>
</div>
`
})
var app = new Vue({
el: "#app",
props: [],
created() {},
components:{
},
beforeMount() {},
mounted() {},
beforeUpdate() {},
updated() {},
beforeDestroy() {},
destroyed() {},
data: {
name: "Vue.js",
},
methods: {
bbb() {},
aaa() {},
},
computed: {},
watch: {},
filters: {},
});
</script>
</body>
</html>
