IDEA激活码
目录
1.编译作用域
属性只有在它自己的作用域中才会起作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 这里调用的isShow是Vue实例里面的-->
<cpn v-show="isShow"></cpn>
</div>
<template id="cpn">
<div>
<h2>生如逆旅</h2>
<h2>一苇以航</h2>
<!-- 这里调用的isShow是cpn组件里面的-->
<button v-show="isShow">按钮</button>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
isShow: true
},
components: {
cpn: {
template: `#cpn`,
data(){
return {
isShow: false
}
}
}
}
})
</script>
</body>
</html>
2.作用域插槽的使用
子组件中有一组数据，pLanguage: [‘JavaScript’,‘Java’,‘C#’,‘python’,‘Go’]
需要在多个界面展示：以水平方式展示或者以列表形式展示
内容在子组件，希望父组件告诉我们如何展示？用slot作用域插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div id="app">
<cpn></cpn>
<cpn>
<!-- 目的是获取子组件中的pLanguage-->
<template slot-scope="slot">
<span>{{slot.data.join(' - ')}}</span>
</template>
</cpn>
<cpn>
<template slot-scope="slot">
<span>{{slot.data.join(' * ')}}</span>
</template>
</cpn>
</div>
<template id="cpn">
<div>
<slot :data="pLanguage">
<ul>
<li v-for="item in pLanguage">{{item}}</li>
</ul>
</slot>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
components: {
cpn: {
template: `#cpn`,
data(){
return {
pLanguage: ['JavaScript','Java','C#','python','Go']
}
}
}
}
})
</script>
</body>
</html>
