vue入门

node环境需要在设置里搜索npm配置

数组的方法

1. filter不改变原数组，返回值是过滤后的新数组，其中回调函数的返回结果为true将当前项放入要返回的新数组，false不管
    var newary=[1,2,3,4,5].filter(function (item) {
    return 2<item<5;
    //这样写不对，先运算左边2<item不管是否成立返回值就是true，false。
    // 转成数字就是0,1都比5小，所以filter返回值一直就是true，将每一项都放到了返回的数组里，无法过滤
    });
    
    应用场景：想要根据传递进来的索引找到数组里的该索引对应的项，将其删除
    
2. map不改变原数组，返回值是映射成的新数组，其中回调函数返回什么当前项映射成什么
    将数组[1,2,3]映射成<li>1</li><li>2</li><li>3</li>
    var newary=[1,2,3].map(function (item) {
        return `<li>${item}</li>`
    });

3. includes数组中是否包含某个值，返回值true/false               var result=[1,2,3].includes(3);

4. find在数组中寻找某一项，其中回调函数为true表示找到并将找到的项返回，回调函数为false未找到继续找，找到最后也没找到返回undefined 
    var result=[1,2,3].find(function (item) {
        return item===1
    });
    
5. some查找每一项，回调函数为真停止查找，返回值为真。为假继续查找，找不到返回值为false
6. every与some相反，找不同。查找每一项，回调函数为假“停止”查找，返回值为假。为真继续查找，都是真返回值为true
    我们要的就是他返回false值
    使用场景，比如全选按钮。要通过计算属性计算数据里面的每一项是不是其中某项是false。用every返回每一项，如果其中一项返回false，则返回值就是false，不全选
7. reduce
//reduce的回调函数共有四个参数，返回的是叠加后的结果。原数组不变（新方法的原数组都不变）
    //prev数组第一项，next数组第二项
    //prev回掉函数的返回值会作为下一次的prev，next数组下一项
    //index后一项的当前索引
    //item原数组
var result=[[1,2,3],[4],[4,5]].reduce(function (prev, next,index,item,) {
    return prev.concat(next)
});
console.log(result)//多维数组合并成一维数组

- 安装vue

在一个文件夹中
npm init -y　　　　 //初始化一个包
npm install vue　　//安装vue，安好后会在当前文件夹下多出一个node_modules文件夹，该文件夹存放着我们需要的vue和所有依赖的包

- 在当前文件夹下创建HTML文件，引入vue.js就可以写vue了

　　view-viewmodel-model（MV VM）　　我们创建的实例就是viewmodel，所有挂载在实例上的数据都能实现双向绑定

//最简单的hello world

<div id="app">
<!-- 通过小胡子语法可以直接将实例代理的数据放在页面上-->
    {{msg}}
</div>

<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    //引入vue文件后会白给你一个vue类，通过new可以创建该类的实例
    let vm=new Vue({
        el:"#app",  //那个部分归该实例管理
        data(){     //对象中函数可以简写
            //data中的数据会被vue实例代理，即实例.msg能取到"hello world"
            return {
                msg:"hello world"
            }
        }
    })
</script>

- v-for要循环谁就在谁身上增加该指令

- methods，data，props中的数据会放在实例上如果重名会报错

　　- methods方法中的this都是实例(vm)。如果是箭头函数的话this的指向会变成window这不是我们想要的

<script>
    new Vue({
        el:"#app",
        data:{a:1},                 //data中的的数据都挂载到实例上。所以在任何地方都可以通过vm.xxx获取xxx数据
        methods:{
            fn:()=>{
                console.log(this.a);//this指向变成window取不到挂载到实例上的数据a。所以methods中的方法不能使用箭头函数，里层的就无所谓了
            }
        }
    })
</script>

指令，事件

//指令5
<input v-model="msg"></input>       双向数据数据

<div v-text="msg"></div>与{{msg}}功能一样，但前面那个的好处是网速慢的时候也不会看到小胡子，另一个网如果不好会看到小胡子

<div v-once>{{content}}</div>       只绑定一次，以后不会再受数据变化就更新了

<div v-html="msg"></div>        把HTML字符当HTML代码渲染，如msg:"<p>hello</p>"页面显示就是hello，但如果用小胡子显示数据的话就是<p>hello</p>

<li v-for="(item,index) in list"></li>要循环谁就在谁身上添加该属性,item就是当前项，index是索引


//事件
v-on:click="函数名"可以简写成@click="函数名"。              函数名要在methods里注册

1. vue会自动给函数传递事件源，即如果绑定事件的时候后面什么都不写，methods里面的方法可以直接拿到事件源e。
    <button @click="fn">点我呀</button>
    
    methods:{
        fn:function (e) {console.log(e)}
    }
    
2. 如果写了()想要拿到事件源则绑定函数时括号里需要写$event作为第一个参数
    <button @click="fn($event)">点我呀</button>
    
    methods:{
        fn:function (e) {console.log(e)}
    }

3. 如果想要拿到事件又想传参。则第一个参数是$event从第二位开始传参数，接收参数时也是与之对应，第一个参数接收事件从第二个参数开始接收参数。
   <button @click="fn($event,'liqian')">点我呀</button>
   
    methods:{
        fn:function (e,a) {console.log(e,a)}//
    }
4. 如果不需要事件源只传参数。可以不写$event，传参和接收参数一样还是一一对应
    <button @click="fn('liqian')">点我呀</button>
   
    methods:{
        fn:function (a) {console.log(a)}//
    }

- 一个简易功能

　　- 点击按钮，将前面表单的内容展示在下面，并且表单清空

<div id="app">
    <div>
        <input type="text" placeholder="请输入" v-model="onemsg">
        <input type="submit" value="点击提交" @click="fn">
    </div>
    <div v-for="(item,index) in datalist" :key="index">{{item}}</div>
</div>

<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    let vm=new Vue({
        el:"#app",
        data(){
            return {
                onemsg:"",
                datalist:[]//展示在页面上
            }
        },
        methods:{
            fn(){//当点击提交时将表单中的数据放入定义好的datalist里，并清空表单
                //只有表单能实现双向绑定，表单改变时数据自动发生变化
                this.datalist.push(this.onemsg);//获取到最新的数据放入数据表里
                this.onemsg=""
            }
        }
    })
</script>