通过三天对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>

初学vue实现todolist项目（上）