Vue 单文件组件的基础入门指南

本文是我2年前做的一个学习小demo，在这里分享一下

希望对想要学习Vue的小伙伴能有一丢丢的小帮助~_~

1 Vue CLI

Vue CLI (opens new window)是一个基于Vue.js进行快速开发的完整系统。

这里我使用 Vue CLI 生成了一个Vue项目，命令为：vue create 自定义项目名称
生成的Vue项目目录结构如下👇【目录生成命令：tree > /f E:result.txt】

│  .gitignore  这个文件的作用就是告诉Git哪些文件不需要添加到版本管理中
│  babel.config.js 项目范围配置
│  jsconfig.json 目录中存在jsconfig.json文件表示该目录是JavaScript项目的根目录
│  package.json  定义了项目的所有依赖，包括开发时依赖和发布时依赖
│  README.md     说明文件
│  vue.config.js vue的一个配置文件
│  yarn.lock     作用是锁定唯一版本
├─node_modules  这个目录存放的是项目的所有依赖，即 npm install 命令下载下来的文件  
├─public
│      favicon.ico  ico图标文件
│      index.html  项目的首页，入口页，也是整个项目唯一的HTML页面
│      
└─src│  App.vue  是一个Vue组件，也是项目的第一个Vue组件│  main.js  相当于Java中的main方法，是整个项目的入口js│  ├─assets  用来存放资源文件│      logo.png  图片文件│      └─components  用来存放组件（一些可复用，非独立的页面）HelloWorld.vue 项目自带的HelloWorld组件TodoItem.vue   自定义开发的组件示例

2 组件中包含三部分内容

<template>
这里写的是html代码
</template><script>
这里写的是js代码
</script><style>
这里写的是css代码  
如果style标签里加个scoped属性，它表示style里面所写的css样式只会对本文件生效，别的地方用是不好使的
</style>

3 源码示例

TodoItem.vue

这个是开发的一个单文件组件示例代码

<!--这里写的是html代码 -->
<template><li class="item"><!-- checkbox复选框 --><input type="checkbox" v-model="yuan" ><!-- slot是vue中的插槽，插槽用于决定将所携带的内容，插入到指定的某个位置 --><!-- 通过插槽jialin将checkbox选中状态（true或false）checked值传递过去，在App.vue的中使用了插槽v-slot:jialin --><slot name="jialin" v-bind="{yuan}"></slot></li>
</template><!--这里写的是js代码 -->
<script>
export default {props:['item'],data(){return{// isCheck和<input type="checkbox" v-model="isCheck">中的v-model进行双向绑定yuan:false,}}
}
</script><!--这里写的是css代码，加上scoped属性表示：style里面所写的css样式只会对本文件中<template>模板中的html代码生效，别的地方用是不好使的 -->
<style scoped>.item {color: red;}
</style>

App.vue

这个是开发的一个单文件组件示例代码

<!--这里写的是html代码 -->
<template><li class="item"><!-- checkbox复选框 --><input type="checkbox" v-model="yuan" ><!-- slot是vue中的插槽，插槽用于决定将所携带的内容，插入到指定的某个位置 --><!-- 通过插槽jialin将checkbox选中状态（true或false）checked值传递过去，在App.vue的中使用了插槽v-slot:jialin --><slot name="jialin" v-bind="{yuan}"></slot></li>
</template><!--这里写的是js代码 -->
<script>
export default {props:['item'],data(){return{// isCheck和<input type="checkbox" v-model="isCheck">中的v-model进行双向绑定yuan:false,}}
}
</script><!--这里写的是css代码，加上scoped属性表示：style里面所写的css样式只会对本文件中<template>模板中的html代码生效，别的地方用是不好使的 -->
<style scoped>.item {color: red;}
</style>

App.vue

这个是开发的一个单文件组件示例代码

<!--这里写的是html代码 -->
<template><div id="app">{{msg}}<!-- div代码块-start --><div><!-- input输入框，输入的内容会赋值给info --><input type="text" v-model="info"><!-- button添加按钮，鼠标单击事件（v-on:click）中定义了一个handleClick方法 --><button ref="inputPosition" v-on:click="handleClick">添加</button></div><!-- div代码块-end --><!-- ul代码块-start --><ul><!-- 通过v-for循环获取list数组中的内容，每次获取内容以item变量输出 --><todo-item v-for="flm in list" :key="flm"><!-- 通过v-slot:jialin插槽传递checkbox是否选中的对象,选中时itemProps.checked=true，未选中时itemProps.checked=false --><template v-slot:jialin="itemProps"><!-- {{flm}}获取循环的内容 --><span :style="{fontSize:'20px',color:itemProps.yuan?'red':'blue'}">{{flm}}</span></template></todo-item></ul><!-- ul代码块-end --></div>
</template><!--这里写的是js代码 -->
<script>
// 引用TodoItem组件
import TodoItem from './components/TodoItem.vue'export default {name: 'app',//在这里初始化数据data(){return{msg:'单文件组件',info:'',list:[],}},//在这里编写方法methods:{//button按钮的单击事件方法handleClick(){if(this.info==''){alert("请先写点啥呗")return;}//向list数组中添加input框中输入的info内容this.list.push(this.info)//清空input框中输入的info内容this.info = ''}},//在这里注册组件components: {TodoItem,}
}
</script><!--这里写的是css代码 -->
<style></style>