vue-cli
全局安装：-g，全局安装 vue-cli
npm install -g @vuecli
创建项目
vue create my-app
生成的文件结构：
- node-modules: 存放依赖
- src：源代码文件夹
- src- components：存放组件的位置
将上一篇中我们html的文件内容移植到使用vue-cli创建的my-app项目中
完整代码，替换App.vue中的代码
<template>
<div id = "app">{{msg}}
<div>
<input type="text" v-model="info">
<button @click="handleClick">添加</button>
</div>
<ul>
<!-- <li v-for="item in list">{{item}}</li> -->
<todo-item v-for="item in list" :key="item" :value="item"></todo-item>
</ul>
</div>
</template>
<script>
import TodoItem from './components/TodoItem.vue';
export default {
name: 'App',
components: {
TodoItem
},
data() {
return {
msg: "hello geek!",
info: '',
list: []
}
},
methods: {
handleClick() {
if (this.info != '') {
this.list.push(this.info)
this.info = ''
}
}
}
}
</script>
<style>
</style>
组件定义
使用单文件定义组件TodoItem
在src- components下新建文件：TodoItem.vue，内容如下：
<template>
<li class="item">{{value}}</li>
</template>
<script>
export default {
props: ['value']
}
</script>
<style>
.item {
color: red
}
</style>
和我们在html中的写法区别不大
组件引用
import TodoItem from './components/TodoItem.vue';
组件使用：<todo-item v-for="item in list" :key="item" :value="item"></todo-item>
这里必须绑定一个key，这个key就是这个li标签的key，应该不能重复的，这里为了简单，使用遍历的数据item
插槽 slot
假设要给组件中定义样式，我们要让显示的字体大小是30px
- 修改组件代码
<li class="item">
<slot name="value"></slot>
</li>
- 修改使用部分
<todo-item v-for="item in list" :key="item">
<template v-slot:value>
<span style="font-size: 30px">{{ item }}</span>
</template>
</todo-item>
v-slot:value绑定插槽属性
插值表达式：{{}} 用来显示item的值
作用域插槽
通过子组件传递出来一种状态，给父组件使用，通过传递出来的状态，进一步使用，非常灵活
需求：添加可选框，未选时是蓝色，选中时，是红色
组件修改部分：
<li class="item">
<input type="checkbox" v-model="checked">
<slot name="value" v-bind="{checked}"></slot>
</li>
export default {
props: ['value'],
data() {
return {
checked: false
}
}
}
在input上进行属性绑定，在js部分，定义属性初始值为false；
子组件在插槽部分，绑定对象 {} , 将checked 属性封装进去，传递给父组件
父组件修改部分：
<todo-item v-for="item in list" :key="item">
<template v-slot:value="itemProps">
<span :style="{fontSize: '30px', color: itemProps.checked ? 'red' : 'blue'}">{{ item }}</span>
</template>
</todo-item>
父组件的样式部分也修改为对象：:style=""
插槽部分接收子组件传递的对象，命名为：itemProps
在样式部分使用三目表达式，如果itemProps中的checked为true显示红色，为false，显示蓝色，即可达到为选中显示蓝色，选中显示红色
作用域样式 scoped
在子组件的样式部分，我们的样式是全局的，使用 scoped 可以将样式定义为局部的，如果在别的地方也定义了名字为 item的样式，则不会被覆盖
这是全局状态的样式：
这是局部样式
样式修改代码如下：
<style scoped>
.item {
color: red
}
</style>
