安装 vue脚手架 vue-cli npm install -g vue-cli 注意这里是2.x版本 3.x后面再讲
这里的话 是否安装router 打y 前面默认回车就行
敲入代码就可以了
那么在config目录下的index.js可以修改相关端口与是否自动启动浏览器，这个就随意了，目录文件不解释
如何引入组件
首先在components中新建一个vue文件，顺便清空一下主组件App.vue的内容，因为之前安装router的话App.vue中是使用router的方式引入别的组件的，待会使用es6的方式引入组件
在Test.vue中随意敲点内容
在App.vue中使用import 引入组件，引入之后需要注意的就是一定要在引入的vue文件中注册，也就是下方的components对象中，那么原始写法是{name：template}，使用ES6写法省略了冒号，然后就可以在上方使用了，并可以重复使用，那么CLI是有热更新的，只需要保存代码浏览器即可自动更新
这样看起来是不是就像上篇写的例子了，搬过来再写一遍
<template>
<div id="app">
<div>
<input type="text" v-model="info">
<button @click="handleClick">添加</button>
</div>
<ul>
<Test v-for="(item,index) in list" :key="index" :item="item"></Test>
</ul>
</div>
</template>
<script>
import Test from './components/Test'
export default {
name: 'App',
data(){
return {
list:[],
info:''
}
},
methods:{
handleClick(){
this.list.push(this.info)
this.info=''
}
},
components:{
Test
}
}
</script>
<style>
</style>
Test.vue中也修改一下
那么效果也OK了~可以看到在这个例子里，Test.vue嵌套在了App.vue中，那么此时App.vue就是Test.vue的父组件，Test.vue就是子组件了，这个概念可以吸收一下！可以看到子组件中是没有数据的，数据在父组件中，把其他组件的数据传递给自己这个过程叫组件间的通信。那么刚才这个过程可以理解为父子组件之前的通信，emmm 先点到为止
那么在传递数据的时候，首先传递的值需要v-bind(：)来绑定，同时在接收数据的组件中通过props来接收并用{{}}来解析，比较好理解，如果再加一个值呢？
子组件只需
<template>
<div>
<li>{{item}}---{{test}}</li>
</div>
</template>
<script>
export default {
props:['item','test']
}
</script>
<style>
</style>
这里需要注意的是，在template中只能有一个根元素，也就是只有一个父元素，建议直接包个div就行
那么除了props传值还可以使用插槽solt传递
可以看到我取消了：item="item" 绑定，意味着子组件是没有属性可以接受的，那么在子组件中就需要使用slot来接收内容
<template>
<div>
<li>
<slot></slot>
</li>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
使用slot标签，效果相同，甚至可以传递标签，比如说
那么如何显示不同的slot呢？使用v-slot
<template>
<div>
<li>
<slot name="item"></slot>
</li>
</div>
</template>
子组件中使用name来显示不同的内容
打开页面发现报了一个错，这个问题呢是 新语法（貌似是2.6的语法，没去关注）的问题，就是v-slot只能在template标签中
子组件不变，包个template传递即可，这个name传递称之为具名插槽
那么这里展示一下插槽的子组件返回父组件信息的操作，随便过一下（由于本人经验太少，可能这种通信方式用的少，并不常见吧）
<template>
<div>
<li>
<input type="checkbox" v-model="checked"/>
<slot name="item" v-bind="{checked}"></slot>
</li>
</div>
</template>
<script>
export default {
data(){
return{
checked:false,
}
}
}
</script>
<style>
</style>
首先在子组件中，双向绑定一个布尔值，绑定在checked判断，默认false，每个input改变的都是自己返回的数据，这就是为什么data是一个函数的原因！在slot标签绑定一个对象，此处是缩写，也就是check：check，这个要习惯，不然会懵逼
<Test v-for="(item,index) in list" v-bind:key="index">
<template v-slot:item="itemProps" >
<span :style="{fontSize:'20px',color:itemProps.checked?'red':'blue'}">{{item}}</span>
</template>
</Test>
这里几个点注意，首先是v-slot:item 等号后面就是子组件返回的对象，准确的说是json
这里把style写成绑定状态，由于jsx模板的原因css需要使用驼峰写法，后面跟一个三元，看不懂后面会细讲，了解一下就行
那么此时效果就是这样
