vue物联网框架 vue框架简单介绍

目录

• MVVM架构模式
• Vue框架

• 简介
• 特点
• Vue的使用
• Vue实例属性

MVVM架构模式

MVVM由Model，View，ViewModel三部分构成。

• M(Model)：数据模型（Vue的data）
• V(View)：视图，即UI，用来展示数据（Vue的el）
• ViewModel：是一个对象，用来同步视图View和模型Model

双向绑定：View和Model之间没有直接联系，通过ViewModel进行交互（即双向数据绑定），View的变化可以引起Model的变化，Model的变化也可以引起View变化（类似于浅拷贝）。

通过双向数据绑定，View 和 Model 之间的同步工作完全是自动的，因此开发过程中不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

可以实现双向绑定的标签：Input，textarea，select标签等（可以输入或改变标签内容的标签）

模式图：

Vue框架

简介

Vue.js可以说是MVVM架构的最佳实践，是一个JavaScript MVVM库，是一套构建用户界面的框架。它专注于MVVM中的ViewModel，不仅做到了数据双向绑定，而且也是一款轻量级的JS库。

特点

（1）数据双向绑定：vue.js会自动响应数据的变化情况，根据用户在代码中预先写好的绑定关系，对所有绑定在一起的数据和视图内容都进行修改。这是vue.js最大的优点，通过MVVM思想实现数据的双向绑定。

（2）组件化：Vue.js通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件（component）中。

（3）视图、数据和结构的分离：数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作。

（4）虚拟DOM：这里同React框架的虚拟DOM——>React虚拟DOM

Vue的使用

（1）引入vue.js文件

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

（2）展示HTML

在Vue中渲染数据使用了基于HTML的模板语法——>{{}}

<div id="app">
    <p>{{ msg }}</p>
    <p>{{ 1+2 }}</p>
    <p>{{ 3>1 }}</p>
</div>

（3）创建Vue对象

<script>
    new Vue({    //创建一个Vue对象
        el:'#app',      //是Vue对象的属性，用来与DOM对象进行绑定
        data:{       //是Vue对象的属性，用来指定对象的数据
            msg:'西柚'
        }
    })
</script>

Vue实例属性

new Vue({
	el:'', -->必须的,(视图，html结构)——>必须的，用来指定Vue实例绑定的对象
	data: { -->(数据)——>不是必须的，用来定义Vue实例里面用到的数据（key-value）
	},
	methods:{   ——>可选的，用来定义Vue实例的方法
	},
	computed:{     ——>可选的，计算属性，本质上和data中定义的属性是一样的，协助数据的绑定操作，实现一些复制的功能，定义的函数在使用时可以和data的属性一样使用，不需要（）
	},
	watch:{}   --->监听属性，通过 watch 来响应数据的变化
})