说明
《Vue开发实战-从0开始搭建大型Vue项目》是 Ant Design Vue 的作者在极客时间开的一门视频课，笔者记录一下学习笔记，仅供参考。
Vue.component 缺点
- 全局定义：强制要求每个
component 中的命名不得重复 - 字符串模板：缺乏语法高亮，在
html 有多行的时候，需要用到丑陋的\ - 不支持css：意味着当
html 和JavaScript组件化时，css 明显被遗漏 - 没有构建步骤：限制只能使用
html 和ES5 JavaScript，而不能使用预处理器，如Pug（formerly Jade）和Bable
单文件组件 优点
- 完整语法高亮
- CommonJS 模块
- 组件作用域的CSS
Vue CLI
可以通过 Vue CLI 搭建项目
npm install -g @vue/cli
vue create my-app
cd my-app
npm install
npm
通过上面的操作，我们可以开始进行单文件.vue的开发。
单文件vue
大致的模板就是下面这个样子
<!-- 视图 -->
<template>
<div id="app"></div>
</template>
<!-- 逻辑 -->
<script>export default {
name: 'app',
data() {
return {
}
}
}</script>
<!-- 样式 -->
<style>#app{
color: green;
}</style>
todolist改造成vue文件
-
App.vue：父组件 -
TodoItem.vue：子组件，在App.vue 同级components 文件夹里
App.vue
<template>
<div id="app">
{{msg}}
<div>
<input type="text" v-model="info">
<button v-on:click="handleClick">添加</button>
</div>
<ul>
<todo-item v-for="item in list" :key="item">
<template v-slot:item="itemProps">
<span :style="{fontSize: '20px', color: itemProps.checked ? 'red': 'blue'}">{{item}}</span>
</template>
</todo-item>
</ul>
</div>
</template>
<script>import TodoItem from './components/TodoItem.vue'
export default {
name: 'app',
data() {
return {
msg: 'hello Vue!',
info: '',
list: [],
}
},
methods: {
handleClick() {
this.list.push(this.info)
this.info = ''
}
},
components: {
TodoItem,
}
}</script>
<style>
</style>
TodoItem.vue
<template>
<li class="item">
<input type="checkbox" v-model="checked">
<slot name="item" v-bind="{checked}"></slot>
</li>
</template>
<script>export default {
props: ['item'],
data() {
return {
checked: false
}
}
}</script>
<style scoped>.item {
color: red;
}</style>
