剖析vue原理&实现双向绑定MVVM,vue中mvvm的理解
本文主要介绍了Vue的MVVM、模板语法和数据绑定，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
:
目录
1.Vue Vue官网概述MVVM建筑模型Vue简介2。了解Vue3。模板语法1。插值语法：2。指令语法：4。数据绑定5。写el和data的两种方式1 5。el有两种方式写new2，data有两种方式写3。一个重要的原则：总结。
1. Vue概述
Vue官网
中文：https://vuejs.org/官方网站
中文：https://cn.vuejs.org/,官方网站
MVVM架构模式
MVVM简介
MVVM由三部分组成：M: Model模型，V: View视图，VM: ViewModel视图模型(Vue实例对象)。模型层表示数据模型，数据修改和操作的业务逻辑也可以在模型中定义。视图UI组件，负责将数据模型转换成UI并显示出来。ViewModel是一个同步视图和模型的对象。
在MVVM架构下，视图和模型之间没有直接的联系，但是模型和视图模型之间的交互是双向的。因此，视图数据的变化将与模型同步，模型数据的变化将立即反映到视图中。
ViewModel通过双向数据绑定连接视图层和模型层，视图和模型的同步完全自动，无需人工干预。所以开发者只需要关注业务逻辑，不需要手动操作DOM，不需要关注数据状态同步。复杂的数据状态维护由MVVM管理。
MVVM模式图
Vue的设计灵感来源于MVVM模式。
数据中的所有属性最终都会出现在虚拟机上。
vm的所有属性和Vue原型的所有属性都可以直接在Vue模板中使用。
Vue简介
这是一个JavaScript MVVM库，也是一个用于动态构建用户界面的渐进式框架。
Vue用于构建一个渐进式的用户界面框架。渐进手段的含义：最少断言。每个框架都不可避免地会有自己的特点，因此对用户会有一定的要求。这些需求都是意见，有强有弱，强弱会影响到在业务发展中的运用方式。
渐进式：Vue可由下而上逐层涂抹。简单的应用只需要一个轻量级的核心库，复杂的应用可以引入各种Vue插件。
Vue特征
遵循MVVM模式
双向数据绑定:vue.js会自动响应数据的变化，根据用户事先在代码中编写的绑定关系，修改所有绑定在一起的数据和视图内容。
组件化:Vue.js通过组件将单页面应用中的各种模块拆分成单独的组件。我们只需要先在父应用中写好各种组件标签(占位)，在组件标签中写好要传入组件的参数(就像给函数传参数一样，这个参数叫做组件的属性)，然后再分别写好各个组件。采用组件模式，提高代码复用率，使代码得到更好的维护。
视图、数据和结构的分离，声明式编码：它使得数据更改更加简单，不需要修改逻辑代码，也不需要直接操作DOM，只需要操作数据就可以完成相关操作，提高了开发效率。
虚拟DOM 和 diff算法:可以通过JavaScript提前进行各种计算，并对最终的DOM操作进行计算和优化。因为这个DOM操作是预处理操作，没有真正的操作DOM，所以叫虚拟DOM。最后，DOM操作是在计算后真正提交的，DOM操作的变化体现在DOM树上。
2. 初识Vue
如果您希望Vue正常工作，您必须创建一个Vue实例并传入一个配置对象。
根容器中的代码仍然符合html规范，但是添加了一些特殊的Vue语法；
根容器中的代码称为Vue模板；
Vue实例和容器是一一对应的；
真实开发中Vue只有一个实例，会和组件一起使用；
{{xxx}}中的Xxx需要写js表达式，xxx可以自动读取数据中的所有属性；
注意区分js表达式和js代码(语句)
1.表达式：表达式会产生一个值，可以放在任何需要值的地方。
(1).a
(2).有
(3).demo(1) //函数调用表达式
(4).x===y？A: b //三元表达式
2.js代码(语句)
(1).if(){}
(2).for(){}
一旦数据中的数据发生变化，页面中使用数据的地方会自动更新；
！-准备一个容器-
div id=demo
h1你好，{{name.toUpperCase()}}，{{address}}/h1
/div
脚本类型=文本/javascript
Vue . config . production tip=false//防止vue在启动时生成生产提示。
//创建一个Vue实例
新Vue({
El:#demo ，//el用于指定当前Vue实例服务于哪个容器。该值通常是css选择器字符串。
Data:{ //data用于存储数据。数据由el指定的容器使用。我们暂且把值写成一个对象。
姓名：“哔哩哔哩”，
地址：“上海”
}
})
/脚本
3. 模板语法
Vue模板语法有两类：
1、插值语法：
功能：用于解析标签体的内容(标签体在开始标签和结束标签中间)。
写法：{{xxx}}，xxx是一个js表达式，可以直接读取数据中的所有属性。
2、指令语法：
功能：用于解析标签(包括标签属性、标签体内容、绑定事件……)。
例如：v-bind:href=xxx 或缩写为：href=xxx 。xxx还需要写js表达式，可以直接读取数据中的所有属性。
备注：Vue中有很多指令，都是v-xxx的形式。这里以v-bind为例。
！-准备一个容器-
div id=root
H1插值语法/h1
H3您好，{{name}}/h3
人力资源/
H1指令语法/h1
a-bind:href= address . URL . toupper case() x= hello 我转到的点{{address.name}}1/a
A :href=address.url x=hello 我将转到{{address.name}} 2/a。
/div
脚本类型=文本/javascript
Vue . config . production tip=false//防止vue在启动时生成生产提示。
新Vue({
el:#root ，
数据：{
姓名：“当月见”，
//可以在多级结构中设置。
地址：{
名称：百度，
网址： http://www.baidu.com ，
}
}
})
/脚本
4. 数据绑定
Vue中有两种数据绑定方式：
1.单向绑定(v-bind)数据只能从数据流向页面。
2.：双向绑定(v-model)数据不仅可以从数据流向页面，也可以从页面流向数据。
：
双向绑定一般应用于表单类元素(如input、select等。)
V-model:value可以缩写为V-model，因为它是v-model默认收集的值(只有form类元素才有value)。
div id=root
！-普通写作-
单向数据绑定：输入类型= text v-bind:值= name br/
双向数据绑定：输入类型= text v-model:值= name br/
！-缩写-
单向数据绑定：输入类型= text :值= name br/
双向数据绑定：输入类型= text v-model= name br/
！-下面的代码是错误的，因为v-model只能应用于表单类元素(输入类元素)-
H2-型号：x= name Hello /h2
/div
脚本类型=文本/javascript
Vue . config . production tip=false//防止vue在启动时生成生产提示。
新Vue({
el:#root ，
数据：{
姓名：“哔哩哔哩”
}
})
/脚本
5. el与data的两种写法
1、el有2种写法new
Vue时配置el属性。
首先创建一个Vue实例，然后通过vm指定el的值。$mount(#root )。
2、data有2种写法
对象类型
函数公式
如何选择：两种方式都可以写，但是使用组件时，数据必须使用函数公式，否则会报错。
3、一个重要的原则：
对于Vue管理的函数，一定不能写箭头函数。一旦写了箭头函数，这就不再是Vue的一个实例，而是一个窗口。
div id=root
H1您好，{{name}}/h1
/div
脚本类型=文本/javascript
Vue . config . production tip=false//防止vue在启动时生成生产提示。
//两种写法//el -
const v=new Vue({
//el:#root ，//第一种写法
数据：{
姓名：“哔哩哔哩”
}
})
console.log(v)
动词（verb的缩写）$mount(#root) //第二种写法
//示例：
setTimeout(()={
动词（verb的缩写）$mount(#root )
},1000);//Timer:页面过去1秒后会显示vue效果。
//-
//数据的两种写入方式
新Vue({
el:#root ，
//第一种写法//数据：对象类型
/*数据：{
姓名：“哔哩哔哩”
} */
//数据的第二种写法//函数式
//把数据写成函数，这个函数必须返回一个对象。函数式编写一般用于组件和框架。
//注意：这个函数不是自己调用的，是Vue调用的
data(){
//console.log(@@@ ，this) //这里是一个Vue实例对象(当数据是普通函数时，否则这里指的是window)
返回{
姓名：“哔哩哔哩”
}
}
})
/脚本
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。