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

本文链接：https://blog.youkuaiyun.com/github_38851471/article/details/79240375

本文详细介绍了JavaScript的基本数据类型、数组操作方法，并重点解析了Vue框架的特点及其核心概念，包括组件系统、客户端路由、状态管理和构建工具等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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转变为操作数据