Lenhart的成长之路----vue基础知识1

js数据类型

• 基本 number string boolean null undefined
• Object function
• Symbol(es6)

{} []

数组的变异(括号中的能改变原数组)

• 操作数组的方法 es4 (pop push unshift shift splice reverse sort)
  indexOf lastIndexOf concat splice

forEach filter(过滤) map(映射) some every reduce (includes)

node > 8.5 版本 LTS标准版(项目中使用) current最新版(自己学习)

webstorm > 2017版本

框架和库

• 框架 vue
• 库 jquery underscore zepto animate.css

渐进式（渐进增强）

• vue全家桶 vuejs + vue-router + vuex
• 通过组合完成一个完整的框架
  
  • 声明式渲染
  • 组件系统
  • 客户端路由（vue-router）
  • 大规模状态管理（vuex）
  • 构建工具（vue-cli）

MVC（backbone）单向闭环数据绑定

• model数据
• view 视图
• controller 控制器

MVVM（angular vue） 视图和数据的双向数据绑定

（view <==> ViewModel <==> model）
- model数据（javascript对象）
- view 视图（dom）
- ViewModel 视图模型（Dom Listener && Data Bindings）

Object.defineProperty(es5)没有替代方案

• 不支持ie8及以下

es5实现双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>defineProperty</title>
</head>
<body>
<input type="text" id="input">
<p id="p"></p>
<script>
    let obj = {};
    let temp = {};
    Object.defineProperty(obj, 'name', {
        // configurable: true, // 是否可删除
        // writable: true, // 是否可赋值
        // enumerable: true, // 是否可枚举
        // value: 1, //初始值

        get(){ // 取obj的name属性时会触发get方法
            return temp['name'];
        },
        set(val){ // 给obj的name属性赋值时会触发set方法
            temp['name'] = val;     //改变temp的结果
            input.value = obj.name; //将值赋给输入框
            p.innerText = val;      //把输入框的值赋给p
        }
    });
    // delete obj.name; //{}
    // obj.name = 123; //{name: 123}
    // for (let key in obj){
    //     console.log(key); //name
    // }
    input.value = 'lenhart'; //{1}页面加载时会调用get方法 相当于controller
    input.addEventListener('input', function () {//{2}等待输入框变化
        obj.name = this.value;  //{3}当值变化是会调用set方法
    });
</script>

</body>
</html>

安装vue

• cdn的方式
• npm安装

cd + 文件名 //change directory 直接用鼠标把文件夹拖过去
npm init //即可以初始化项目，又可以恢复node_modules
npm init -y //使用文件夹的命名快速初始化(不可出现中文、空格等非法字符)
npm init vue

思想转换：操作dom转变为操作数据