第一天基础

1、基础

### 数组的变异（括号中的能改变原数组）
- 操作数组的方法（pop push unshift shift splice recerse sort）
    indexOf lastIndexOf concat slice

## forEach filter（过滤） map（映射）some every  reduce （includes finding  es6）

## node 版本>8.5  webstorm(vscode ,  sublim)  >2017版本

## 框架和库

- 框架 vue  拥有完成的解决方案  我们写好 人家调用我
- 库 jQuery underscore zepto  animate.css  我们调用他

## 渐进式  （渐进增强）
-  vue全家桶 vuejs + vue-route + vuex + axios
-  通过组合 完成一个完整的框架

## MVC（backbone）
- model 数据
- view 视图
- controller 控制器

## MVVM （angular ，vue ）  双向的
- model 数据
- view 视图
- viewModel 视图模型


## Object。defineProperty（es5）的没有替代方案
- 不支持IE8<=

## 安装 vue
- cdn的方式
- npm安装 node package manager
npm init -y    //-y


初始化会产生一个package.json的文件 这个文件用来描述项目的依赖，不能有大写 
特殊字符 中文，而且不要和安装的包的名字相同
这个文件不能写注释

1.arr.js

// 配置npm 和语法
// file -> setting 中配置npm
//file ->setting 中配置reactJSX    我这里配置的是ES6

console.log("hello")
let arr = [1,2,3,4,5];
for(let i=0;i<arr.length;i++){   //编程式
    console.log(arr[i]);
}
//面试：forEach ，for in, for, for of 的区别
// 1)forEach 不支持return
console.log("------------------------")
arr.forEach(function (item) {    //声明式，不关心如何实现
    console.log(item)
})
for(let key in arr){     //key会变成字符串类型，包括数组的私有属性
    console.log(key);
}

for(let val of arr){   //支持return   并且是值of数组（不能遍历对象）
    console.log(val);
}

let obj = {school:'zfpx',age : 8};
//          【'school','age'】
for(let val of Object.keys(obj)){   //支持return   并且是值of数组（不能遍历对象）
    console.log(val);
}
for (let val of Object.keys(obj)){
    console.log(obj[val]);
}

//2）filter 是否操作原数组：不    返回结果  ：过滤后的新数组
//回调函数的返回结果，如果返回true  表示这一项放到新数组中
let newAry =  [1,2,3.4,5].filter(function (item) {                  //删除
   // return  2<item<5;   打印出所有的
    return 2<item && item<5;
})
console.log(newAry)
console.log("-----------------")
//3)map 映射 将原有的数组映射成一个新数组 【1,2,3】
//<li>1</li><li>2</li><li>3</li>
//不操作原数组  返回新数组  回调函数中返回什么这一项就是什么
let arr1 = [1,2,3].map(function (item) {                        //更新
    return `<li>${item}</li>`;     //是ES6中的模板字符串  遇到变量用${}取值
})
console.log(arr1.join(''));
console.log("-----------------------");

// 4) 返回的是Boolean
let arr3 = [1,2,3,4,55];
console.log(arr3.includes(5));

console.log("-----------------------");
// 5）返回找到的那一项  不会改变数组  回调函数中返回true 表示找到了，找到后停止循环，找不到返回的是undefined
let result = arr3.find(function (item,index) { //找到具体的某一项用find
    return item.toString().indexOf(5)>-1;
})
console.log(result);
console.log("-----------------------");

// 6) some  找true 找到true后停止 返回true 找不到返回false
// 7）every 找到false 找到false后停止 返回false

// 8) reduce 收敛函数 4个参数  返回的是叠加后的结果   原数组不发生变化，回调函数返回的结果：
//prev 代表的是数组的第一项，next是数组的第二项
//第二次prev是undefined，next是数组的第三项
let sum  = [1,2,3,4,5].reduce(function (prev,next,index,item) {
    console.log(arguments);   //打印参数
    return prev+next;
})
console.log(sum);

let sum2 = [{price:30,count:2},{price:30,count:3},{price:30,count:4}].reduce(function (prev,next) {

    // 0+60
    // 60+90
    // 150+120
    return prev+next.price*next.count;

},0);   //默认指定第一次prev
console.log(sum2);

