Vue基础教程（白痴教程）

最新推荐文章于 2024-05-16 13:24:43 发布

X ゜

最新推荐文章于 2024-05-16 13:24:43 发布

阅读量7.2k

点赞数 13

分类专栏： Vue 文章标签： vue javascript java spring intellij idea

本文链接：https://blog.csdn.net/weixin_44625302/article/details/106870346

版权

Vue 专栏收录该内容

12 篇文章 5 订阅

订阅专栏

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>

X ゜

关注

13
点赞
踩
74

收藏

觉得还不错? 一键收藏
1
评论
Vue基础教程（白痴教程）

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

扫一扫