VUE基础知识2：VUE介绍

一、vue介绍

在vue中，很多时候不能用箭头函数。

Vue.js 是一套构建用户界面的渐进式框架。

框架和库的区别

框架：vue,一个拥有完整的解决方案，我们写好人家调用我。

库：juqery, underscore(模板引擎),zepto,animate.css。我们调用它。

渐进式

vue全家桶 vuejs + vue-router + vuex +axios

通过组合完成一个完整的框架

MVC(单向的)

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

MVVM(angular,vue) 双向的

model数据，view视图，viewModel视图模型

二、vue初始化

安装vue

第一种： JS引用,cdn

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

第二种：

// 初始化
npm init -y

// 安装vue
npm install vue

vue不支持IE8及其以下版本。因为它使用了 Object.defineProperty 这个方法。这个方法是ES5的，没有替代方案。所以不支持IE8及其以下版本。

三、开始

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

<div id="app">
    {{msg}}
    {{msg === 'Hello' ? 1:0}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // 引入vue后会给一个Vue构造函数
    let vm = new Vue({     // vm == viewModel
        el: '#app',        // 告诉vue能管理哪个部分, querySelector
        data: {            // data中的数据会被vm所代理
            msg: 'Hello'   // 可以通过vm.msg 取到对应的内容
        }
    });
</script>
</body>
</html>

四、MVVM

数据影响视图，那视图怎么影响数据。用表单元素。

用视图来控制数据。

利用表单元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{msg}}
    <!-- 表单元素 input checkbox textarea radio select -->
    <!-- 通过vue的指令 directive, 只是dom上的行间属性 -->
    <!-- 所有指令都以v- 开头 , value属性默认情况下会被vue忽略掉 selected,checked 都没有意义 -->
    <!-- v-model 会将msg的值会赋予输入框，输入框的值改变会影响数据 -->
    <input type="text" v-model="msg">
</div>

<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg: 'hello'
        }
    })
    console.log(vm.msg);   // hello
</script>
</body>
</html>

五、Object.defineProperty

这是个ES5的语法。

MVVM用到了 defineProperty 这个方法。

Object.defineProperty的基本用法

<script>
    let obj = {};
    // 通过Object.defineProperty 这个方法给obj加属性
    Object.defineProperty(obj, 'name', { // 给obj加上name属性
        configurable: true,  // 是否可删除
        value: 1,
        enumerable: true, // 是否可遍历出来
        writable: true  // 是否给name这个属性重新赋值
    });
    //delete obj.name; // 删除obj的name属性
    //obj.name = 10000;  // 给obj的name属性重新赋值

    // 遍历obj这个对象
    for(let key in obj) {
        console.log(key); // name
    }
</script>

一般用get和set方法比较多。

<script>
    let obj = {};
    let temp = {};

    // 通过Object.defineProperty 这个方法给obj加属性
    Object.defineProperty(obj, 'name', { // 给obj加上name属性
        // 取obj的name属性会触发get方法
        get(){
            return temp["name"];
        },
        // 给obj的name属性赋值会触发set方法
        set(val){
            // 给temp对象的name属性赋值val
            temp["name"] = val;
        }
    });

    obj.name = 2;
    console.log(obj.name); // 2
</script>

双向绑定的第一步，是先把数据绑定到input里面，

<input type="text" id="input">

<script>
    let obj = {};
    let temp = {};

    // 通过Object.defineProperty 这个方法给obj加属性
    Object.defineProperty(obj, 'name', { // 给obj加上name属性
        // 取obj的name属性会触发get方法
        get(){
            return temp["name"];
        },
        // 给obj的name属性赋值会触发set方法
        set(val){
            // 给temp对象的name属性赋值val
            temp["name"] = val;

            // 把input的值重新改掉
            input.value = obj.name;
        }
    });

    obj.name = 2;
    console.log(obj.name); // 2

    // 给input绑定数据
    input.value = obj.name;

    // 更改输入框的值
    // DOM2级
    input.addEventListener('input', function () {
        // 把更改的值赋给 obj的name属性
        obj.name = this.value;
    });
</script>

控制台console

obj.name = 300;

input的值，会随着改变。

这样就能做到数据影响视图了。

注意：vue怎么实现的双向绑定，靠的就是ES5的Object.defineProperty的get() 和 set()方法。

VUE基础知识2：VUE介绍

猜你喜欢