console.log("-----------------------------------------")

let flat = [[1,2,3],[4,5,6],[7,8,9]].reduce(function (prev,next) {
    return prev.concat(next);
});
console.log(flat);

1.helloWord.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloWorld</title>
</head>
<body>
<div id="app">
    <!-- moustache 小胡子语法 表达式 可以放赋值 取值 三 元-->
    {{ msg }}<br>
    {{ msg === 'hello,world'?1:0}}
</div>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    // 引入 vue之后会白给一个Vue的构造函数
    let vm = new Vue({    //vm == viewModel
        el: '#app',        //告诉vue能管理哪个部分 ，querySelector
        data:{             //data中的数据会被vm所代理
            msg : 'hello,world'   // 可以通过vm.msg 取到对应的内容
        }
    });  // Object。defineProperty.
    // vm.msg='hello fengfanli';
</script>
</body>
</html>

2.arrow-fn.js

// arrow fn  不具备 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关键字，参数有一个可以省略小括号  小括号和大括号之间有一个箭头
//如果没有大括号则直接是返回值 有大括号必须写return



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

// 高阶函数（ >=俩箭头的 ）
//闭包 ： 函数执行的一瞬间叫闭包，  （不销毁的作用域） ， 当执行后返回的结果必须是引用数据类型，被外界变量接受 此时这个函数不会销毁（模块化）
// 在VUE中 很多时候不能用箭头函数
let a = b => c=>c+b ;

2.direvtive.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mvvm</title>

</head>
<body>
<div id="app">

    {{ msg }}

    <!-- 表单元素 input CheckBox textarea radio select-->
    <!-- vue 的 “指令” directive 只是dom上的行间属性，vue给这类属性赋予一定的意义 来
     实现特殊的功能  所有的指令都以 v-开头
     value 属性默认情况下回被 vue 忽略掉 selected checked 都没有意义-->
    <!-- 数据影响视图 v-model 会将msg的值赋予输入框，输入框的值改变了会影响数据-->
    <input type="text" v-model="msg" />
    <!--Object。defineProperty  ES5-->
    <!--v-text === {{}}  防止{{}}出现在页面上-->
    <!--下面的div中不能放东西-->
    <div v-text="msg"></div>
    <!-- v-once 只绑定一次 当数据再次发生变化 也不导致页面刷新-->
    <div v-once>
        {{msg}} {{msg}}
    </div>
    <!-- v-heml 把HTML字符串当做HTML渲染，一定是可以信任的HTML-->
    <div v-html="p">{{p}}</div>
</div>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">

    let vm = new Vue({
        el: '#app',
        data:{
            msg:'hello,world',
            p:"<h1>hello</h1>>"
        }
    });

</script>
</body>
</html>

2.mvvm.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mvvm</title>

</head>
<body>
<div id="app">

    {{ msg }}

    <!-- 表单元素 input CheckBox textarea radio select-->
    <!-- vue 的 “指令” directive 只是dom上的行间属性，vue给这类属性赋予一定的意义 来
     实现特殊的功能  所有的指令都以 v-开头
     value 属性默认情况下回被 vue 忽略掉 selected checked 都没有意义-->
    <!-- 数据影响视图 v-model 会将msg的值赋予输入框，输入框的值改变了会影响数据-->
    <input type="text" v-model="msg" />
    <!--Object。defineProperty  ES5-->
    <!--v-text === {{}}  防止{{}}出现在页面上-->
    <!--下面的div中不能放东西-->
    <div v-text="msg"></div>
</div>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">

    let vm = new Vue({
        el: '#app',
        data:{
            msg:'hello,world'
        }
    });

</script>
</body>
</html>

3.defineProperty.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>defineProperty</title>
</head>
<body>
<input type="text" id="input">

<script type="text/javascript">
    let obj ={};
    let temp = {};
    Object.defineProperty(obj, 'name', {

        get(){  // 取obj的name属性会触发
            return temp["name"]
        },
        set(val){  //给obj赋值会触发get方法
            temp["name"] = val;    //  改变temp的结果
            input.value = val ;    //  将值赋予输入框
        }

    });
    input.value = obj.name;       //  页面一加载时  会调用get方法
    input.addEventListener('input',function () {  //等待输入框的变化
         obj.name = this.value;     //当值改变时会调用set方法
    })


    /*Object.defineProperty(obj, 'name', {
        configurable:true,  //
        writable:false,
        enumerable:false,
        value: 1
    });*/


