初学vue实现todolist项目（上）

通过三天对vue的学习，上手一个简单项目来加深理解。

安装vue

方案一：

1. 也可以通过官网下载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

需要补充的基础知识

创建实例

数据

在data属性中的数据怎么样调用显示呢？
可以直接在挂在的dom元素中添加{{变量名}}（差值表达式）获取数据值。

{{content}}

我们还可以通过v-html和v-text指令的方法来实现

在这里，这两个指令在页面显示的内容都是完全一样的。但是他们有区别的。

如果我们将content的内容修改一下，

content:"
Jack
"

我们会看到，v-text显示的内容为第一行。v-html的内容为第二行。v-html并不会转译数据的内容，但是v-text能将标签的内容转译并显示出来。使用差值表达式和v-text效果一样。

Jack

Jack//以h1标签的格式显示

值得补充的是三种模板语法“ ”或{{ }}中可按JavaScript语法书写。

事件和方法

• v-on：绑定事件（可简写为@ 例如：@click）

{{content}}

  methods: {           //写在vue实例当中，完整代码可参考上面第一段代码
          handleClick: function() {
            alert("Jack")
          }
        }

属性绑定和双向绑定

• 属性绑定v-bind：
  例如我们需要为标签绑定一个叫做item属性的，属性值为“hello world”

那么我们应该写为

{{content}}
//或者简写为
{{content}}

• 双向绑定v-model：
  所谓双向绑定就是既可以通过数据改变显示值，也可以通过输入改变输入值来改变数据值，可以实现双向数据改变。这个也是实现todolist项目很重要的一点。

双向绑定看文字解释的话，可能有点晕。那就将下边的代码加入挂载的标签下，看看页面有什么效果（试着改变一下输入框的内容）

{{content}}

v-for指令

我们用 v-for 指令根据一组数组的选项列表进行渲染。
这样我们就可以通过改变数组数据来改变列表个数和内容了，这是实现todolist列表项的关键。

    



//实例中
data:{
    content:'',
    list:['1','2','3','4','5']
}

通过v-for以上事例将可以渲染为五个li标签内容分别1,2,3,4,5。
以上代码等同于以下代码

    
1
    
2
    
3
    
4
    
5