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>

4 最终运行效果

5 下载源码

下载源码https://github.com/fenglm2021/fenglm-vue-cli.git