Vue.js---MVVM的信仰

路人甲Java 2021-10-29

展开全文

Vue.js---MVVM的信仰

B站学习视频地址：https://www.bilibili.com/video/BV1e7411M7GQ

一切基于ES6 (let, const, 箭头函数, promise, axios)
MVVM模型(React nactive用在APP比较多)
传统的js顶下给你思维，打破手动操作DOM

1. 引入vue.js

<script src="vue.js"></script>

2. new一个Vue

<script>
    const myvue = new Vue();
    console.log(myvue);
</script>

console:

3. 传一个对象给Vue, 里面有2个参数，语法如下：

<script>
    const myvue = new Vue({
        界面: xxx,
        数据: yyy
    });
    console.log(myvue);
</script>

画图理解：

4. 逐渐增加代码

界面：

 <div id="myView"></div>

数据：

const myModel = {};

整合代码：

<body>
    <div id="myView"></div>
</body>
<script>
    const myModel = {};
    const myvue = new Vue({
        el: '#myView',
        data: myModel
    });
    console.log(myvue);
</script>

画图如下：

<body>
    <div id="myView">
        {{name}}
    </div>
</body>
<script>
    //const 位置不可变，里面值可变
    //带单引号是字符串，不带是变量
    const myModel = { name: 'aaa' };
    const myvue = new Vue({
        el: '#myView',
        data: myModel
    });
    console.log(myvue);
</script>

console:

6. MVVM+UI框架

MVVM的信仰，界面做界面，数据做数据，通过viewmodel去实现双向数据绑定，实现改数据界面也改了的功能

改法1

改法2：

7. 界面显示时间

老的写法：手动操作DOM

MVVM的写法：

<body>
    <div id="myView">
        现在时间是: {{now}}
    </div>
</body>
<script>
    const myModel = {
        now: new Date().toLocaleString()
    };
    const myvue = new Vue({
        el: '#myView',
        data: myModel
    });
    console.log(myvue);

console：

8. 获取最新时间

<body>
    <div id="myView">
        现在时间是: {{now}}
    </div>
    <div id="aa">
        <button onclick="pp()">获取最新时间</button>
    </div>
</body>
<script>
    const myModel = {
        now: new Date().toLocaleString()
    };
    const myvue = new Vue({
        el: '#myView',
        data: myModel
    });
    console.log(myvue);
    const pp = function () {
        myModel.now = new Date().toLocaleString();
    }

console:

9. 当点击按钮，实现pp()的时候，数据层面setInterval每秒更新代码段一次，界面也同时响应更新

    const pp = function () {
        setInterval(() => {
            myModel.now = new Date().toLocaleString();
        }, 1000);
    }

console: 每一秒更新

9. console打印出来

    const pp = function () {
        setInterval(() => {
            myModel.now = new Date().toLocaleString();
        }, 1000);
    }

10. v-for遍历

<div id="myView">
        <ol>
            <li v-for="student in stuList">{{student.name}} </li>
        </ol>
    </div>

    const myModel = {
        stuList: [
            { name: '小明', sex: '男' },
            { name: 'lisa', sex: '女' },
            { name: 'jennie', sex: '女' }]
    }

console:

11.

    <div id="myView">
        <ol>
            <li v-for="student in stuList">
                {{student.name}}
                性别: {{student.sex}}
            </li>
        </ol>
    </div>

虚拟DOM: vue干了渲染的活

12. 添加一条数据

    <div id="aa">
        <button onclick="pp()">添加一条数据(通过axios访问服务器获得最新数据)</button>
    </div>
</body>
<script>
    const myModel = {
        stuList: [
            { name: '小明', sex: '男' },
            { name: 'lisa', sex: '女' },
            { name: 'jennie', sex: '女' }]
    }
    const myvue = new Vue({
        el: '#myView',
        data: myModel
    });
    console.log(myvue);
    const pp = function () {
        myModel.stuList.push({ name: 'koko', sex: '男' })
    }
</script>

console:

13.

    <div id="aa">
        <button onclick="pp()">添加一条数据(通过axios访问服务器获得最新数据)</button>
    </div>

<script>
    const myvue = new Vue({
        el: '#myView',
        data: {
            stuList: [
                { name: '小明', sex: '男' },
                { name: 'lisa', sex: '女' },
                { name: 'jennie', sex: '女' }]
        }
    });
    console.log(myvue);
    const pp = function () {
        myvue.$data.stuList.push({ name: 'koko', sex: '男' })
    }
</script>

console: