Vue-入门(一)

　　Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

　　在开始学习Vue时，我们必须了解MVC与MVVM模式。

　　MVC模式. - 其实就是把代码进行了一次分类,按照功能职责分为:
       M:model,模型, 指的是一段代码,这段代码负责读取数据库,返回数据
       V:view , 视图 ,指的也是一段代码,一般指html+css+js 负责页面前端显示效果的
       C:controller , 控制器 , 一段控制读取模型\控制视图的代码 , 一般指负责业务逻辑流程代码
　　MVVM模式:核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定
　　M:model,模型,
       V:view , 视图
       MV:结合了M和V
　　Vue.js就是MVVM模式

　　数据双向绑定实例

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

<div id="app">
    
    <input type="text" v-model="txt" />
    <!--         
    4: input的 v-model 可以实现: 默认读取data里面的txt数据,
    然后input的值发生改变时, 会同步更改 data里面的txt
    称之为数据的双向绑定 
    -->

    {{txt}} <!-- 2:在页面中某个地方读取data里面的txt -->

    <button id="btn">点击我改变data里面的txt</button>

</div>

</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    var v = new Vue({//先声明一个实例
        el: '#app',
        data: {
            txt: '我是实例v里面自带的数据' //1:实例v自带有数据txt
        }
    })

    //概念:数据双向绑定:
    // 3: 当 data里面的txt发生改变,那么之前所有读取这个txt的地方,都会同步改变
    // 到了第3,这种现象称之为数据单向绑定
    document.getElementById('btn').onclick = function() {
        v.txt = '我是点击更新的数据'
    }
    var num = 0;
    setInterval(function() {
        num++;
        v.txt = num; //可以看出,虽然改变的是v.txt, 上面所有引用都会同步改变
    },3000)
</script>
</html>

猜你喜欢