vue初始化项目

npm init   初始化一个项目
npm install vue  然后安装vue

初始化会产生一个pacakge.json的文件，这个文件用来描述项目的依赖
执行完 npm install vue之后，会产生一个node_modules文件夹，其中存放着项目的依赖。此时项目的结构如下：

image.png

pacakge.json文件中的内容如下：
描述了项目的一些信息

{
  "name": "vue-stydy",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.5.16"
  }
}

箭头函数

    <script>
        //不具备this arguments
        //自己没有this将找上一级this
        //如何更改this指向  
        //1.call apply bind
        //2. var that = this
        //3. =>
        //如何确认this是谁， 看谁调用的 .前边是谁this将是谁     


        // function a(b) {
        //     return b + 1
        // }

        // let a = b => b + 1 //取掉function关键字，小括号和大括号之间用箭头，如果参数只有一个，
        //可以省略括号，如果没有大括号则直接是返回值，有大括号将必须用renturn

        // function a(b){
        //     return function(c){
        //         return b+c;
        //     }
        // }
        // a(1)(2);

        let a = b => c => b + c;//高阶函数  >=两个箭头的函数

        console.log(a(1)(2))


        let bibao = function (b){
        
            return function(c){
                return b+c;
            }
        }()
        //闭包   不销毁的作用域  当执行后返回的结果必须是引用数据类型，被外界变量接受 此时这个函数不会被销毁，（模块化）
    </script>

vue实现todolist

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <div id="app">
        <input type="text" v-model="val" @keyup.enter='add'>
        <!-- .enter是vue的键盘修饰符modifiers  enter表示按空格触发事件 可以使用数字代表键盘的按键  -->
        <ul>
            <li v-for="(todo,index) in arr">
                <button @click="remove(index)">
                    删除
                </button>
                {{todo}}

            </li>
        </ul>
    </div>



    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                val: '',
                arr: [],

            },
            methods: {
                add: function (e) {

                    this.arr.push(this.val);
                    this.val = '';

                },
                remove: function (i) {
                    this.arr = this.arr.filter((item, index) => index !== i)
                }
            }
        })
    </script>
</body>

</html>