Vue基础教程（白痴教程）

MVVM模式下图不仅概括了MVVM模式（Model-View-ViewModel），还描述了在Vue.js中ViewModel是如何和View以及Model进行交互的。ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。当创建了ViewModel后，双向绑定是如何达成的呢？首先，我

X ゜

7263人浏览 · 2020-06-20 19:06:22

X ゜ · 2020-06-20 19:06:22 发布

MVVM模式

在这里插入图片描述
下图不仅概括了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/vue@2.5.21/dist/vue.min.js"></script>

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

在这里插入图片描述

3.判断

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

在这里插入图片描述

<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/vue@2.5.21/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/vue@2.5.21/dist/vue.min.js"></script>

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

          ]
        }
    });
</script>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^