</script>
</body>
</html>

4.reactivity.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>reactivty</title>
</head>
<body>
<div id="app">
    {{a.school}}
</div>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    // vue 会循环data中的数据（数据劫持） 依次的会增加getter和setter
    let vm = new Vue({
        el:'#app',
        data:{
            a: {}
            // a:{school : 1},  // 第一种
        }
    });
    // 使用变量时 先要初始化，否则新加的属性不会导致页面刷新

    // 第二种  此方法可以给对象添加响应式的数据变化
    // vm.$set(vm.a,'school',1);

    //  第三种 替换原对象
    vm.a = {school : 'fengfanli' ,age: '8' , address : 'xxx'};

</script>
</body>
</html>

5.reactivity.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>reactivty</title>
</head>
<body>
    <div id="app">
        {{a.school}}
    </div>
    <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        let vm = new Vue({
            el:'#app',
            data:{
                arr : [1,2,3,4,5],
            }
        });
        // 去改变数组中的某一项是监控不到的，也不能使用改变数组长度的方法
        // 错误 ： vm.arr[0] = 100,  vm.arr.length -= 2;

        // 变异方法 : pop push shift unshift sort reserve splice
        // vm.arr.reverse();
        vm.arr = vm.arr.map(item=>item*=3);
        // 还有filter map  因为map不能改变原数组。需要赋值
    </script>
</body>
</html>

6.v-for.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
</head>
<body>
<div id="app">
    <!--  要循环谁 就在谁的身上增加 v-for 属性-->
    <!-- 默认是value of 数组 /  (value,index) of 数组-->
    <!--  我感觉第一个是 对象，第二个就是索引-->
    <ul>
        <li v-for = "(fruit,index) of fruits"> {{fruit.name}} {{index+1}}
            <ul>
                <li v-for="(c,childindex)  in fruit.color">{{index+1}}.{{childindex}}{{c}}</li>
            </ul>
        </li>
    </ul>

    <div v-for="c in 'aaa'">{{c}} </div>
    <div v-for="c in 5">{{c}} </div>
    <div v-for="(value,key,index) in obj">{{key}}:{{value}}:{{index}} </div>
</div>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    let vm = new Vue({
        el: '#app',
        data: {
            obj : {name : 'feng', age :9 ,address :'xxx'},
            fruits : [
                {name : '香蕉',color:['green','yellow']},
                {name : '苹果',color:['red','green','yellow']},
                {name : '西瓜',color:['pink']}
            ]
        }
    });
</script>
</body>
</html>

7.event.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>event</title>
</head>
<body>

<!--  v-on === @   -->
<!--传参 可以加 括号， 不传参  就不要加-->
<!-- 如果不传递参数， 则不要写括号会自动传入   **事件源**  ，如果写括号了要手动传入   $event 属性-->
<div @mousedown="fun($event,1)" id="app" > 请点我呀</div>

<script type="text/javascript"  src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    let vm = new Vue({
        el:'#app',
        methods:{               // methods和data中的数据会全部放到vm上，而且名字不能冲突，冲突会报错，methods中的this指向的都是实例
             fun(event,a){console.log(event)},
            // fun : function () {
            //     alert(this.a)
            // }
        },
        data:{                  // 都是数据
            // fun(){alert(1)},
            a :1,
        }
    })
</script>
</body>
</html>

vue笔记 10day

第一天基础

1、基础

1.arr.js

1.helloWord.html

2.arrow-fn.js

2.direvtive.html

2.mvvm.html

3.defineProperty.html

4.reactivity.html

5.reactivity.html

6.v-for.html

7.event.html

8.todo.html

猜你喜欢

vue笔记 10day

第一天 基础

1、基础

1.arr.js

1.helloWord.html

2.arrow-fn.js

2.direvtive.html

2.mvvm.html

3.defineProperty.html

4.reactivity.html

5.reactivity.html

6.v-for.html

7.event.html

8.todo.html

猜你喜欢

第一天基础