Vue基础教程(白痴教程)

MVVM模式

Vue基础教程(白痴教程)_第1张图片
下图不仅概括了MVVM模式(Model-View-ViewModel),还描述了在Vue.js中ViewModel是如何和View以及Model进行交互的。

ViewModel是Vue.js的核心,它是一个Vue实例。Vue实例是作用于某一个HTML元素上的,这个元素可以是HTML的body元素,也可以是指定了id的某个元素。

当创建了ViewModel后,双向绑定是如何达成的呢?

首先,我们将上图中的DOM Listeners和Data Bindings看作两个工具,它们是实现双向绑定的关键。
从View侧看,ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化,如果有变化,则更改Model中的数据;
从Model侧看,当我们更新Model中的数据时,Data Bindings工具会帮我们更新页面中的DOM元素。

1.导入vue.js

<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>

2.绿色剪头为绑定(模块化),红色箭头方法将鼠标放在“测试1111”上,会显示hello vue

Vue基础教程(白痴教程)_第2张图片

3.判断

   <h1 v-if="ok">yes</h1>
    <h1 v-else>no</h1>

Vue基础教程(白痴教程)_第3张图片

<body>

<div id="app">
    <h1 v-if="type==='a'">a</h1>
    <h1 v-else-if="type==='b'">b</h1>
    <h1 v-else>c</h1>

</div>

<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
           type:'a'
        }
    });
</script>
</body>

4.遍历数组

<div id="app">

    <li v-for ="item in items">
        {{item.message}}
    </li>

</div>

<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
          items:[
              {message: 'xyj'},
              {message: 'xyj2'}

          ]
        }
    });
</script>

你可能感兴趣的:(Vue)