vue官网：https://cn.vuejs.org/
接着上一篇，使用vue-cli创建项目后，然后用vscode打开项目，vscode感觉跟其他的IDE不同，它对项目的管理较松散，更多是靠各类插件去完成工作。下图是vscode打开vue-cli创建的项目的项目结构截图：
其实从这个结构上可以看出，主页面就是index.html位于项目根目录下，src目录下就是程序员需要关注的目录，在这下面有一个main.js ，根据使用其他语言的经验，显然这个文件就是程序的入口。
import Vue from 'vue' import App from './App' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', components: { App }, template: '<App/>' })
果然，里面创建了一个Vue的实例，也就是整个程序的一个主组件, 从代码上可知这个组件名字是App组件，当前目录下的App.vue就是该组件的代码, 这个代码包含三部分：
1. 模板部分<template></template>
决定要展示和渲染的内容
2 .逻辑部分 <script></script>
js 交互处理的代码
3. 样式部分 <style></style>
<template>
<div id="app">
<todo-list/>
</div>
</template>
<script>
import TodoList from './components/TodoList'
export default {
name: 'App',
components: {
'todo-list': TodoList
}
}
</script>
<style>
#app {
}
</style>
为了亲自体验下，所以先把这三部分默义生成的代码删除, 按照todoList的需求写了一个最简单的Demo：
1. 编写一个TodoList组件，在src/components目录下创建一个TodoList.vue文件
<template>
<div>
<div>
<input value="" v-model="inputValue"/>
<button @click="handleAddItem">添加</button>
</div>
<div>
<ul>
<li @click="handleDelItem(index)" v-for="(item,index) of items" :key = "index">{{item}}</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: 'TodoList',
props: [],
data(){
return {
inputValue:'',
items:[]
}
},
methods:{
handleAddItem(){
this.items.push(this.inputValue)
this.inputValue = ''
},
handleDelItem(index){
this.items.splice(index,1)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
指令说明：v-bind 简写为: v-on 简写为 @
所有的todolist的功能都在该组件内部实现了，下面是App组件对该组件的使用：
<template>
<div id="app">
<todo-list/>
</div>
</template>
<script>
import TodoList from './components/TodoList'
export default {
name: 'App',
components: {
'todo-list': TodoList
}
}
</script>
<style>
#app {
}
</style>
这里说一个知识点：
export default {
data(){
return {
inputValue:'',
items:[]
}
}
}
这个exprot default中的data 为可不写如下方式：
export default {
data: {
inputValue:'',
items:[]
}
}
这是因为return方式有点象是java中的new 的方式，每次返回的是新初始化的对象值，而 data对象的方式有点象java中static的方式，会返回对象上次被修改后的情况。
执行 npm run dev ，显示效果如下：
点击添加按钮可以把文本框的内容添加到下面列表中，双击列表的其中一项可以把它从列表中删除
第一个vue的小案例，在此记录一下，可以帮着日后一步步深入去理解vue