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实现双向数据绑定


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>definePropertytitle>
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转变为操作数据

你可能感兴趣的:(Lenhart的成长之路----vue基础知识1)