通过三天对vue的学习，上手一个简单项目来加深理解。
安装vue
方案一：<script>标签直接引入
- 你可以使用cdn直接引入
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
- 也可以通过官网下载vue.js文件
- 开发者版本（包含完整的警告和调试模式）：https://vuejs.org/js/vue.js
- 生产版本（删除了警告）：https://vuejs.org/js/vue.min.js
- 新手应该使用开发者版本因为包含完整的警告和报错信息
方案二：使用vue-cli快速搭建项目
安装vue-cli
确保电脑已经安装有git和node
- 打开命令行，安装
npm install -g @vue/cli
# OR
yarn global add @vue/cli
- 安装完成后可以检验一下是否安装完成
vue --version
- 在目标文件夹下，创建一个vue项目
npm install -g @vue/cli-init
# 在这因为使用的是2.x版本，因此使用init功能创建。3.0版本方法可参考官网
vue init webpack my-project
需要补充的基础知识
创建实例
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<title>todolist</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
var vm = new Vue({ //我们主要通过new字符来创建一个Vue实例，在这里我们把新创建的实例放在对象vm上
el："#app",//el是element的简写，代表创建的实例需要挂载于id为app的dom元素下
data: { //data属性用于储存
content:"Jack",
},
methods: { //方法写在这里面
handleClick: function() {
alert("Jack")
}
}
})
</script>
</body>
</html>
数据
在data属性中的数据怎么样调用显示呢？
可以直接在挂在的dom元素中添加{{变量名}}（差值表达式）获取数据值。
<div id="app">{{content}}</div>
我们还可以通过v-html和v-text指令的方法来实现
<div id="app" v-text="content"></div>
<div id="app" v-text="content"></div>
在这里，这两个指令在页面显示的内容都是完全一样的。但是他们有区别的。
如果我们将content的内容修改一下，
content:"<h1>Jack<h1>"
我们会看到，v-text显示的内容为第一行。v-html的内容为第二行。v-html并不会转译数据的内容，但是v-text能将标签的内容转译并显示出来。使用差值表达式和v-text效果一样。
<h1>Jack<h1>
Jack//以h1标签的格式显示
值得补充的是三种模板语法“ ”或{{ }}中可按JavaScript语法书写。
事件和方法
- v-on：绑定事件（可简写为@ 例如：@click）
<div id="app" v-on:click="handleClick">{{content}}</div>
methods: { //写在vue实例当中，完整代码可参考上面第一段代码
handleClick: function() {
alert("Jack")
}
}
属性绑定和双向绑定
- 属性绑定v-bind：
例如我们需要为标签绑定一个叫做item属性的，属性值为“hello world”
那么我们应该写为
<div v-bind:item="hello world">{{content}}</div>
//或者简写为
<div :item="hello world">{{content}}</div>
- 双向绑定v-model：
所谓双向绑定就是既可以通过数据改变显示值，也可以通过输入改变输入值来改变数据值，可以实现双向数据改变。这个也是实现todolist项目很重要的一点。
双向绑定看文字解释的话，可能有点晕。那就将下边的代码加入挂载的标签下，看看页面有什么效果（试着改变一下输入框的内容）
<input v-model="content"/>
<h1>{{content}}<h1>
v-for指令
我们用 v-for 指令根据一组数组的选项列表进行渲染。
这样我们就可以通过改变数组数据来改变列表个数和内容了，这是实现todolist列表项的关键。
<ul>
<li v-for="item of list"></li>
</ul>
//实例中
data:{
content:'',
list:['1','2','3','4','5']
}
通过v-for以上事例将可以渲染为五个li标签内容分别1,2,3,4,5。
以上代码等同于以下代码
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
