vue入门

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

数组的方法

1. filter不改变原数组，返回值是过滤后的新数组，其中回调函数的返回结果为true将当前项放入要返回的新数组，false不管
    var newary=[1,2,3,4,5].filter(function (item) {
    return 21
2
3
    var newary=[1,2,3].map(function (item) {
        return `
${item}
`
    });

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



    {{msg}}

- 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
       双向数据数据

与{{msg}}功能一样，但前面那个的好处是网速慢的时候也不会看到小胡子，另一个网如果不好会看到小胡子

{{content}}
       只绑定一次，以后不会再受数据变化就更新了

        把HTML字符当HTML代码渲染，如msg:"
hello
"页面显示就是hello，但如果用小胡子显示数据的话就是
hello

要循环谁就在谁身上添加该属性,item就是当前项，index是索引


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

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

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

- 一个简易功能

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

    

        
        
    
    
{{item}}

　　

 

转载于:https://www.cnblogs.com/zlsqd/p/11326627.html