zoukankan      html  css  js  c++  java
  • vue2.0 前端框架

    在正式开始先复习一下js基础。因为vue最通终也要操作这些元素,vue和以前学的js并不挂勾,他和传统的jquert  设计理念相反

    ## js 数据类型

    1 基本类型

    number  string   boolean  null undefined

    object func....

     symbol (es6)

    ##{}   []     

    操作数组方法  pop  push  unshifit  shift slice  splict reverse sort indexof  lastIndexof

    concat  

    数组的变异能改变原数组

    新版中增加了常用方法:

    forEach filter(过虑) map(映射) some enery induce( includes find es6)

    本文中所处环境版本  node.js  8.14    webstorm2018,先复习几个常用的EC6的方法。。。

    循环数组中在es5中

    let arr = [1,2,3,4,5]
    for(let i = 0; i<arr.length; i++){
    console.log(arr[i]); //编程式
    }

    循环数组ES6中
    arr.forEach(function (item) {
    console.log(item)
    }) //声明式 不能 return


    for(let key in arr){ //key会变成字符串类型,包括数组私有属性
      console.log(dey)
    }
    for(let var of arr){//支持return 并且是值of数组
      console.log(var);
    }

    遍历对象 注意object 中字母o 大写

    let obj = {school:"b",age:8}
    for(let va of Object.keys(obj)){
    console.log(obj[va])

    filter(过滤,返回结果,不影响原数组)
    例:
    let newAry = [1,2,3,4,5,6].filter(function(item){
    return item>2&&item<5
    })
    console.log(newAry) //(用于删除)

    map 使用实例:

    let arr1 =[1,2,3].map(function(item){
    return item*=3
    })
    console.log(arr1)

    拼接中套字符串的方法:
    let arr1 =[1,2,3].map(function(item){
    return `<li>${item}<li>`
    })
    console.log(arr1) //注意上面是反相号 不是引号 //map 通常用于更新
    //是否包含
    let arr3 = [1,2,3,4,5]
    console.log(arr3.includes(5))

    查找某一项。。。
    find  的简单使用方法是:
    arr.find(5) 光是查找显然没有用,,所以应该查找并返回,请参看以下方法, 
    let arr3 = [1,2,3,4,5]
    let = result = arr3.find(function(item,index){
    return item.toString().indexOf(5)>-1
    });
    console.log(result)


    reduce 方法:

    [1, 2, 3, 4, 5].reduce(function(prev, cur, index, arr) {
    console.log(arguments);
    })
    实列二:

    sum = [1, 2, 3, 4, 5].reduce(function(prev, cur, index, arr) { 

    return prevres + cur;

    }) 
    实列三
    let sum2 = [{price:30,count:2},{price:30,count:3}].reduce(function(prev,next){
    return prev+next.price*next.count
    })
    console.log(sum2)

    实列4
    let a = [[1,2,3],[4,5,6],[7,8,9]].reduce(function(prev,next){

    return prev.concat(next);
    })
    console.log(a)

    箭头函数:
    //更改this 指向 常用方法:call  apply  bind  ,例;

    function a(b){
    return function (c) {
    return b+c;
    }
    }
    //改写简头函数
    let a = b =>{
    return c=>{
    return b+c;
    }
    }
    // 在次简化
    let a = b => c=> b+c;

    //二个箭头的叫高阶函数
    使用:

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

    vue使用一些经验:
    1, tbody 下面标签如果不是tr 或rt下面没有rd 不正常的编码规范,标签顺序会出错 别在html下不正确的标签,可以用is 来代替
    例如


    h5规范中,table中只能放tr 如果想放模板组件,需要用is 关健字:<tr is= "row">


    组件参数效验,在子组件接收父组件传参时可以效验,使用如下:

    
    
    子组件有一人属性,父属性也有,叫做props属性,,而非props属性则是父像子传了一个属性,而子组件没有定义,比如在子组件<child>
    content = "hello" 而子组件 定义时没有接收 就是说vue.component(child,{......中没有props, 这个定义})就叫非props属性
    基二,非prope属性,会把属性展示在html标签上。。。。。。


    动画:一,原理。动画总是在出现和新建削失时才有。以下css部分
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <script src ="./node_modules/vue/dist/vue.js"></script>
    <style>
        .fade-enter{
            opacity: 0;
        }
        .fade-enter-active{
            transition: opacity 1s;
        }
        fade-leave-to{
            opacity: 0;
            transition: opacity 3s;
        }
    
    
    </style>
    <body>
    <div id="root">
        <transition name = "fade">
        <div v-if = "show">hello world </div>
        </transition>
        <button @click = "handleClick">切换</button>
    </div>
    
    </body>
    
    <script>
    
    
    </script>
    
    </html>







  • 相关阅读:
    LeetCode对撞指针汇总
    167. Two Sum II
    215. Kth Largest Element in an Array
    2018Action Recognition from Skeleton Data via Analogical Generalization over Qualitative Representations
    题解 Educational Codeforces Round 84 (Rated for Div. 2) (CF1327)
    题解 JZPKIL
    题解 八省联考2018 / 九省联考2018
    题解 六省联考2017
    题解 Codeforces Round #621 (Div. 1 + Div. 2) (CF1307)
    题解Codeforces Round #620 (Div. 2)
  • 原文地址:https://www.cnblogs.com/fgxwan/p/9937492.html
Copyright © 2011-2022 走看看